Components

Contents:

§ Box

The .box class creates a padded box with a border.

Boxes use the border and background color of the colorway.

Example: Box markup
<div class="warn box">
  <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.

Example: Titlebar markup
<div class="bad box">
  <strong class="titlebar">Error</strong>
  <p>Task failed successfully
</div>
Error

Task failed successfully

§ 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.

Example: Sub-title markup (after a heading)
<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

Example: Sub-title markup (before a heading)
<h4>
  <sub-title class="allcaps">Breaking<v-h>:</v-h></sub-title>
  Bad Thing Happens
</h4>

Breaking: Bad Thing Happens

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.

Example: Permalink markup (hover to reveal)
<h2 id=section-permalinks class="packed" tabindex=-1>
  <a class="permalink-anchor float:right" href=#section-permalinks>§</a>
  Section permalinks
</h2>

§ Toolbar

A .tool-bar is a horizontally laid-out collection of controls. Alternatively, you can use role=toolbar.

Example: Toolbar markup
<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>

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:

Example: Sidebar markup
<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>

Sidebar demo →

Add .breadcrumbs to a <nav> element. Use an <ul> or <ol> of links inside. Don't forget to add an aria-label attribute.

Add the attribute aria-current to the link representing the current page or step (if any). The separator will be set to either --breadcrumb-page or --breadcrumb-step depending on whether its value is page or step.

Example: Breadcrumbs markup
<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>

If you want to preserve the <ol> numbering, use the type attribute.

<header class="packed">
  <strong class="<h1>">Checkout</strong>
  <nav class="breadcrumbs" aria-label="Breadcrumbs">
    <ol type=1>
      <li><a href=#>Cart</a></li>
      <li><a href=# aria-current=step>Account</a></li>
      <li>Info</li>
      <li>Payment</li>
      <li>Review</li>
    </ol>
  </nav>
</header>
Checkout

§ Chip

The <chip> class, or the .chip class, creates a rounded chip, like what you might use for a tag list or contacts.

Example: Chip markup
<chip class="info">#webdev</chip>
<chip class="ok">⍻ Merged</chip>
<chip>John Doe</chip>
<chip class="warn">3 minute read</chip>

#webdev ⍻ Merged John Doe 3 minute read

A navbar has the .navbar class --- see the following for a markup example:

Example: Navbar markup
<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; it even works with the .<button> and .<big> masquerades! Colorways are supported as well. We recommend using Lucide for icons.

Example: Icon button markup
<!-- 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.html -->
<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>
  <a class="info <button> iconbutton" aria-label="Next">
    <svg aria-hidden=true><use href=#next-icon></use></svg>
  </a>
  <!-- ... -->
</section>
Example: Big icon button markup
<section class="flex-row justify-content:space-between">
  <button class="<big> iconbutton" type=button aria-label="Menu">
    <svg aria-hidden=true><use href=#menu-icon></use></svg>
  </button>
  <!-- ... -->
</section>