Components · Layout
Media Card
BetaSince v1.6.0
An image card with a glass caption over a soft scrim. With `href`, the whole card is one link.
import { MediaCard } from '@nexub/react';Examples
With link
Without link, with actions
Ratios
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| srcrequired | string | — | Image URL. Loaded lazily. |
| altrequired | string | — | Image description. Pass '' when the image is decorative. |
| ratio | '16/9' | '4/3' | '1/1' | '3/4' | '16/9' | Aspect ratio of the image box. |
| title | ReactNode | — | Caption title, rendered as an h3. |
| description | ReactNode | — | Caption text under the title. |
| eyebrow | ReactNode | — | Small label above the title. |
| href | string | — | Makes the whole card one link, stretched from the title (so it needs title). Adds the hover lift and image zoom. |
| children | ReactNode | — | Actions under the caption. They stay clickable above the stretched link. |
Accessibility
ARIA roles
link (when `href` is set)heading level 3 (title)
Keyboard
- Tab
Focuses the link (the card shows the focus ring), then any actions.
- Enter
Follows the link.
Screen reader
With `href`, the link’s name is the title only, not the whole caption.
Most card images repeat the title, so `alt=""` is usually right.
On iOS & Android
Web only
Media Card has no @nexub/react-native twin. On phones, follow the platform pattern instead, or compose it from the native components listed on the React Native page.