The asset card is a uniform wrapper used by the Brand Book and any showcase page to present a single brand asset with context. The wrapper, preview frame, and footer stay consistent. Only the content inside the preview slot changes:
- A logo SVG
- A font specimen (
Aa+ alphabet) - A brand icon
- A brand image (mood shot, hero photo)
- A token preview
It composes three parts: a preview area, an optional footer with a title and actions, and light/dark variants for testing assets against either surface. Deliberately simple (no JavaScript) so any future showcase page can reuse it without ceremony.
Anatomy
.asset-card
.asset-card-preview ← centred visual area, auto min-height
[content: logo, font, icon, image, etc.]
.asset-card-footer ← optional title/action row
.asset-card-title ← name of the asset
.asset-card-actions ← copy / download buttons
| Element | Class | Purpose |
|---|---|---|
| Wrapper | Border, vertical layout | |
| Preview area | Centred content area, fills remaining space | |
| Light preview | Faded background, default text colour | |
| Dark preview | Near-black background, light text | |
| Footer | Bottom row, title on the left, actions on the right | |
| Footer title | Asset name in the brand serif | |
| Footer actions | Action button group (compact icon-only buttons) | |
| Logo preview slot | .asset-card-preview.logo-preview |
Constrains the rendered logo width (single source of truth in CSS) |
| Image fill | Edge-to-edge <img> preview, no slot padding (OG images, photographic assets) |
|
| Image contain | Ratio-preserving <img> capped to the stage; mixed-ratio template previews (feed, story, banner) at a consistent size |
Logo asset
Add the modifier to the preview slot whenever the content is a logo <img>. It constrains the rendered logo width from a single CSS rule (max-width: 200px), so resizing every logo card across the site is a one-line change in docs-site.css. No inline style on the <img> is needed.
<div class="asset-card">
<div class="asset-card-preview asset-card-preview--light logo-preview">
<img src="assets/images/logos/bydefault/logo_bydefault-primary.svg" alt="By Default primary logotype">
</div>
<div class="asset-card-footer">
<p class="asset-card-title">Light</p>
</div>
</div>
Image asset
Add the --fill modifier when the preview is the image itself rather than an asset floating on a background: Open Graph cards, photography, rendered previews. The slot loses its padding and the image spans the full card width at its own aspect ratio. Keep --light alongside it so any letterboxing above a short image reads as a deliberate surface.
<div class="asset-card">
<div class="asset-card-preview asset-card-preview--light asset-card-preview--fill">
<img src="assets/images/og/og-default.jpg" alt="Default Open Graph share image">
</div>
<div class="asset-card-footer">
<p class="asset-card-title">og-default.jpg, 1200×630</p>
</div>
</div>
Template asset
Use --fill only when the image should span the full card width. That suits a single wide OG card, but a grid of templates at different ratios (a 4:5 feed post beside a 9:16 story) turns lopsided, one image dominating while another shrinks. Add --contain instead: the image keeps its ratio and is capped to the stage (max-height: 600px), so every template reads at a consistent, legible size and the cards in a grid stay level. Pair it with --light so the letterboxing around a tall or wide image reads as a deliberate surface, and put the download in the footer actions.
<div class="asset-card">
<div class="asset-card-preview asset-card-preview--light asset-card-preview--contain">
<img src="/image/1080x1920" width="1080" height="1920" loading="lazy" alt="">
</div>
<div class="asset-card-footer">
<p class="asset-card-title">Story, 1080×1920</p>
<div class="asset-card-actions">
<a class="button" data-size="small" data-icon-only href="…" download data-tooltip="Download" aria-label="Download Story template">{{icon:download}}</a>
</div>
</div>
</div>
Until the template exists, swap the download <a> for a disabled <button> with a descriptive aria-label (e.g. aria-label="Story template, requested from design"). A disabled button sets pointer-events: none, so a data-tooltip on it never fires; the aria-label and the section prose carry the status instead. The greyed button holds its place rather than linking to nothing, and becomes an enabled <a … download> when the asset lands.
A logo card with a light preview and copy/download actions in the footer.
<div class="asset-card">
<div class="asset-card-preview asset-card-preview--light">
<div class="svg-logo" data-icon="logo">…</div>
</div>
<div class="asset-card-footer">
<p class="asset-card-title">Light</p>
</div>
</div>
Light + dark pair
Use a 2-column grid to show light and dark variants of the same asset side by side.
<div class="grid cols-2 gap-l">
<div class="asset-card">
<div class="asset-card-preview asset-card-preview--light">…</div>
<div class="asset-card-footer">
<p class="asset-card-title">Light</p>
</div>
</div>
<div class="asset-card">
<div class="asset-card-preview asset-card-preview--dark">…</div>
<div class="asset-card-footer">
<p class="asset-card-title">Dark</p>
</div>
</div>
</div>
Font asset
The same wrapper works for type specimens. Drop the alphabet and numbers into the preview slot.
<div class="asset-card">
<div class="asset-card-preview asset-card-preview--light" style="text-align: center;">
<div style="font-family: var(--font-primary);">
<p style="font-size: var(--font-9xl); margin: 0; line-height: 1;">Aa</p>
<p style="font-size: var(--font-s); margin: var(--space-l) 0 0;">ABCDEFGHIJKLM<br>abcdefghijklm<br>0123456789</p>
</div>
</div>
<div class="asset-card-footer">
<p class="asset-card-title">Zalando Sans</p>
</div>
</div>
Icon asset
A brand icon in the preview slot, with the icon name in the footer.
<div class="asset-card">
<div class="asset-card-preview asset-card-preview--light">
{{icon:home}}
</div>
<div class="asset-card-footer">
<p class="asset-card-title">home</p>
</div>
</div>
Image asset
A brand image (mood shot, hero photo) in the preview slot. Use object-fit: cover and remove the preview padding so the image fills the frame.
<div class="asset-card">
<div class="asset-card-preview" style="padding: 0;">
<img src="assets/images/mood/brand-hero.jpg" alt="Brand mood shot" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="asset-card-footer">
<p class="asset-card-title">Hero, desert sunrise</p>
</div>
</div>
Actions
Add copy/download buttons inside using the standard pattern. Buttons are compact icon-only by default.
<div class="asset-card-footer">
<p class="asset-card-title">logo_brand-primary-light.svg</p>
<div class="asset-card-actions">
<button class="button copy-btn is-icon-only" data-size="small" data-copy="…" data-tooltip="Copy SVG" aria-label="Copy SVG">
<span class="copy-btn-default">{{icon:copy}}</span>
<span class="copy-btn-copied">{{icon:check}}</span>
</button>
<a class="button" data-size="small" data-icon-only href="assets/logos/logo_brand-primary-light.svg" download data-tooltip="Download" aria-label="Download SVG">
{{icon:download}}
</a>
</div>
</div>
See Copy Button for the full pattern.
Do / Don't
Do:
- Use the asset card for single-asset previews: one logo, one font specimen, one icon, one image
- Pair light + dark variants in a 2-column grid for assets that need both
- Keep the footer compact. A title and one or two action buttons is enough
- Use the standard and
<a download>patterns for actions
Don't:
- Don't put long-form content inside an asset card. It's a wrapper for a single asset, not an editorial block
- Don't override the preview min-height per-card. Keep cards uniform across a grid
- Don't add
border-radiusto the wrapper. Square edges are project-wide - Don't add a third visual variant. Use composition (nested grids) if you need more variety