Components

§ Box

Class.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>, <aside>, <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>
Error Task failed successfully

§ Subtitle

The <sub-title> custom element subtitle for 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 

<h4>
  <sub-title class="allcaps">Breaking</sub-title><v-h>:</v-h>
  Bad Thing Happens
<h4>

Breaking: Bad Thing Happens

§ Toolbar

A .tool-bar horizontally laid-out collection of controls.

Warning: This is not a substitute for the toolbar ARIA role, see WAI: Toolbar for that.

<section class="tool-bar">
  <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>

A .sidebar. You can use this component at the top level of your page or within a component. Either way, use together with .f-row as shown below:

<div class="f-row">
  <header class="sidebar">
    <ul role="list">
      <li><a href="/">Home</a></li>
      <li><a href="/">Profile</a></li>
      <li><a href="/">Settings</a></li>
      <!-- ... -->
    </ul>
  </header>

  <div class="col-4">
    <main></main>
    <footer></footer>
  </div>
</div>

Homepage

Lorem ipsum dolor sit amet.

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

§ Chip

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

<a class="chip" href="/@jdoe"><img src="profiles/jdoe.webp"> John Doe</a>
<chip>#webdev</chip><chip>#design</chip><chip>#css</chip>

#webdev ⍻ Merged John Doe 3 minute read

Code: Navbars
<header is="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>

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.

Last updated