Clickable cards

Clickable cards are used in various places to link to pages or images. These full cards are clickable and contain just one link.

On hover, the border color changes to Dark Accent and the shadow disappears – suggesting the card has moved in and is clickable.

Specs

• Padding around text: 8px 16px (mobile), 16px (desktop)

• Titles: H3s or H4s

• Description: body copy medium

• Background color: primary 100 or white

• Default border: 1px solid [gray 20]

• Drop shadow: clickable card shadow

• Hover border: 1px solid dark accent

• Hover shadow: none

Inspect card components in public site components in Figma