Styleguide

Flashbar

Default

×
A flashbar with the color of blue--light!
×
A flashbar with the color of green--light!
×
A flashbar with the color of red--light!
×
A flashbar with the color of orange--light!
.flashbar.xs-plh0.sm-pl0.flashbar--blue-light
  %a.flashbar__close{href: "#"} ×
  .fluid-container
    A flashbar with the color of blue--light!
.flashbar.xs-plh0.sm-pl0.flashbar--green-light
  %a.flashbar__close{href: "#"} ×
  .fluid-container
    A flashbar with the color of green--light!
.flashbar.xs-plh0.sm-pl0.flashbar--red-light
  %a.flashbar__close{href: "#"} ×
  .fluid-container
    A flashbar with the color of red--light!
.flashbar.xs-plh0.sm-pl0.flashbar--orange-light
  %a.flashbar__close{href: "#"} ×
  .fluid-container
    A flashbar with the color of orange--light!
<div class='flashbar xs-plh0 sm-pl0 flashbar--blue-light'>
  <a class='flashbar__close' href='#'>×</a>
  <div class='fluid-container'>A flashbar with the color of blue--light!
  </div>
</div>
<div class='flashbar xs-plh0 sm-pl0 flashbar--green-light'>
  <a class='flashbar__close' href='#'>×</a>
  <div class='fluid-container'>A flashbar with the color of green--light!
  </div>
</div>
<div class='flashbar xs-plh0 sm-pl0 flashbar--red-light'>
  <a class='flashbar__close' href='#'>×</a>
  <div class='fluid-container'>A flashbar with the color of red--light!
  </div>
</div>
<div class='flashbar xs-plh0 sm-pl0 flashbar--orange-light'>
  <a class='flashbar__close' href='#'>×</a>
  <div class='fluid-container'>A flashbar with the color of orange--light!
  </div>
</div>
= ui_component 'flashbar', color: :blue_light, fluid: true do
  A flashbar with the color of blue--light!
= ui_component 'flashbar', color: :green_light, fluid: true do
  A flashbar with the color of green--light!
= ui_component 'flashbar', color: :red_light, fluid: true do
  A flashbar with the color of red--light!
= ui_component 'flashbar', color: :orange_light, fluid: true do
  A flashbar with the color of orange--light!

Fluid

×
A fluid flashbar with the color of blue--light!
×
A fluid flashbar with the color of green--light!
×
A fluid flashbar with the color of red--light!
×
A fluid flashbar with the color of orange--light!
.flashbar.xs-plh0.sm-pl0.flashbar--blue-light
  %a.flashbar__close{href: "#"} ×
  .fluid-container
    A fluid flashbar with the color of blue--light!
.flashbar.xs-plh0.sm-pl0.flashbar--green-light
  %a.flashbar__close{href: "#"} ×
  .fluid-container
    A fluid flashbar with the color of green--light!
.flashbar.xs-plh0.sm-pl0.flashbar--red-light
  %a.flashbar__close{href: "#"} ×
  .fluid-container
    A fluid flashbar with the color of red--light!
.flashbar.xs-plh0.sm-pl0.flashbar--orange-light
  %a.flashbar__close{href: "#"} ×
  .fluid-container
    A fluid flashbar with the color of orange--light!
<div class='flashbar xs-plh0 sm-pl0 flashbar--blue-light'>
  <a class='flashbar__close' href='#'>×</a>
  <div class='fluid-container'>A fluid flashbar with the color of blue--light!
  </div>
</div>
<div class='flashbar xs-plh0 sm-pl0 flashbar--green-light'>
  <a class='flashbar__close' href='#'>×</a>
  <div class='fluid-container'>A fluid flashbar with the color of green--light!
  </div>
</div>
<div class='flashbar xs-plh0 sm-pl0 flashbar--red-light'>
  <a class='flashbar__close' href='#'>×</a>
  <div class='fluid-container'>A fluid flashbar with the color of red--light!
  </div>
</div>
<div class='flashbar xs-plh0 sm-pl0 flashbar--orange-light'>
  <a class='flashbar__close' href='#'>×</a>
  <div class='fluid-container'>A fluid flashbar with the color of orange--light!
  </div>
</div>
= ui_component 'flashbar', color: :blue_light, fluid: true do
  A fluid flashbar with the color of blue--light!
= ui_component 'flashbar', color: :green_light, fluid: true do
  A fluid flashbar with the color of green--light!
= ui_component 'flashbar', color: :red_light, fluid: true do
  A fluid flashbar with the color of red--light!
= ui_component 'flashbar', color: :orange_light, fluid: true do
  A fluid flashbar with the color of orange--light!

Closable

A flashbar with the color of blue--light!
A flashbar with the color of green--light!
A flashbar with the color of red--light!
A flashbar with the color of orange--light!
.flashbar.xs-plh0.sm-pl0.flashbar--blue-light
  .fluid-container
    A flashbar with the color of blue--light!
.flashbar.xs-plh0.sm-pl0.flashbar--green-light
  .fluid-container
    A flashbar with the color of green--light!
.flashbar.xs-plh0.sm-pl0.flashbar--red-light
  .fluid-container
    A flashbar with the color of red--light!
.flashbar.xs-plh0.sm-pl0.flashbar--orange-light
  .fluid-container
    A flashbar with the color of orange--light!
<div class='flashbar xs-plh0 sm-pl0 flashbar--blue-light'>
  <div class='fluid-container'>A flashbar with the color of blue--light!
  </div>
</div>
<div class='flashbar xs-plh0 sm-pl0 flashbar--green-light'>
  <div class='fluid-container'>A flashbar with the color of green--light!
  </div>
</div>
<div class='flashbar xs-plh0 sm-pl0 flashbar--red-light'>
  <div class='fluid-container'>A flashbar with the color of red--light!
  </div>
</div>
<div class='flashbar xs-plh0 sm-pl0 flashbar--orange-light'>
  <div class='fluid-container'>A flashbar with the color of orange--light!
  </div>
</div>
= ui_component 'flashbar', color: :blue_light, closable: false, fluid: true do
  A flashbar with the color of blue--light!
= ui_component 'flashbar', color: :green_light, closable: false, fluid: true do
  A flashbar with the color of green--light!
= ui_component 'flashbar', color: :red_light, closable: false, fluid: true do
  A flashbar with the color of red--light!
= ui_component 'flashbar', color: :orange_light, closable: false, fluid: true do
  A flashbar with the color of orange--light!

Hibar

Hibar COPY GOES HERE Button
.flashbar.flashbar--hibar
  .fluid-container.xs-text-center
    Hibar COPY GOES HERE
    %a.button.button--hibar{href: "javascript:void 0;"} Button
<div class='flashbar flashbar--hibar'>
  <div class='fluid-container xs-text-center'>
    Hibar COPY GOES HERE
    <a class='button button--hibar' href='javascript:void 0;'>Button</a>
  </div>
</div>