Signpost

Overview

View on FigmaView on GitHub

Purpose

The Signpost serves as a clear and concise navigational element. It includes an image to provide visual cues to the user.

Anatomy

The Signpost can be broken down into the following elements -

  1. 1
  2. 2
  3. 3

  1. Image

    Visually represents the destination.

  2. Headline

    Indicates where the Signpost will take the user.

  3. Trim (optional)

    Just like the Card component, Signposts can include a trim at the bottom.

Variants & States

  • Breakpoint: Mobile & Tablet, Desktop
  • State: default, hover, focus
  • Trim: on/off
Mobile & TabletDesktop