1.0.2 • Public • Published

Bookmark component

npm version


Indicates if an item has been bookmarked to a list of favourites or similar. Use vf-button instead of this component for the main call to action on a page.


This component shows if a piece of content has been selected by a user as a favourite using a text label and icon.

No JavaScript functionality is provided and it is expected that the state handling will be done on a case-by-case basis on the project application.

Use vf-button instead of this component for the main call to action on a page.

Active state

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 JavaScript:Void(0);
    • Any url that may be required.
  • label_inactive: defaults to Bookmark
  • label_active: defaults to Bookmarked
  • is_active: defaults to true
    • true or false
    • sets vf-bookmark--active CSS class
    • determines the appropriate label_inactive or label_active
  • modifier: defaults to inline
    • inline or button or small
  • icon: defaults to heart


This component targets WCAG 2.1 AA accessibility.

Note that the SVG icons use aria-hidden="true" as to be ignored by screen readers.

Pages that use this component

The EMBL-EBI Training site includes pages that use the inline variant to mark a training course as favourite and a customised version of the button variant to mark a page as complete.


This repository is distributed with npm. After installing npm and yarn, you can install vf-bookmark with this command.

$ yarn add --dev @visual-framework/vf-bookmark


[If your component uses JS]

You should import this component in ./components/vf-component-rollup/scripts.js or your other JS process:

import { vfComponentName } from 'vf-bookmark/vf-bookmark';
// Or import directly
// import { vfComponentName } from '../components/raw/vf-bookmark/vf-bookmark.js';
vfComponentName(); // if needed, invoke it


[If your component uses Sass]

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-bookmark/vf-bookmark.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter




Package Sidebar


npm i @visual-framework/vf-bookmark

Weekly Downloads





Apache 2.0

Unpacked Size

36.8 kB

Total Files


Last publish


  • bhushan-ebi
  • pacope92
  • ebiwebdev
  • sandykadam
  • khawkins98