Pathway link card

Pathway link cards are used on pathway pages to direct users to the category of content they’re looking for.

The content is generated automatically from titles and summaries of the child pages of that pathway page.

Specs

• Pathway link cards adjust to fit the width of the container they’re in

• Max width of 960px

• Padding: 16px (mobile), 24px 32px (desktop)

• Space between title and description: 4px

• Title font size: body copy largest

• Description font size: body copy large

• Drop shadow: clickable card shadow

• Default border: 1px solid [gray 10]

• The hover state changes the border color and drop shadow

• Hover border: 1px solid [light accent softened]

• Hover shadow: box-shadow: 0px 4px 0px 0px [light accent softened]

Text scales up/down in the standard formula outlined in the Typography section.

Inspect card components in public site components in Figma