.alert-info
.alert-success
.alert-warning
.alert-danger
<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>