Fylgja Media Card

A media card pairs an image with text in one surface, ideal for a featured post or banner. It builds on the Card: the image goes in a <picture> and the text in a .card-content block, and md:flex lays them side by side once there is room.

Preview

Exploring Fylgja in the Wilds

Group an image and text into one surface. On wider screens the card lays out side by side.

Read more

<article class="card md:flex">
	<picture class="flex-none">
		<img
			src="/images/placeholders/deer-wide.webp"
			alt="A deer standing in a misty forest"
			width="740"
			height="240"
			loading="lazy"
			class="object-cover"
			style="--size-y: 200px; --md_size-x: 280px"
		/>
	</picture>
	<div class="card-content">
		<h3 class="lead">Exploring Fylgja in the Wilds</h3>
		<p class="line-clamp">Group an image and text into one surface. On wider screens the card lays out side by side.</p>
		<p><a href="#">Read more</a></p>
	</div>
</article>

Usage

• Put the media (a <picture> or <img>) as a direct child of the card, and the text in a <div class="card-content">. With a .card-content present, Fylgja moves the padding there so the media bleeds to the card edges.
• Add md:flex to the card and flex-none to the media so they sit side by side on wider screens and stack on small ones.
• object-cover keeps the image filling its box; line-clamp trims long text.

Accessibility

• Give the image a descriptive alt.
• Use a real heading inside .card-content so the card appears in the outline.