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

$3

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

$3

- 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]