Components

Cards & surfaces

A card is a white surface with a 16px radius, a hairline border and a soft shadow. A featured card earns a 4px top rule in indigo or green, never a coloured side border.

Cards & surfaces

Automation

The everyday card. A hairline border and a soft shadow do the work.

AI agents

A 4px top rule marks a featured card.

<Card>
  <h3>Automation</h3>
  <p>The everyday card. A hairline border and a soft shadow do the work.</p>
</Card>

<Card interactive>Lifts 3px on hover</Card>

<Card featured>
  <h3>AI agents</h3>
  <p>A 4px top rule marks a featured card.</p>
</Card>

Props

PropTypeDescription
interactivebooleanLifts 3px on hover with a larger shadow.
featuredbooleanAdds a 4px top rule in the accent or brand colour.

Guidelines

Do
  • Let a hairline border and a soft shadow separate a card.
  • Feature a card with a 4px top rule in green or indigo.
  • Use a full brand-tint fill to call out or select a card.
Do not
  • Never put a coloured border on one side of a rounded card. This is banned on every side.
  • Do not nest cards inside cards. Use space and typography instead.