brand-mark
Inert custom element for brand/logo display. Use in headers, footers, and anywhere you need consistent brand representation.
Overview
The <brand-mark> element provides a consistent way to display your brand name and logo. It handles typography, spacing, and link styling automatically.
Attributes
| Attribute | Values | Default | Description |
|---|---|---|---|
src |
URL | - | Path to logo image (SVG preferred). JS enhancement injects an <img> element. |
alt |
string | text content | Alt text for the logo image. Defaults to the element's text content. |
wordmark |
boolean | - | Show text alongside the image logo. Without this, only the image is shown. |
height |
number (px) | - | Explicit pixel height for the logo image. |
data-size |
s, l, xl |
- | Adjust brand mark size |
data-stack |
boolean | - | Stack logo and text vertically |
Basic Usage
Wrap your brand name in the element, optionally with a logo image. Use an empty alt on the image since the brand name provides the text alternative.
<brand-mark> <img src="/logo.svg" alt="" /> Acme Inc</brand-mark>Image Logo via src
Use the src attribute to load a logo image. The JS enhancement injects an <img> element automatically. Without JS, the text content renders as a fallback — this is progressive enhancement.
<brand-mark src="/logo.svg" alt="Acme Inc"> Acme Inc</brand-mark>By default, only the image is shown. The text content becomes the alt text or aria-label.
Image + Wordmark
Add the wordmark attribute to show the brand name text alongside the logo image.
<brand-mark src="/logo.svg" wordmark> Acme Inc</brand-mark>Use height to control the image size explicitly. The CSS token --brand-mark-height can also be set by themes.
<brand-mark src="/logo.svg" wordmark height="40"> Acme Inc</brand-mark>Sizes
Use data-size to adjust the brand mark for different contexts.
<brand-mark data-size="s">Small</brand-mark> <brand-mark>Default</brand-mark> <brand-mark data-size="l">Large</brand-mark> <brand-mark data-size="xl">Extra Large</brand-mark>Stacked Layout
Use data-stack for vertical logo and text arrangement. Useful for centered layouts like login pages or footers.
<brand-mark data-stack> <img src="/logo.svg" alt="" /> Acme Inc</brand-mark>As a Link
Wrap in an anchor to make the brand mark clickable. The element automatically removes link underlines and adjusts hover states.
<a href="/"> <brand-mark> <img src="/logo.svg" alt="" /> Acme Inc </brand-mark></a>In a Header
Common usage in site headers with navigation.
<header> <nav> <a href="/"> <brand-mark> <img src="/logo.svg" alt="" /> Acme Inc </brand-mark> </a> <!-- Navigation items --> </nav></header>Accessibility
- When using the
srcattribute withoutwordmark, the text content is used asaria-labelor imagealt - When using
wordmark, the image getsalt=""(decorative) since the visible text provides the label - When manually adding an
<img>child, setalt=""since the brand name text provides the text alternative - When wrapped in a link, the brand name serves as the link text
- Ensure sufficient color contrast between brand text and background
- Focus states are handled automatically when wrapped in a link
- Without JS, the
srcattribute has no effect — text content always provides a readable fallback
Content Model
Permitted Content
- Text (brand name)
- Optional
<img>or<svg>(logo)
Permitted Parents
Any flow content. Commonly placed inside <a>, <header>, or <nav>.
CSS Tokens
| Token | Default | Description |
|---|---|---|
--brand-mark-height |
2rem |
Height of the logo image (set by themes) |