Using anchor instead of div for card fails

[pedzed]

Cards are assumed to be used as divs:

<div class="card">
    <img src="http://placekitten.com/g/400/200" />
    <div class="card-divider">
        This is a header
    </div>
    <div class="card-section">
        <h4>Look at This Swag Card</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi iusto reprehenderit voluptatem odio deleniti provident aliquam qui magnam aspernatur necessitatibus.</p>
    </div>
</div>

However, if one wants to make a link out of the whole card, the layout breaks, because it should be display: block.

<a class="card">
    <img src="http://placekitten.com/g/400/200" />
    <span class="card-divider">
        This is a header
    </span>
    <span class="card-section">
        <h4>Look at This Swag Card</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi iusto reprehenderit voluptatem odio deleniti provident aliquam qui magnam aspernatur necessitatibus.</p>
    </span>
</a>

A temporary fix I use:

a.card {
    display: block;

    &:hover {
        // color: isitlight(#fff);
    }

    .card-divider,
    .card-section {
        display: block;
    }
}

It would be nice to get this on default.