Components

Ten components. Selector is always data-component; modifiers are extra attributes; named children are data-slot.

button

<button data-component="button" data-variant="secondary" data-size="sm">
  Label
</button>

card

With slots

Header, body and footer are all optional.

No slots at all - the card pads itself.

<article data-component="card">
  <div data-slot="header">Title</div>
  <div data-slot="body">Content</div>
  <div data-slot="footer">…</div>
</article>

badge

NeutralBrandSuccessWarningErrorInfo

<span data-component="badge" data-variant="success">Active</span>

input / textarea / select

<input data-component="input" type="email" data-state="error">
<textarea data-component="textarea" rows="4"></textarea>
<select data-component="select">…</select>

topbar

The sticky header at the top of this page. Slots: brand, nav, actions.

<header data-component="topbar">
  <a data-slot="brand" href="/">Logo</a>
  <nav data-slot="nav">…</nav>
  <div data-slot="actions">…</div>
</header>

modal

Pure markup - Canon ships no JavaScript, so showing and hiding it is yours.

<div data-component="modal" role="dialog" aria-modal="true">
  <div data-slot="panel">
    <div data-slot="header">Title</div>
    <div data-slot="body">…</div>
    <div data-slot="footer">…</div>
  </div>
</div>

avatar

SMMDLG

<span data-component="avatar">MA</span>
<span data-component="avatar"><img src="…" alt=""></span>

divider

<hr data-component="divider">
<hr data-component="divider" data-variant="strong">