Atoms
Brand
The product's mark and name, as a Link home.
Code
<a href="#main" class="brand">
<svg class="brand__mark icon" width="1em" height="1em" aria-hidden="true" focusable="false"><use href="#BrandDesignForHumans"/></svg>
<span class="brand__name">Design For Humans</span>
</a>Why it exists
The Brand answers two questions at once: whose site is this, and how do I get back to the start? People look for both in the same place, so it’s one thing rather than a logo beside a link.
It’s a whole Link on its own, setting its own colour, hover and focus ring. Adding .link or .button would pull it towards looking like every other link on the page, and it’s meant to look like the product.
The name stays in the markup on every screen. On the narrowest ones it can give way visually to the mark, but it still names the Link, so nobody using a screen reader is left with an unnamed image. Size is the product’s decision, so it’s set with a token and there are no size modifiers.
When to use
- For the Link home: the first thing in a Header, a drawer or a Footer.
- Not for a page’s title: that is a heading.
- Not for a logo of someone else’s: a social or partner link is a Link or a Button with an icon.
Rules
- Either part can be left out. A name alone needs nothing else. A mark alone needs
.sr-onlytext, so the Link has a name. - The name names the Link, so the mark takes
aria-hidden="true". - Narrow screens: beside a mark, at 20em and under, the name is hidden visually and still names the Link. A name with no mark always shows.
Name Only
Code
<a href="#main" class="brand">
<span class="brand__name">Woodland Plants</span>
</a>Mark Only
Code
<a href="#main" class="brand">
<svg class="brand__mark icon" width="1em" height="1em" aria-hidden="true" focusable="false"><use href="#BrandDesignForHumans"/></svg>
<span class="sr-only">Design For Humans home</span>
</a>Do and Don’t
| Do | Don’t |
|---|---|
Set --brand-color for another colour | Add .link or .button classes to it |
| Keep the name in the markup on every screen | Hide the name with display: none |
Set --brand-mark-size for a larger logo | Add a text atom to .brand__name |
In Storybook
See also
- Header: The band at the top of a page or app, holding the Brand, the main navigation and global actions.
- Footer: The band at the bottom of a page or app, with site links, legal text and contact details.
- Link and Block Link: A way to go somewhere else, in running text or as a row of its own.
- Icon and Icon Box: A small glyph that helps people recognise something, on its own or in a frame.