Component Reference

A radio-driven accordion. Give every input in a group the same name attribute so only one panel opens at a time.

<div class="accordion">
  <div class="accordion-block">
    <input type="radio" name="acc" id="a1" checked>
    <label for="a1" class="accordion-label bg-black">Question</label>
    <div class="accordion-content">Answer text here.</div>
  </div>
</div>

Required classes

Radio inputs ordered before their labels via CSS order, so DOM order can stay input → label → panel.

<div class="tabs">
  <input type="radio" name="t" id="t1" checked>
  <label for="t1">Tab One</label>
  <div class="tab">Content one</div>

  <input type="radio" name="t" id="t2">
  <label for="t2">Tab Two</label>
  <div class="tab">Content two</div>
</div>

Required classes

Small status indicators. .badge is compact and square; .pill is fully rounded and slightly larger.

Color modifiers