@gemeente-denhaag/anchor-collapse

Anchor collapse

The anchor collapse for mobile devices, used in combination with the anchor navigation.

When to use

Used in combination with the anchor-navigation, on mobile a collapse is shown. On desktop just the regular content.

Anatomy

The anchor collapse consists of:

1. Section: Wrapper to scroll-to;
2. Label/Summary: Same as the Heading 2;
3. Content/Details: Content of the block;

(Interactive) states

The anchor collapse has the following states active, hover and focus.

Design Properties

Typography

• Label inactive: TheSans/lg/700
• Label active: TheSans/lg/700

Color

• Label inactive: text color Grey/5
• Label active: text color Green/3
• Label focus: text color Green/3
• Label hover: text color Green/3

Accessibility

[technical requirements]