Alert

<i-alert variant="info">
    <template slot="icon"><i-icon icon="info"></i-icon></template>
    <p>Some quick example text to build on the alert title and make up the bulk of the alert's content.</p>
</i-alert>

<i-alert variant="success">
    <template slot="icon"><i-icon icon="success"></i-icon></template>
    <p>Some quick example text to build on the alert title and make up the bulk of the alert's content.</p>
</i-alert>

<i-alert variant="warning">
    <template slot="icon"><i-icon icon="warning"></i-icon></template>
    <p>Some quick example text to build on the alert title and make up the bulk of the alert's content.</p>
</i-alert>

<i-alert variant="danger">
    <template slot="icon"><i-icon icon="danger"></i-icon></template>
    <p>Some quick example text to build on the alert title and make up the bulk of the alert's content.</p>
</i-alert>

<i-alert variant="primary">
    <p>A simple primary alert with an <a href="https://inkline.io">example link</a>. It's clickable!</p>
</i-alert>

<i-alert variant="secondary">
    <p>A simple secondary alert with an <a href="https://inkline.io">example link</a>. It's clickable!</p>
</i-alert>

<i-alert variant="success">
    <p>A simple success alert with an <a href="https://inkline.io">example link</a>. It's clickable!</p>
</i-alert>

<i-alert variant="danger">
    <p>A simple danger alert with an <a href="https://inkline.io">example link</a>. It's clickable!</p>
</i-alert>

<i-alert variant="warning">
    <p>A simple warning alert with an <a href="https://inkline.io">example link</a>. It's clickable!</p>
</i-alert>

<i-alert variant="info">
    <p>A simple info alert with an <a href="https://inkline.io">example link</a>. It's clickable!</p>
</i-alert>

<i-alert size="sm">
    Some quick example text to build on the alert title and make up the bulk of the alert's content.
</i-alert>

<i-alert size="md">
    Some quick example text to build on the alert title and make up the bulk of the alert's content.
</i-alert>

<i-alert size="lg">
    Some quick example text to build on the alert title and make up the bulk of the alert's content.
</i-alert>

<i-alert>
    <h4>Alert Title</h4>
    <p>
        Some quick example text to build on the alert and make up the bulk of the alert's content.
    </p>
</i-alert>

<i-alert variant="info">
    <template slot="icon"><i-icon icon="info"></i-icon></template>
    <p>Some quick example text to build on the alert title and make up the bulk of the alert's content.</p>
</i-alert>

<i-alert dismissible :show="visible" variant="primary">
    <p>Whoa! Nicely done.</p>
</i-alert>

export default {
  data () {
    return {
      visible: true
    };
  }
}