Asset Card

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

Logo asset

Add the .logo-preview modifier to the preview slot whenever the content is a logo <img>. It sizes the logo from a single CSS rule — width: 100% capped at 200px in both axes — so every logo reads at the same scale whether its source file is larger or smaller than the box, and resizing every logo card across the site is one edit in docs-site.css. No inline style on the <img> is needed.

Light

<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.

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>

Actions

Add copy/download buttons inside .asset-card-actions using the standard .copy-btn 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 .copy-btn 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-radius to the wrapper. Square edges are project-wide
• Don't add a third visual variant. Use composition (nested grids) if you need more variety