<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Illustration</h1>
<p class="subtitle is-5">
    An <span class="has-text-weight-semibold">Illustration</span> makes a complex ideas more accessible. Use it to change tone depending on the job to be done and the user's emotional state.
</p>

<hr class="is-large is-visible">

<h4 class="title is-4">Duotone</h4>
<div class="subtitle">Perfect for empty states or other discreet contexts. It's actually Tritone :-)</div>

<hr>

<div class="columns is-multiline has-text-centered">
    <div class="column is-4 box"><img src="media/illustrations/people-duo.svg" width="180"><div class="subtitle is-6">People</div></div>
    <div class="column is-4 box"><img src="media/illustrations/bubbles-duo.svg" width="180"><div class="subtitle is-6">Bubbles</div></div>
    <div class="column is-4 box"><img src="media/illustrations/vacant-duo.svg" width="180"><div class="subtitle is-6">Vacant</div></div>
</div>

<hr class="is-large is-visible">

<h4 class="title is-4">Multicolor</h4>
<div class="subtitle">For content illustration or marketing contexts like websites, emails and flyers.</div>

<hr>

<div class="columns is-multiline has-text-centered">
    <div class="column is-4 box"><img src="media/illustrations/people.svg" width="180"><div class="subtitle is-6">People</div></div>
    <div class="column is-4 box"><img src="media/illustrations/bubbles.svg" width="180"><div class="subtitle is-6">Bubbles</div></div>
    <div class="column is-4 box"><img src="media/illustrations/indemnity.svg" width="180"><div class="subtitle is-6">Indemnity</div></div>
</div>

<hr>

<div class="box is-bordered">
    Download illustrations here &nbsp;→&nbsp; <a href="https://github.com/ForsysInteractive/biings-ds/tree/master/docs/media/illustrations" target="blank">biings-ds / docs / media / <strong>illustrations</strong></a>
</div>