<h6 class="subtitle is-6 is-uppercase has-text-grey">Style</h6><h1 class="title is-serif is-1 has-text-weight-bold">Voice & Tone</h1>
<p class="subtitle is-5">
    <span class="has-text-weight-semibold">Voice</span> expresses our personality and stays consistent across all of our content. <span class="has-text-weight-semibold">Tone</span> expresses the mood or feeling of the voice, it should change based on the situation. Find below the way we present all titles, headers, copy and buttons.
</p>

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

<h2 class="title is-4">Do's & Dont's</h2>

<hr class="is-small">

<div class="box is-relaxed is-white">
    <h3 class="subtitle is-5 has-text-weight-semibold">Use simple tense</h3>
    <table class="table is-fullwidth">
    <thead>
        <tr>
        <th><span class="has-text-success">✓ &nbsp;Do</span></th>
        <th><span class="has-text-danger">× &nbsp;Don't</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td class="subtitle is-6">This sends you a notification.</td>
        <td class="subtitle is-6 has-text-grey-dark">This will send you a notification.</td>
        </tr>
        <tr>
        <td class="subtitle is-6">The absence was deleted.</td>
        <td class="subtitle is-6 has-text-grey-dark">The absence has been deleted.</td>
        </tr>
    </tbody>
    </table>
</div>
<div class="box is-relaxed is-white">
    <h3 class="subtitle is-5 has-text-weight-semibold">Use active voice</h3>
    <table class="table is-fullwidth">
    <thead>
        <tr>
        <th><span class="has-text-success">✓ &nbsp;Do / Active</span></th>
        <th><span class="has-text-danger">× &nbsp;Don't / Passive</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td class="subtitle is-6">Describe here what has been improved.</td>
        <td class="subtitle is-6 has-text-grey-dark">This is used to describe what has been improved.</td>
        </tr>
    </tbody>
    </table>
</div>