Dev Tools

ContentGuide

TLDR block placed directly below a page heading. Always renders three neutral cards — Purpose, Usage, Avoid — each with an icon, optional badges, and a short bullet list.

Import

import ContentGuide from '../../components/utility/ContentGuide.astro';

Props

PropTypeRequiredDescription
purpose CardData Yes Content for the Purpose card (blue badges).
usage CardData Yes Content for the Usage card (green badges).
avoid CardData Yes Content for the Avoid card (red badges).
card.items string[] Yes Bullet list, 1–4 short strings.
card.badges { label: string }[] No Optional small chips rendered between the heading and the list.

Variants

CardIconBadge color
purpose lightbulb (filled) info / blue
usage check-circle (filled) brand / green
avoid x-circle (filled) critical / red

Anatomy

  • Card background: --color-fill-surface-action (neutral white / dark surface)
  • Card border: --color-border-surface-action
  • Card radius: 16px · Padding: 20px
  • Icon size: 24px · Icon + heading in --color-content-primary for every variant
  • Bullets in --color-content-secondary, body-sm
  • Cards sit in a 3-column grid with 16px gap and stretch to equal height

Usage

<ContentGuide
  purpose={{
    badges: [{ label: 'TLDR' }],
    items: [
      'Defines the visual identity of the Trezor brand',
      'Establishes consistency across all touchpoints',
    ],
  }}
  usage={{
    badges: [{ label: 'Do' }],
    items: [
      'Use on white or light neutral backgrounds',
      'Maintain the required minimum clear space',
    ],
  }}
  avoid={{
    badges: [{ label: 'Do not' }],
    items: [
      'Do not place on busy or patterned backgrounds',
      'Do not recolor or apply effects to the logo',
    ],
  }}
/>

Live examples

Full set — badges + 3–4 bullets

Purpose
Overview
  • Defines the visual identity of the Trezor brand
  • Establishes consistency across all touchpoints
  • Communicates trust and security at a glance
Usage
DoRecommended
  • Use on white or light neutral backgrounds
  • Maintain the required minimum clear space
  • Scale proportionally — never stretch or distort
  • Use only approved file formats for each context
Avoid
Do not
  • Do not place on busy or patterned backgrounds
  • Do not recolor or apply effects to the logo
  • Do not use outdated logo versions

Bullets only — no badges

Purpose
  • Gives readers an instant summary at the top of the page
  • Acts as a TLDR for quick scanning
Usage
  • Use the primary logo in most contexts
  • Switch to the monochrome version on colored backgrounds
Avoid
  • Do not combine the logo with other brand marks
  • Do not add drop shadows or outlines

Notes

  • Always renders three cards in a fixed order — purpose, usage, avoid. All three are required.
  • Cards stretch to equal height in the grid, so the shortest card pads to match the tallest.
  • Icons and headings are intentionally neutral (no variant color) — only badges carry the variant accent.
  • Place directly below the PageHeader/TabToggle to act as a TLDR. Works inside .content-flow via the .content-guide block selector.
Page tokens