Scale — Logo

Install

Three sizes — l (default), m, and s.

hide-text drops the wordmark for tight spaces like a collapsed header.

logo-style="inverse" flips the wordmark for use on a coloured or dark surface.

Override --sc-logo-mark-size to tune the mark independently of the named sizes.

headers, footers, and brand references. Built into Header and Footer.

Accessible name: the SVG has no built-in label — when the logo links home, give the link an accessible name (e.g. aria-label="Scale home").
Decorative use: if the brand is already named in adjacent text, the logo is decorative and needs no extra label.
Contrast: pick the variant that meets WCAG AA against its background — inverse for dark, default for light.
Scaling: the mark and wordmark are vector SVG, so they stay crisp at any size.