Return to Sky UI homepage
Info Card

Overview

View on FigmaView on GitHub

Purpose

The Info Card displays information in a consistent and flexible way, with the option for additional links to direct the user to further actions.

Anatomy

The Info Card component can be broken down into the following elements -

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8

  1. Image (optional)

    Image for visual interest.

  2. Headline

    The headline describes the subject of the Info Card.

  3. Icon (optional)

    An optional Icon to visually support the headline.

  4. Tag component (optional)

    An optional Tag to display a status.

  5. Description (optional)

    The main content area of the Info Card.

  6. Text List (optional)

    A text list of up to four lines with sub headlines and content.

  7. Link List (optional)

    A list of up to four Text Links for further directions.

  8. Trim (optional)

    A coloured line to tie in a product's branding.

Variants & States

Info Cards themselves have no alternative variants or states other than the Breakpoint. Most elements are optional and can be shown or hidden.

Info Card

  • Breakpoint: Mobile, Desktop
  • Manual height: on/off
  • Icon: on/off
  • Tag: on/off
  • Description: on/off
  • Text list: on/off
  • Links list: on/off
  • Trim: on/off

Placeholder

Aspect Ratio: 32:9, 16:9

Text List

  • Breakpoint: Mobile, Desktop
  • Stacked: on/off
  • ​# of Lines: 1-4

Links List

​# of Links: 1-4

Info Card with all optional elements turned on.
Headline
Label
Optional description to support the user in understanding the content within this info card.
  • Sub headlineSub content
  • Sub headlineSub content
  • Sub headlineSub content
  • Sub headlineSub content
Info Card with all optional elements turned off.
Headline