card
The card molecule extends the paper base molecule and adds Flexbox. By doing so the size of the card is stretched to match adjacent cards in each row. Card molecules should be the direct children of any Flexbox or Grid container.
Example
HTML
<article class="card ">
<figure>
<a href="https://mcclatchy.github.io/saratoga/food/205504249/">
<img src="/img/kitten.jpg" alt="Kitten clings for life during Hurricane Florence" loading="lazy">
</a>
</figure>
<div class="package">
<a class="kicker h6" href="https://mcclatchy.github.io/saratoga/food/">FOOD</a>
<h3 class="h3"><a href="#">Kitten clings for life as man awaits rescue from Florence.</a></h3>
<time>March 16, 2018 11:33 am</time>
</div>
</article>Horizontal version
The card can also be made horizontal by adding a class with the same name.
Example
READ NEXT
HTML
<article class="card horizontal">
<figure>
<div class="label sticky"><h5 class="impact">READ NEXT</h5></div>
<a href="https://mcclatchy.github.io/saratoga/food/205504249/">
<img src="/img/kitten.jpg" alt="Kitten clings for life during Hurricane Florence" loading="lazy">
</a>
</figure>
<div class="package">
<a class="kicker h6" href="https://mcclatchy.github.io/saratoga/food/">FOOD</a>
<h3 class="h3"><a href="#">Kitten clings for life as man awaits rescue from Florence.</a></h3>
<time>March 16, 2018 11:33 am</time>
</div>
</article>