Styleguide

Flashbar

Information

×
Maya has joined this position.
.flashbar.flashbar--information
  %a.flashbar__close{href: "#"} ×
  .flashbar__content.fluid-container
    .flashbar__icon
    %div
      %span.text-medium Maya
      has joined this position.
<div class='flashbar flashbar--information'>
  <a class='flashbar__close' href='#'>×</a>
  <div class='flashbar__content fluid-container'>
    <div class='flashbar__icon'></div>
    <div><span class='text-medium'>Maya</span>
      has joined this position.
    </div>
  </div>
</div>
= ui_component 'flashbar', state: :information, fluid: true do
  %span.text-medium Maya
  has joined this position.

Success

×
You've successfully created Senior UX Designer.
.flashbar.flashbar--success
  %a.flashbar__close{href: "#"} ×
  .flashbar__content.fluid-container
    .flashbar__icon
    %div
      You've successfully created
      %span.text-medium Senior UX Designer.
<div class='flashbar flashbar--success'>
  <a class='flashbar__close' href='#'>×</a>
  <div class='flashbar__content fluid-container'>
    <div class='flashbar__icon'></div>
    <div>You've successfully created
      <span class='text-medium'>Senior UX Designer.</span>
    </div>
  </div>
</div>
= ui_component 'flashbar', state: :success, fluid: true do
  You've successfully created
  %span.text-medium Senior UX Designer.

Alert

×
You're impersonating Carlos Rey. Be careful using this account. Unbecome and go to Admin Dashboard or Admin Profile.
.flashbar.flashbar--alert
  %a.flashbar__close{href: "#"} ×
  .flashbar__content.fluid-container
    .flashbar__icon
    %div
      You're impersonating Carlos Rey. Be careful using this account.
      Unbecome and go to
      %a.text-medium{href: "#"} Admin Dashboard
      or
      %a.text-medium{href: "#"} Admin Profile.
<div class='flashbar flashbar--alert'>
  <a class='flashbar__close' href='#'>×</a>
  <div class='flashbar__content fluid-container'>
    <div class='flashbar__icon'></div>
    <div>You're impersonating Carlos Rey. Be careful using this account.
      Unbecome and go to
      <a class='text-medium' href='#'>Admin Dashboard</a>
      or
      <a class='text-medium' href='#'>Admin Profile.</a>
    </div>
  </div>
</div>
= ui_component 'flashbar', state: :alert, fluid: true do
  You're impersonating Carlos Rey. Be careful using this account.
  Unbecome and go to
  %a.text-medium{href: '#'} Admin Dashboard
  or
  %a.text-medium{href: '#'} Admin Profile.

Error

×
You're impersonating Carlos Rey. Be careful using this account. Unbecome and go to Admin Dashboard or Admin Profile.
.flashbar.flashbar--error
  %a.flashbar__close{href: "#"} ×
  .flashbar__content.fluid-container
    .flashbar__icon
    %div
      You're impersonating Carlos Rey. Be careful using this account.
      Unbecome and go to
      %a.text-medium{href: "#"} Admin Dashboard
      or
      %a.text-medium{href: "#"} Admin Profile.
<div class='flashbar flashbar--error'>
  <a class='flashbar__close' href='#'>×</a>
  <div class='flashbar__content fluid-container'>
    <div class='flashbar__icon'></div>
    <div>You're impersonating Carlos Rey. Be careful using this account.
      Unbecome and go to
      <a class='text-medium' href='#'>Admin Dashboard</a>
      or
      <a class='text-medium' href='#'>Admin Profile.</a>
    </div>
  </div>
</div>
= ui_component 'flashbar', state: :error, fluid: true do
  You're impersonating Carlos Rey. Be careful using this account.
  Unbecome and go to
  %a.text-medium{href: '#'} Admin Dashboard
  or
  %a.text-medium{href: '#'} Admin Profile.

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>