Cards

Cards group related content and actions. They help users scan and navigate to detailed information.

Featured Card

Featured cards have a left border accent using the primary colour. Use for important navigation items or highlighted content.

Featured Card Title

Description text explaining what this card links to or represents.

Another Featured Card

Cards can contain titles, descriptions, and link to detailed pages.

<a href="/page" class="card card-featured">
  <h4>Featured Card Title</h4>
  <p>Description text...</p>
</a>

Default Card

Standard cards for general content. They have a subtle border and shadow on hover.

Default Card

A standard card layout for general content and navigation.

Another Card

Cards have hover states and focus states for accessibility.

Card with Icon

Cards can include icons to help users quickly identify content types.

Card with Icon

Icons help users quickly identify content types.

Card Grid

Cards should be displayed in responsive grids. Ensure all cards in a row have equal heights.

Card One

Card Two

Card Three

Card Four

<div class="card-grid columns-4">
  <a href="#" class="card">Card One</a>
  <a href="#" class="card">Card Two</a>
  <a href="#" class="card">Card Three</a>
  <a href="#" class="card">Card Four</a>
</div>

Usage Guidelines

Do

Use cards to group related information
Keep card content concise
Ensure equal heights in card rows
Make the entire card clickable when it links to content

Don't

Don't put too much content in a single card
Don't use cards for non-actionable decorative content
Don't mix different card styles in the same row

Accessibility

Cards that link have visible focus states
Card headings provide meaningful link text for screen readers
Focus states meet WCAG 2.1 visibility requirements