Bar

.Bar

Bars are used for headings and to divide things under sections.

Modifiers

Bar--brand
Brand colors
Bar
Bar--neutral
Neutral colors
Bar

Markup

<div class="Bar [modifier class]">Bar</div>

Bar with components

Example of component used in dashboard/quickquide

Example

Quick guide

Site

Markup

<div class="Bar ">
    <h4 class="Bar-title Bar-item">Quick guide</h4>
    <div class="Bar-item Bar-item--right Siteselector Siteselector--dark">
        <span class="Siteselector-label">Site</span>
        <input type="text" class="Siteselector-input" value="atomia.com">
        <button class="Btn Siteselector-btn Icon Icon--menu" title="View all"></button>
    </div>

    <span class="Bar-icon Icon Icon--standalone Icon--less" title="Collapse"></span>
</div>

Stacked Bars

When Bars are stacked on top of each other they can use the Bar--stacked modifier to be separated slightly.

This can be useful to create an accordion like effect to hide and show individual sections or categories of something.

Example

Foo

Bar

Fizz

Buzz

Markup

<div class="Bar Bar--stacked">
    <h4 class="Bar-title Bar-item">Foo</h4>
    <span class="Bar-icon Icon Icon--standalone Icon--less" title="Collapse"></span>
</div>
<div class="Bar Bar--stacked">
    <h4 class="Bar-title Bar-item">Bar</h4>
    <span class="Bar-icon Icon Icon--standalone Icon--less" title="Collapse"></span>
</div>
<div class="Bar Bar--stacked">
    <h4 class="Bar-title Bar-item">Fizz</h4>
    <span class="Bar-icon Icon Icon--standalone Icon--less" title="Collapse"></span>
</div>
<div class="Bar Bar--stacked">
    <h4 class="Bar-title Bar-item">Buzz</h4>
    <span class="Bar-icon Icon Icon--standalone Icon--less" title="Collapse"></span>
</div>