Home

Logo

Usage

The logo component renders a background image with responsive variants. Token control is limited to sizing:

  • --logo-height for the displayed height

  • --logo-max-width to reserve horizontal space for wide logos

Logo image URLs are set via inline CSS custom properties on the element (e.g. --logo, --logo-dark).

Tokens

TokenDescriptionDefault Value
--logo-heightLogo height2rem
--logo-max-widthMax logo width20rem

Examples

:root {
  --logo-height: 1.5rem;
  --logo-max-width: 12rem;
}

Spacious Brand Mark

:root {
  --logo-height: 3rem;
  --logo-max-width: 24rem;
}

Tips

Image variants: Use inline properties like --logo-dark and --logo-mobile for responsive assets.

Header alignment: Match --logo-height with --layout-header-height to keep the header balanced.

© 2026 Stencila