.flashbar.flashbar--information
  %a.flashbar__close{"aria-label" => "Close", href: "#"} ×
  .flashbar__content.fluid-container
    .flashbar__icon
    .flashbar__read__contents{role: "status", tabindex: "-1"}
      %span.text-medium Maya
      has joined this position.

<div class='flashbar flashbar--information'>
  <a aria-label='Close' class='flashbar__close' href='#'>×</a>
  <div class='flashbar__content fluid-container'>
    <div class='flashbar__icon'></div>
    <div class='flashbar__read__contents' role='status' tabindex='-1'><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.

.flashbar.flashbar--success
  %a.flashbar__close{"aria-label" => "Close", href: "#"} ×
  .flashbar__content.fluid-container
    .flashbar__icon
    .flashbar__read__contents{role: "status", tabindex: "-1"}
      You've successfully created
      %span.text-medium Senior UX Designer.

<div class='flashbar flashbar--success'>
  <a aria-label='Close' class='flashbar__close' href='#'>×</a>
  <div class='flashbar__content fluid-container'>
    <div class='flashbar__icon'></div>
    <div class='flashbar__read__contents' role='status' tabindex='-1'>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.

.flashbar.flashbar--alert
  %a.flashbar__close{"aria-label" => "Close", href: "#"} ×
  .flashbar__content.fluid-container
    .flashbar__icon
    .flashbar__read__contents{role: "status", tabindex: "-1"}
      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 aria-label='Close' class='flashbar__close' href='#'>×</a>
  <div class='flashbar__content fluid-container'>
    <div class='flashbar__icon'></div>
    <div class='flashbar__read__contents' role='status' tabindex='-1'>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.

.flashbar.flashbar--error
  %a.flashbar__close{"aria-label" => "Close", href: "#"} ×
  .flashbar__content.fluid-container
    .flashbar__icon
    .flashbar__read__contents{role: "status", tabindex: "-1"}
      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 aria-label='Close' class='flashbar__close' href='#'>×</a>
  <div class='flashbar__content fluid-container'>
    <div class='flashbar__icon'></div>
    <div class='flashbar__read__contents' role='status' tabindex='-1'>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.

.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>