Fylgja Card

A card is a surface that groups related content into one contained block, such as a post, product, or summary. It is a plain <article class="card">, so the markup stays semantic and you compose the inside with ordinary elements.

For richer layouts built on the card, see the Media Card and the Product Grid.

Preview

Card title

A card groups related content into a single, contained surface, ideal for posts, products, or any self-contained block.

Read more

<article class="card">
	<h3 class="lead">Card title</h3>
	<p>A card groups related content into a single, contained surface, ideal for posts, products, or any self-contained block.</p>
	<p><a href="#">Read more</a></p>
</article>

Modifiers

Cards take two shadow modifiers. Both need a shadow token available.

--elevated

Drops the border and lifts the card with a shadow (needs the --shadow-2 token), for surfaces that should stand off the page.

Elevated card

The --elevated modifier drops the border and lifts the card with a shadow, for surfaces that should stand off the page.

<article class="card --elevated">
	<h3 class="lead">Elevated card</h3>
	<p>The --elevated modifier drops the border and lifts the card with a shadow, for surfaces that should stand off the page.</p>
</article>

--hover

Adds a shadow on hover (needs --shadow-4). Pair it with the stretched-link utility on a link inside the card to make the whole card a single click target.

An orange fox resting in the grass

Orange Fox Wallpaper

The whole card is clickable: the stretched-link utility on the title expands its hit area to the card.

€6.00

<article class="card --hover max-w-full" style="--size-x: 500px">
	<img
		src="/images/placeholders/fox.webp"
		alt="An orange fox resting in the grass"
		width="500"
		height="300"
		loading="lazy"
		class="rounded"
	/>
	<h3 class="lead">
		<a href="#" class="stretched-link">Orange Fox Wallpaper</a>
	</h3>
	<p>The whole card is clickable: the stretched-link utility on the title expands its hit area to the card.</p>
	<p class="font-bold">€6.00</p>
</article>

Anatomy

Part Responsibility
<article class="card"> The surface that groups the content.
.card-content Padding wrapper for the text when the card also holds media.
.--elevated / .--hover Optional shadow modifiers.
.stretched-link Expands a link’s hit area to the whole card.

Accessibility

  • Use a real heading inside the card so it appears in the document outline.
  • For a fully clickable card, keep one meaningful link with stretched-link rather than wrapping everything in an anchor, so the accessible name stays clear.
  • Give every image a descriptive alt (or alt="" if it is purely decorative).

FAQ

Do I need @fylgja/tokens for the --elevated or --hover modifiers?

You need the --shadow-2 (elevated) or --shadow-4 (hover) tokens available. They ship with @fylgja/tokens, but any token system that defines them, such as Open Props, works too.

How do I make the whole card clickable?

Pair the --hover modifier with the stretched-link utility on a link inside the card, as shown under the --hover modifier.