Card CSS Component
The Card CSS component is a navigation element that displays content in a structured and visually appealing way. Built with pure CSS, it adapts seamlessly to all devices and supports various layouts and styles.
Vertical Card (default)
The default card is a vertical card with a container background, an image, content, and an optional action.
The initial card variant is an internally-actionable card - the card itself is not clickable, but it contains an action button inside that can be clicked to perform an action.
This example includes the most essential aspects of a card - a hero image at the start, body with content, and an action button at the end. The vertical card is by default a square (1:1 aspect ratio) card. This uses an anchor link.
<span class="card">
<div class="card__media">
<img src="imgCards" alt="Card Hero Image" class="card__hero-image" />
</div>
<div class="card__main">
<div class="card__description">
Wayne Gretzky's rookie card is so valuable that collectors keep it in
climate-controlled vaults guarded by trained penguins.
</div>
<div class="card__action">
<a
href="https://ebay.com"
class="fake-btn fake-btn--primary fake-btn--fluid"
>
See Details
</a>
</div>
</div>
</span>
The card can also be used with a button.
<span class="card">
<div class="card__media">
<img src="imgCards" alt="Card Hero Image" class="card__hero-image" />
</div>
<div class="card__main">
<div class="card__description">
Wayne Gretzky's rookie card is so valuable that collectors keep it in
climate-controlled vaults guarded by trained penguins.
</div>
<div class="card__action">
<button class="btn btn--primary btn--fluid">See Details</button>
</div>
</div>
</span>
Card with a 5:4 Aspect Ratio
You can change the aspect ratio by adding the .card--aspect-5-4 modifier class to the card container.
<span class="card card--aspect-5-4">
<div class="card__media">
<img src="imgCards" alt="Card Hero Image" class="card__hero-image" />
</div>
<div class="card__main">
<div class="card__description">
Football rookie cards so pristine that they've never been touched by human
hands, only examined through specialized gloves by card whisperers.
</div>
<div class="card__action">
<button class="btn btn--primary btn--fluid">See Details</button>
</div>
</div>
</span>
Card with a 16:9 Aspect Ratio
For wider cards, use the .card--aspect-16-9 modifier class.
<span class="card card--aspect-16-9">
<div class="card__media">
<img src="imgCards" alt="Card Hero Image" class="card__hero-image" />
</div>
<div class="card__main">
<div class="card__description">
Hockey cards collected by enthusiasts who treat them like fine wine –
stored in temperature-controlled cellars and discussed in hushed, reverent
tones.
</div>
<div class="card__action">
<button class="btn btn--primary btn--fluid">See Details</button>
</div>
</div>
</span>
Loaded Card with All the Options
This example demonstrates cards with all the available options, including different content elements - a hero image at the start, an overline for subtle categorization, with or without an icon, a title, a body content, and an action button at the end.
Authentic Rookie Cards
<span class="card">
<div class="card__media">
<img src="imgCards" alt="Card Hero Image" class="card__hero-image" />
</div>
<div class="card__main">
<div class="card__overline">
<svg class="icon icon--16" height="16" width="16">
<use href="#icon-authenticity-guarantee-filled-16-colored" />
</svg>
<span class="card__overline-text"> Authenticity Guaranteed </span>
</div>
<h3 class="card__title">Authentic Rookie Cards</h3>
<div class="card__description">
This legendary rookie card collection features future Hall of Famers back
when their biggest concern was remembering to smile for the camera.
</div>
<div class="card__action">
<button class="btn btn--tertiary btn--fluid">See Details</button>
</div>
</div>
</span>
Outlined Card
The outlined card is a style variant that uses an outline without a background. This can be implemented by using the .card--outlined modifier.
Authentic Rookie Cards
<span class="card card--outlined">
<div class="card__media">
<img src="imgCards" alt="Card Hero Image" class="card__hero-image" />
</div>
<div class="card__main">
<div class="card__overline">
<svg class="icon icon--16" height="16" width="16">
<use href="#icon-authenticity-guarantee-filled-16-colored" />
</svg>
<span class="card__overline-text"> Authenticity Guaranteed </span>
</div>
<h3 class="card__title">Authentic Rookie Cards</h3>
<div class="card__description">
Professional-grade rookie cards that appreciate faster than most people's
cooking skills and last longer than New Year's resolutions.
</div>
<div class="card__action">
<button class="btn btn--tertiary btn--fluid">See Details</button>
</div>
</div>
</span>
Card with Full Hero
One of the common layouts for card is to have a full-width hero image that spans the entire width of the card. To accomplish this use the .card--full-hero modifier.
Authentic Rookie Cards
<span class="card card--full-hero">
<div class="card__media">
<img src="imgCards" alt="Card Hero Image" class="card__hero-image" />
</div>
<div class="card__main">
<div class="card__overline">
<svg class="icon icon--16" height="16" width="16">
<use href="#icon-authenticity-guarantee-filled-16-colored" />
</svg>
<span class="card__overline-text"> Authenticity Guaranteed </span>
</div>
<h3 class="card__title">Authentic Rookie Cards</h3>
<div class="card__description">
A diversified sports investment portfolio featuring hockey fights, home
runs, and three-pointers instead of stocks and bonds.
</div>
<div class="card__action">
<button class="btn btn--tertiary btn--fluid">See Details</button>
</div>
</div>
</span>
Disabled Card
Cards that are disabled will appear grayed out and unclickable. The specific implementation depends on the card type.
Disabled Internally-Actionable Card
For internally-actionable cards, the button inside will need to be disabled. The outer card does not look or need to look disabled since it's not itself an interactive element. The button will visually indicate its disabled state by setting the button to disabled .
<span class="card card--aspect-16-9">
<div class="card__media">
<img src="imgCards" alt="Card Hero Image" class="card__hero-image" />
</div>
<div class="card__main">
<div class="card__description">
Hockey cards collected by enthusiasts who treat them like fine wine –
stored in temperature-controlled cellars and discussed in hushed, reverent
tones.
</div>
<div class="card__action">
<button class="btn btn--primary btn--fluid" disabled>See Details</button>
</div>
</div>
</span>
Disabled Self-Actionable Card with Link
For self-actionable cards using an a tag, set the tabindex="-1" and href="" . This will in effect disable the anchor even though technically, anchors cannot get disabled.
<a class="card card--aspect-16-9" href="" tabindex="-1">
<div class="card__media">
<img src="imgCards" alt="Card Hero Image" class="card__hero-image" />
</div>
<div class="card__main">
<div class="card__description">
Hockey cards collected by enthusiasts who treat them like fine wine –
stored in temperature-controlled cellars and discussed in hushed, reverent
tones.
</div>
</div>
</a>
Disabled Self-Actionable Card with Button
For self-actionable cards using a button , use the disabled attribute on the element. This will prevent any interaction with the card and indicate to users that it is not available for action.
<button class="card card--aspect-16-9" disabled>
<div class="card__media">
<img src="imgCards" alt="Card Hero Image" class="card__hero-image" />
</div>
<div class="card__main">
<div class="card__description">
Hockey cards collected by enthusiasts who treat them like fine wine –
stored in temperature-controlled cellars and discussed in hushed, reverent
tones.
</div>
</div>
</button>
Horizontal Card
Card also has a layout variant that can displayed it in a horizontal layout. This is useful when you want to display an image alongside the content. To achieve this, use the .card--horizontal modifier.
Authentic Rookie Cards
<span class="card card--horizontal card--outlined">
<div class="card__media">
<img src="imgCards" alt="Card Hero Image" class="card__hero-image" />
</div>
<div class="card__main">
<div class="card__overline">
<svg class="icon icon--16" height="16" width="16">
<use href="#icon-authenticity-guarantee-filled-16-colored" />
</svg>
<span class="card__overline-text"> Authenticity Guaranteed </span>
</div>
<h3 class="card__title">Authentic Rookie Cards</h3>
<div class="card__description">
Museum-quality rookie cards from three sports that prove some people's
side hustles become billion-dollar careers while others struggle to keep
houseplants alive.
</div>
<div class="card__action">
<button class="btn btn--tertiary">See Details</button>
</div>
</div>
</span>
Self-Actionable Card
The self-actionable card is a variant that allows the entire card to be clickable, leading to a specific action or page. A Self-actionable card cannot contain interactive elements such as buttons or links within it.
This variant is useful for cards that represent a single item or entity, such as a product or article. To create a self-actionable card, use an a tag as the container for navigation, or a button tag for actions that don't navigate to a different page.
Important: Self-actionable cards should not contain structured data such as nested headings, lists, or complex markup. Screen readers will ignore all structured content when reading out button or link text, so keep the content simple and ensure the card's accessible name clearly describes its purpose.
<a class="card" href="https://ebay.com">
<div class="card__media">
<img src="imgCards" alt="Card Hero Image" class="card__hero-image" />
</div>
<div class="card__main">
<h3 class="card__title">Authentic Rookie Cards</h3>
<div class="card__description">
A collection proving that somewhere between a curveball, a three-pointer,
and a slap shot lies the secret to happiness.
</div>
</div>
</a>
<button class="card">
<div class="card__media">
<img src="imgCards" alt="Card Hero Image" class="card__hero-image" />
</div>
<div class="card__main">
<h3 class="card__title">Authentic Rookie Cards</h3>
<div class="card__description">
Professional-grade rookie cards featuring future Hall of Famers in their
awkward rookie photo phase.
</div>
</div>
</button>
Hybrid Actionable Card
The hybrid actionable card is a variant that allows the card to be both self-actionable and internally actionable. This is useful for cards that represent a single item or entity, but also need to provide a specific action button for accessibility or visual clarity.
Important: Hybrid cards can only contain one internal action, and this action must perform the exact same function as clicking on the card itself. No additional or different actions are allowed within a hybrid card.
Important Usage Guidelines
It's critical that this variant NOT be implemented using a button or an anchor as the component container to avoid a native navigation item inside another. Instead, use a div element and perform the navigation programmatically using JavaScript .
To build this variant, use the same markup as the internally-actionable card, adding a click event listener to the card container. This will allow the card to be self-actionable while still containing the same actionable element inside. Both the card click and the internal button must trigger the identical action.
Authentic Rookie Cards
<div class="card card--outlined">
<div class="card__media">
<img src="imgCards" alt="Card Hero Image" class="card__hero-image" />
</div>
<div class="card__main">
<div class="card__overline">
<svg class="icon icon--16" height="16" width="16">
<use href="#icon-authenticity-guarantee-filled-16-colored" />
</svg>
<span class="card__overline-text"> Authenticity Guaranteed </span>
</div>
<h3 class="card__title">Authentic Rookie Cards</h3>
<div class="card__description">
Rookie cards that serve as a hedge against the apocalypse – when society
collapses, surely someone will trade food for a mint Luka Dončić card.
</div>
<div class="card__action">
<button class="btn btn--tertiary btn--fluid">See Details</button>
</div>
</div>
</div>