Alert

<div class="bg-blue-lighter blue-darkest px-5 py-3 br-3">
    Basic blue alert
</div>

<div class="bg-red-lighter red-darkest px-5 py-3 br-3">
    Basic red alert
</div>

<div class="bg-green-lighter green-darkest px-5 py-3 br-3">
    Basic green alert
</div>

<div class="bg-yellow-lighter yellow-darkest px-5 py-3 br-3">
    Basic yellow alert
</div>

<div class="bg-blue-lightest blue-darkest px-5 py-3 br-3 border-blue">
    Basic blue alert with border
</div>

<div class="bg-red-lightest red-darkest px-5 py-3 br-3 border-red">
    Basic red alert with border
</div>

<div class="bg-green-lightest green-darkest px-5 py-3 br-3 border-green">
    Basic green alert with border
</div>

<div class="bg-yellow-lightest yellow-darkest px-5 py-3 br-3 border-yellow">
    Basic yellow alert with border
</div>

<div class="bg-blue-lightest blue-darkest px-5 py-3 br-3 border-l bw-6 bc-blue">
    Side border blue alert
</div>

<div class="bg-red-lightest red-darkest px-5 py-3 br-3 border-l bw-6 bc-red">
    Side border red alert
</div>

<div class="bg-green-lightest green-darkest px-5 py-3 br-3 border-l bw-6 bc-green">
    Side border green alert
</div>

<div class="bg-yellow-lightest yellow-darkest px-5 py-3 br-3 border-l bw-6 bc-yellow">
    Side border yellow alert
</div>

<div class="bg-blue-lightest blue-darkest py-4 px-6 border-b bw-6 bc-blue">
    <div class="fw-600 fs-m1">blue !!</div>
    <div class="fs-s2 lh-3">Bottom border blue alert</div>
</div>

<div class="bg-red-lightest red-darkest py-4 px-6 border-b bw-6 bc-red">
    <div class="fw-600 fs-m1">red !!</div>
    <div class="fs-s2 lh-3">Bottom border red alert</div>
</div>

<div class="bg-green-lightest green-darkest py-4 px-6 border-b bw-6 bc-green">
    <div class="fw-600 fs-m1">green !!</div>
    <div class="fs-s2 lh-3">Bottom border green alert</div>
</div>

<div class="bg-yellow-lightest yellow-darkest py-4 px-6 border-b bw-6 bc-yellow">
    <div class="fw-600 fs-m1">yellow !!</div>
    <div class="fs-s2 lh-3">Bottom border yellow alert</div>
</div>