Cards: Default

<h3>Simple</h3>
<div class="row">
    <div class="col-sm-12 col-md-4">
        <div class="hgm-card">
            <div class="hgm-card__body">
                <h4>Card Title Goes Here</h4>
                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <button type="button" class="hgm-button">Some Label</button>
                <button type="button" class="hgm-button ghost">Some Label</button>
            </div>
        </div>
    </div>
</div>

<br>
<div class="row">
    <div class="col-sm-12 col-md-4">
        <div class="hgm-card">
            <div class="hgm-card__body">
                <h4>Card Title Goes Here</h4>
                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <button type="button" class="hgm-button full-width">Some Label</button>
            </div>
        </div>
    </div>
</div>

<br>
<h3>Image with Border</h3>
<div class="row">
    <div class="col-sm-12 col-md-4">
        <div class="hgm-card">
            <img src="https://placehold.co/600x400.png" />
            <div class="hgm-card__body">
                <h4>Card Title Goes Here</h4>
                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a class="hgm-card__link" href="#">Card link</a>
                <a class="hgm-card__link" href="#">Another card link</a>
            </div>
        </div>
    </div>
</div>

<br>
<h3>Image Inset with Border</h3>
<div class="row">
    <div class="col-sm-12 col-md-4">
        <div class="hgm-card">
            <div class="hgm-card__body">
                <img src="https://placehold.co/600x400.png" />
                <h4>Card Title Goes Here</h4>
                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a class="hgm-card__link" href="#">Card link</a>
                <a class="hgm-card__link" href="#">Another card link</a>
            </div>
        </div>
    </div>
</div>