Card: Default

<!-- SASS: src/stylesheets/_components/cards.scss -->

<h6>Linked Card</h6>
<a href="#" class="vaux-card">
    <h1 class="vaux-card-title">Title One</h1>
    <div class="vaux-card-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare mauris ut quam lacinia auctor.</p>
    </div>
</a>

<h6>Card with linked content</h6>
<div class="vaux-card">
    <h1 class="vaux-card-title">Title Two is a long title that is two lines long</h1>
    <div class="vaux-card-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare mauris ut quam lacinia auctor.</p>
        <button class="usa-button-outline">Button Type Link</button>
        <a href="#">Link to content</a>
    </div>
</div>

<h6>Examples of grid layout with linked cards</h6>
<div class="usa-grid vaux-card-row">
    <div class="usa-width-one-third">
        <a href="#" class="vaux-card">
            <h1 class="vaux-card-title">Title One</h1>
            <div class="vaux-card-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare mauris ut quam lacinia auctor.</p>
            </div>
        </a>
    </div>
    <div class="usa-width-one-third">
        <a href="#" class="vaux-card">
            <h1 class="vaux-card-title">Title Two</h1>
            <div class="vaux-card-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare mauris ut quam lacinia auctor.</p>
            </div>
        </a>
    </div>
    <div class="usa-width-one-third">
        <a href="#" class="vaux-card">
            <h1 class="vaux-card-title">Title Three</h1>
            <div class="vaux-card-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare mauris ut quam lacinia auctor.</p>
            </div>
        </a>
    </div>
</div>

<h6>Examples of grid layout of cards with linked content</h6>
<div class="usa-grid vaux-card-row">
    <div class="usa-width-one-third">
        <div class="vaux-card">
            <h1 class="vaux-card-title">Title One</h1>
            <div class="vaux-card-content">
                <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Nulla ornare mauris ut quam lacinia auctor.</p>
            </div>
        </div>
    </div>
    <div class="usa-width-one-third">
        <div class="vaux-card">
            <h1 class="vaux-card-title">Title Two</h1>
            <div class="vaux-card-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare mauris ut quam lacinia auctor.</p>
                <a href="#">Link to content</a>
            </div>
        </div>
    </div>
    <div class="usa-width-one-third">
        <div class="vaux-card">
            <h1 class="vaux-card-title">Title Three</h1>
            <div class="vaux-card-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare mauris ut quam lacinia auctor.</p>
                <button class="usa-button-outline">Button Type Link</button>
            </div>
        </div>
    </div>
</div>

<style scoped>
    .usa-grid.vaux-card-row {
        margin-top: 4rem;
        margin-bottom: 5rem;
    }
</style>