Bar

Bars are used to visualize a numeric value.

Usage

<div class="c-bar">
  <div class="c-bar__value w-1/2"></div>
</div>

Implementation

Type	Name
Elements
Bar	`.c-bar`
Value	`.c-bar__value`
Modifiers
Color	`.c-bar--blue` `--green` `--orange` `--purple` `--red` `--teal` `--yellow`
States	None

Modifiers

Color

We are defaulting to gray bars for most screens, to make sure we don't lose the meaning of colors and cause confusion. You might want to use a colored bar in the context of a screen that's mostly one color.

<div class="space-y-2">
  <div class="c-bar c-bar--blue">
    <div class="c-bar__value w-1/2" />
  </div>
  <div class="c-bar c-bar--green">
    <div class="c-bar__value w-1/2" />
  </div>
  <div class="c-bar c-bar--orange">
    <div class="c-bar__value w-1/2" />
  </div>
  <div class="c-bar c-bar--purple">
    <div class="c-bar__value w-1/2" />
  </div>
  <div class="c-bar c-bar--red">
    <div class="c-bar__value w-1/2" />
  </div>
  <div class="c-bar c-bar--teal">
    <div class="c-bar__value w-1/2" />
  </div>
  <div class="c-bar c-bar--yellow">
    <div class="c-bar__value w-1/2" />
  </div>
</div>