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

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)

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: 240px), so resizing every logo card across the site is a one-line change in design-system.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>

A logo card with a light preview and copy/download actions in the footer.

Light

<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">Inclusive 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 is-small copy-btn is-icon-only" 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 is-small" 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-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