{{#markdown}}
Growl is a live notification, usualy fixed on top of the page.<br />
Several kinds of growl: **info**, **success**, **error**, **notification**, **premium**
{{/markdown}}

<div class="gu-2of3 gu-m-1of1">
  <div class="growl growl-type-info growl-position-center mbs growl-active">
    <button class="growl-close">
      <i class="vicon vicon-close"></i>
    </button>
    <i class="vicon vicon-information growl-icon"></i>
    <div class="growl-content">
    info growl with dismiss
    </div>
  </div>
</div>

{{#each data}}
<div class="gu-2of3 gu-m-1of1">
  <div class="growl growl-type-{{this}} growl-position-center mbs growl-active">
    {{#is this 'info'}}
    <i class="vicon vicon-information growl-icon">
    {{/is}}
    {{#is this 'warning'}}
    <i class="vicon vicon-information growl-icon">
    {{/is}}
    {{#is this 'error'}}
    <i class="vicon vicon-information growl-icon">
    {{/is}}
    {{#is this 'success'}}
    <i class="vicon vicon-check growl-icon">
    {{/is}}
    {{#is this 'notification'}}
    <i class="vicon vicon-degree growl-icon">
    {{/is}}
    {{#is this 'premium'}}
    <i class="vicon vicon-premium growl-icon">
    {{/is}}
    </i>
    <div class="growl-content">
    {{this}} growl
    </div>
  </div>
</div>
{{/each}}

<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<div class="growl growl-type-info growl-position-center mbs growl-active">
  <button class="growl-close">
    <i class="vicon vicon-close"></i>
  </button>
  <i class="vicon vicon-information growl-icon"></i>
  <div class="growl-content">
  info growl with dismiss
  </div>
</div>
```
{{/markdown}}
{{> copy-code}}
</div>