Dependencies
This layout uses the following framework items as "atoms" to create the full UI.
Extends: Components:This layout uses the following framework items as "atoms" to create the full UI.
Extends: Components:Turn a content card into hero card to provide a different style for cards linking to "article" type pages.
<a class="c-card c-card--hero c-card--lg | u-w-60%-@bp3" href="#card_1">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img" src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=484&q=80">
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--red c-badge--inverted c-badge--lg">Offers</span>
</div>
<div class="c-card__footer">
<span class="o-split">
<span class="u-heading u-epsilon">
<span class="u-trunc u-trunc-2">Card Title</span>
</span>
<span class="u-heading u-epsilon | u-ml-sm" aria-hidden="true">→</span>
</span>
<span class="u-lead u-trunc u-trunc-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Excepturi, quas asperiores? Laborum nobis, placeat sit in numquam mollitia, vero totam, libero obcaecati quasi culpa. Iusto quasi qui autem sed temporibus.</span>
</div>
</a>