Skip to content

Shortcuts13.10.5

Shortcuts are emphasized links to content.


$ npm i @if-design-system/shortcuts@13.10.5

Edit this section

Overview

There is currently no documentation for this section yet.
Contact the Design System team for questions.

If you want to contribute, you can also add the documentation yourself!

Edit this section

Behaviour

Interactions

Hover

Focus

Fill color is BE 3, LIGHT BEIGE

Focus

Focus

3px outline with 1px offset and color BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.

Modifiers

Layout

The Shortcuts container, .shortcuts, can be modified with the classes one, two or three for a desired layout.

<ul role="presentation" class="if shortcuts two">

<ul role="presentation" class="if shortcuts three">

<ul role="presentation" class="if shortcuts one">

<ul class="if shortcuts [one|two|three]" role="presentation"></ul>

Fill color

The fill color of the Shortcuts changes based on the parent block container.

If the parent block container is a default block, like block or block light, the fill color is BE 3, LIGHT BEIGE.

If the parent block container is dark, i.e. block dark, the fill color is BE 5, LIGHTEST BEIGE

Edit this section

Anatomy

Shortcuts
  1. Short text
  2. Icon
Edit this section

Implementation

<ul role="presentation" class="if shortcuts">
  <li role="presentation" class="if"><a href="/" class="if shortcut <any icon string>">Jewelry</a></li></ul>

Where the icon string could be: icon product diamond;

Edit this section

Contact us