<h6 class="subtitle is-6 is-uppercase has-text-grey">Component</h6><h1 class="title is-1 is-serif has-text-weight-bold">Card</h1>
<p class="subtitle is-5">
    <span class="has-text-weight-semibold">Card</span> is used to give actionable options to a related grouping of information.
</p>

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

<div class="box is-well is-large is-marginless">
    <div class="card">
        <div class="card-content">
            <div class="title is-4 is-serif">"A Card is like a Box but with action buttons."</div>
            <div class="subtitle is-6">The Biings Design System</div>
        </div>
        <footer class="card-footer">
            <a class="card-footer-item has-text-weight-semibold">I Agree</a>
            <a class="card-footer-item has-text-grey-darker">What? No!.</a>
        </footer>
    </div>
</div>

    <div class="card">
        <div class="card-content">
            A Card is like Box but with action buttons...
        </div>
        <footer class="card-footer">
            <a class="card-footer-item">
                Action-1
            </a>
            <a class="card-footer-item has-text-weight-semibold">
                Action-2
            </a>
        </footer>
    </div>
<br>

?> A Card can have **one**, **two** or **three** action items!

<hr>

<a href="https://bulma.io/documentation/components/card/" target="blank" class="box is-bordered">
    Find more possibilities on &nbsp;→&nbsp; <strong class="has-text-primary">Bulma / Card</strong></a>
</a>