Länsförsäkringar Design System
  • Components
  • Button and links
  • Shortcuts

    • Shortcuts

    Shortcuts are as a way of providing a quick and easy way to access popular pages. They are usually placed in the main view of a newly loaded page.

    How to use

    Shortcuts are used to highlight alternative actions from the current flow which we think are important for the user. They are either of a more alerting nature or navigational, and each design only corresponds to one of these two uses. For both use cases the shortcut takes the user into another flow than the one they came from. Shortcuts are normally spanning the whole row, except for multiple-lined shortcuts which may have two next to each other. They also feature a 2px shadow on the bottom to highlight that they can be clicked.

    Variations

    There are two main variations of the shortcut:

    • Navigational shortcuts exist in two different styles, but all with the main purpose of highlighting alternative ways forward from the current view.
    • Landing page shortcuts are only used on landing pages and are used for helping users find the most common tasks/pages.

    There are two different types of navigational shortcuts, but these types are mainly aesthetic as they both do the same thing - they help the user to navigate in alternative patterns than the main purpose of the page they are on. The main difference between the types are how many rows they span, and how the design has been adapted for this.

    One-lined shortcut

    The one-lined shortcut is used for navigational purposes and is white with blue bold text. Its relative size is somewhat bigger than the other versions.

    Multiple-lined shortcut

    Multiple-lined shortcuts consists of a header row (larger type, bold) which communicates the main action and a textarea below to give more detail in. The textarea can span one or several rows andea you need to choose between one of the two modifiers for the styling:

    • Blue text in Intro Cond; used when you wish to add extra details in short form, e.g. the organisational number in the company switcher in Mina Sidor (with the company name being the header).
    • Black text in Arial; used when you want to add a descriptive text. An example of this in use is on navigational pages on lansforsakringar.se (example).

    Landing page shortcuts

    Our landing pages often feature a special version of the shortcut which in its desktop-mode looks more like a large button than the other shortcuts (in its responsive mode it is very similar to the one-lined shortcut however). The main area of the shortcut features a large icon, and below the icon a few (preferably only one) words describe what the shortcut leads to.

    This is used on the landing pages of lansforsakringar.se and Mina Sidor as well as the Om oss (about us)-section of lansforsakringar.se.

    Modifier

    One modifier exists for shortcuts and it is available for "glasspinnar" and navigational shortcuts; you can opt to put an icon in your shortcut. If so it is placed to the left of the text in the shortcut. Just make sure that you're consistent if you have several shortcuts grouped together.