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>