EDS – Equinor Design System

A card displays content related to a single subject and acts as an entry point to more detailed information. Card blocks can be combined in a variety of ways.


Cards should display data related to a single topic. They are easy to scan and have clear actions. Cards can be customized by combining different card blocks. Dividers can be used to separate sections within a card, however, the divider should not be full-width, except when displaying content that can be expanded.


  • Do not use cards as or in Top bars
  • Do not use cards as Sidesheets
  • Do not use cards as or in Nav drawers
  • Do not use cards as Lists
  • Do not use cards inside other cards
  • Do not use cards as galleries
  • Do not use cards with text over photography or illustrations
  • Do not use cards to group large sets of information


Card container

The container is the only required block in a card. The card aligns to the artboard/frames grid columns, which gives the card a fluid width. Content blocks within the card, however, follow the card container’s own grid. There are four available card/container options: default, info, danger and warning. The primary action of a card is generally the card itself being a large touch target.

FigmaExternal linkFigma design of card container


There are twelve title blocks to choose between: Avatar H6 caption, Avatar H6 caption action, Overline H6, Overline H6 action, Overline H6 avatar, H4 body short, H4 body short action, H4 body short avatar, H5 body short, H5 body short action and H5 body short avatar.


Title blocks can have:

  • Title
  • Subtitle
  • Avatar
  • Metadata
    • Tags, badges and free text
  • Overflow menu
FigmaExternal linkFigma design of card content

Supporting text

There are two supporting text blocks to choose between: supporting-text/middle which is to be used when it is sandwiched between other blocks, and supporting-text/last which is to be used when it is the last block.


Supporting text blocks can have:

  • Supporting text
    • Should not contain multiple paragraphs
    • Use inline links with high caution
FigmaExternal link
🙈Ops! Can't find the image, but you could still try Figma.

Rich media

There are three rich media blocks to choose between: rich-media/middle which is to be used when it is sandwiched between other blocks, rich-media/last which is to be used when it is the last block and rich-media/leading-image which is to be used when it is the first block. The rich-media/middle and rich-media/last blocks are placeholder blocks, meaning that you can add your own rich content to them. Rich media can be used full-width, and if it’s the first block on the card, it can go all the way to top


Rich media blocks can have:

  • Graph
  • Table
  • Image
    • within the grid when between blocks and full width when leading
  • Dividers
FigmaExternal linkFigma design of card rich media blocks

Supplemental actions

There are three supplemental action blocks to choose between: supplemental-actions/buttons, supplemental-actions/icons and supplemental-actions/meta. Supplemental actions are represented by buttons, icons, UI controls and supporting text. A rule of thumb is to place them at the bottom of a card.


Supplemental action blocks can have:

  • Supplemental actions
  • Dividers
    • Content that can be expanded should use full-width dividers, ignoring the horizontal spacing.
  • Overflow menu
  • UI controls
  • Chips
FigmaExternal linkFigma design of supplemental action

✏️ Edit this page on GitHub