Cards

Cards contain elements and functions on a single topic and can be used as teasers for further content. The format, size and layout are flexible within the layout structure.

1. Card as an Interactive Block

The entire card behaves as a clickable block with a hover effect. Used ONLY when no other interactive elements (buttons, links) are present inside.

Teaser Block

Whole block is clickable. Lift effect on hover highlights the "teaser" nature.

Brand Teaser

Premium variant with high contrast background.

2. Card with Interactions

Contains buttons or links. The hover effect across the entire card is OMITTED to avoid conflicting click targets.

3. Card with Background Image

Visuals are bled to the edge. The image is darkened with a 30% overlay area for readability.

Performance Redefined

The all-electric future is here.

Sustainable Design

Materials evolved for tomorrow.

Explore

4. Card Grid (0.25rem Spacing)

Cards combined in a grid with a narrow spacing of 0.25 rem (4px) for a compact, architectural look.

<!-- Card Grid with Narrow Gaps -->
<div class="card-grid">
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<!-- Card with Background & Overlay -->
<div class="card card--background">
  <img src="..." class="card__media">
  <div class="card__overlay"></div>
  <div class="card-body">...</div>
</div>