This component shows if a piece of content has been selected by a user as a favourite using a text label and icon.
The active state of the icon is managed by adding the class
vf-bookmark--active. This class should be added by your framework or sever-side code.
The component can be configured with a number of options.
bookmark_href: defaults to
- Any url that may be required.
label_inactive: defaults to
label_active: defaults to
is_active: defaults to
- determines the appropriate
modifier: defaults to
icon: defaults to
heart(a bookmark icon may be added in the future)
This component targets WCAG 2.1 AA accessibility.
Note that the SVG icons use
aria-hidden="true" as to be ignored by screen readers.