Components
§ Box
The .box
class creates a padded box with a border.
Boxes use the border and background color of the colorway.
<div class="box warn">
<strong>Warning</strong>: If you're putting <!-- ... -->
</div>
Warning: If you're putting something in a box, make sure to clarify why it is in a box in some other way. For example, this box has "Warning" in bold, in addition to being yellow. This makes your page clearer and prevents accessibility failures.
The above box, in addition to being an example, is also a genuine warning.
The <figure>
, <details>
and <dialog>
elements share their
appearance with the .box
class.
§ Titlebar
.titlebar
: A titlebar for a .box
.
<div class="box bad">
<strong class="block titlebar">Error</strong>
Task failed successfully
</div>
§ Subtitle
The <sub-title>
custom element or the .sub-title
class is a subtitle for a heading. Visually hiding a colon with the <v-h>
element can help screen readers parse the heading correctly.
<h4>
Conference Talks Considered Harmful<v-h>:</v-h>
<sub-title>How I Learned To Stop Worrying and Love Baz</sub-title>
</h4>
Conference Talks Considered Harmful:
How I Learned To Stop Worrying and Love Cliché Titles
<h4>
<sub-title class="allcaps">Breaking<v-h>:</v-h></sub-title>
Bad Thing Happens
</h4>
Breaking:
Bad Thing Happens
§ Section permalinks
Many pages, including these docs, have links that can be used to jump to a
section that appear when the heading is hovered. Missing.css provides this
as the .permalink-anchor
class.
<h2 id="section-permalinks" class="packed" tabindex="-1">
<a class="permalink-anchor float:right" href="#section-permalinks">§</a>
Section permalinks
</h2>
§ Section permalinks
§ Toolbar
A .tool-bar
is a horizontally laid-out collection of controls.
Alternatively, you can use [role=toolbar]
.
<section role="toolbar">
<button type=button>Cut</button>
<button type=button>Copy</button>
<button type=button>Paste</button>
<hr aria-orientation="vertical">
<label>Find: <input type=text></label>
</section>
§ Sidebar
Use the .sidebar-layout
class to create a sidebar/main layout.
Put sidebar content in a <header>
element directly inside .sidebar-layout
, and the next
element will house the rest of the page. See this example:
<div class="sidebar-layout">
<header>
<ul role="list">
<li><a href="/">Home</a></li>
<li><a href="/">Profile</a></li>
<li><a href="/">Settings</a></li>
<!-- ... -->
</ul>
</header>
<div>
<main></main>
<footer></footer>
</div>
</div>
§ Breadcrumbs
Add .breadcrumbs
to a <nav>
element. Use an <ul>
or <ol>
of
links inside. Don't forget to add an aria-label
.
Add the attribute aria-current=page
to the link representing the current page
(if any).
<nav class=breadcrumbs aria-label="Breadcrumbs">
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">User</a></li>
<li><a href="#">Advanced</a></li>
<li><a href="#">New All</a></li>
<li><a href="#" aria-current=page>Quit Sibelius</a></li>
</ol>
</nav>
§ Chip
The <chip>
class, or the .chip
class, creates a
rounded chip, like what you might use for a tag list or contacts.
<chip class=info>#webdev</chip>
<chip class=ok>⍻ Merged</chip>
<chip>John Doe</chip>
<chip class=warn>3 minute read</chip>
§ Navbar
A navbar has the .navbar
class --- see the following for a markup
example:
<header class="navbar">
<nav aria-label="Site sections">
<ul role="list">
<li><a href="/"><img alt="missing.js" src="/logo.png"></a>
<li><a href="/docs">Docs</a>
<li><a href="/docs">Contribute</a>
<li><a href="/docs">Donate</a>
</ul>
</nav>
<nav aria-label="Social media links">
<ul role="list">
<li><a href="/"><img alt=""></a>
<li><a href="https://github.com/...">GitHub</a>
<li><a href="https://discord.app/...">Discord</a>
</ul>
</nav>
</header>
To make your navbar expand/collapsible on smaller screens, you can use Missing.js § Expand/collapse navbar.
Info: When you have multiple <nav>
elements on a page, it's a good idea to put
aria-label
attributes on them. This is because many assistive programs have
a feature to jump to the navigation part of a page, which does not work well if
the user can't tell which nav is which.
§ Icon Button
.iconbutton
creates a bare icon.
We recommend using Lucide for icons.
/* style.css */
svg:has(use[href$="-icon"]) { height: 1em; width: 1em; }
<!-- sprite sheet -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<defs>
<symbol id="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16"/><path d="M4 18h16"/><path d="M4 6h16"/></symbol>
<!-- ... --->
</defs>
</svg>
<!-- markup -->
<section class="flex-row justify-content:space-between">
<button class=iconbutton type=button aria-label="Menu">
<svg aria-hidden=true><use href="#menu-icon"></use></svg>
</button>
<!-- ... -->
</section>