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 |
data-size |
s, l, xl |
- |
Adjust brand mark size |
data-stack |
boolean |
- |
Stack logo and text vertically |
Basic Usage
At its simplest, just wrap your brand name in the element.
Acme Inc
Code
<brand-mark>Acme Inc</brand-mark>
With Logo
Add an image element for your logo. Use an empty alt attribute since the brand name provides the text alternative.
Acme Inc
Code
<brand-mark>
<img src="/logo.svg" alt="" />
Acme Inc
</brand-mark>
Sizes
Use data-size to adjust the brand mark for different contexts.
Acme Inc
Small
Acme Inc
Default
Acme Inc
Large
Acme Inc
Extra Large
Code
<!-- Small -->
<brand-mark data-size="s">Acme Inc</brand-mark>
<!-- Default -->
<brand-mark>Acme Inc</brand-mark>
<!-- Large -->
<brand-mark data-size="l">Acme Inc</brand-mark>
<!-- Extra Large -->
<brand-mark data-size="xl">Acme Inc</brand-mark>
Stacked Layout
Use data-stack for vertical logo and text arrangement. Useful for centered layouts like login pages or footers.
Acme Inc
Code
<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.
Code
<a href="/">
<brand-mark>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>
CSS Implementation
brand-mark {
display: inline-flex;
align-items: center;
gap: var(--size-s);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-l);
color: inherit;
text-decoration: none;
letter-spacing: -0.02em;
}
/* Size variants */
brand-mark[data-size="s"] {
font-size: var(--font-size-m);
gap: var(--size-xs);
}
brand-mark[data-size="l"] {
font-size: var(--font-size-xl);
}
brand-mark[data-size="xl"] {
font-size: var(--font-size-2xl);
gap: var(--size-m);
}
/* Stacked variant */
brand-mark[data-stack] {
flex-direction: column;
text-align: center;
gap: var(--size-xs);
}
/* When wrapped in a link */
a:has(> brand-mark) {
text-decoration: none;
color: inherit;
}
a:has(> brand-mark):hover brand-mark,
a:has(> brand-mark):focus-visible brand-mark {
opacity: 0.8;
}
Accessibility
- When using an image logo, set
alt="" since the brand name text provides the 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
Related Elements
- header - Sectioning element for page headers
- nav - Navigation container
- a - Anchor element for links