Atom

Alert

.alert-info .alert-success .alert-warning .alert-danger

Show code
Heads up! This alert needs your attention, but it's not super important.
Success! This alert needs your attention and shows a successfull task.
Warning! This alert needs your attention and it shows a warning.
Error! This alert needs your attention and it shows an error message.
Thank you! This alert needs your attention and it shows an error message.
Attention! This alert needs your attention and it shows an error message.
            
              <div class="alert alert-info">
  <button type="button" class="alert__close close" data-dismiss="alert"><svg class="icon" viewbox="0 0 32 32">
  <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#cross"></use></svg></button>
  <div class="alert__wrapper">
    <div class="alert__message">
      <strong>Heads up!</strong> This alert needs your attention, but it"s not super important.
    </div>
  </div>
</div>
<div class="alert alert-success">
  <button type="button" class="alert__close close" data-dismiss="alert"><svg class="icon" viewbox="0 0 32 32">
  <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#cross"></use></svg></button>
  <div class="alert__wrapper">
    <div class="alert__message">
      <strong>Success!</strong> This alert needs your attention and shows a successfull task.
    </div>
  </div>
</div>
<div class="alert alert-warning">
  <div class="alert__wrapper">
    <div class="alert__message">
      <strong>Warning!</strong> This alert needs your attention and it shows a warning.
    </div>
  </div>
</div>
<div class="alert alert-danger">
  <div class="alert__wrapper">
    <div class="alert__message">
      <strong>Error!</strong> This alert needs your attention and it shows an error message.
    </div>
  </div>
</div>
<div class="alert alert-primary">
  <div class="alert__wrapper">
    <div class="alert__icon">
      <svg class="icon" viewbox="0 0 32 32">
      <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#check_circle"></use></svg>
    </div>
    <div class="alert__message">
      <strong>Thank you!</strong> This alert needs your attention and it shows an error message.
    </div>
  </div>
</div>
<div class="alert alert-highlight">
  <div class="alert__wrapper">
    <div class="alert__icon">
      <svg class="icon" viewbox="0 0 32 32">
      <use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#warning"></use></svg>
    </div>
    <div class="alert__message">
      <strong>Attention!</strong> This alert needs your attention and it shows an error message.
    </div>
  </div>
</div>