Cards: Horizontal

<h3>Simple</h3>
<div class="row">
    <div class="col-sm-12 col-md-8">
        <div class="hgm-card horizontal">
            <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-8">
        <div class="hgm-card horizontal">
            <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>
<div class="row">
    <div class="col-sm-12 col-md-8">
        <div class="hgm-card horizontal">
            <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-8">
        <div class="hgm-card horizontal">
            <div class="hgm-card__body image">
                <img src="https://img.freepik.com/free-photo/covid-recovery-center-female-doctor-holding-older-patient-s-hands_23-2148847832.jpg" />
                <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-8">
        <div class="hgm-card horizontal">
            <div class="hgm-card__body image full">
                <img src="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21198.jpg" />
                <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>