MediaCard

Thumbnail-first card with edge-to-edge image, optional overlay, and an actions slot

SSR mode

Examples

Image, title and description

Getting started guide

Everything you need to set up your first project in under five minutes.

With Actions slot

Component library

Browse all available Blok primitives and chunks.

API

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
MediaCard	A card where the image leads, spanning the full card width edge-to-edge. The content area (title, description, actions) sits below. An optional `Overlay` slot is absolutely positioned over the image for badges, gradients, or play buttons. Wrapper-styling — `Gutters` controls the inner content padding only; the image is always flush.

MediaCard

A card where the image leads, spanning the full card width edge-to-edge. The content area (title, description, actions) sits below. An optional Overlay slot is absolutely positioned over the image for badges, gradients, or play buttons. Wrapper-styling — Gutters controls the inner content padding only; the image is always flush.

Property	Type	Description
ImageUrl	string	URL for the card thumbnail. Rendered with `aspect-video object-cover w-full`. Default: empty string.
ImageAlt	string	Alt text for the image. Default: empty string.
Title	string	Card heading. Rendered as `<h3>` in `text-base font-semibold`. Default: empty string.
Description	string?	Supporting text in `text-sm text-muted-foreground mt-1`. Omit to suppress.
Actions	RenderFragment?	Optional action slot rendered below the description with `mt-3 flex items-center gap-2`.
Overlay	RenderFragment?	Optional slot absolutely positioned over the image (`absolute inset-0`). Use for badges, gradients, or media controls.
Borders	bool	Toggles `border border-border rounded-lg`. Default: `true`.
BgFilled	bool	Toggles `bg-background`. Default: `true`.
Gutters	bool	Toggles `p-4` on the content area below the image. Default: `true`.