Dependencies
This layout uses the following framework items as "atoms" to create the full UI.
Uses: Objects: Extends: Components:Basic Example
Set of 4 large block like call to actions.
<div class="c-hero-block | o-wrapper o-wrapper--full">
<div class="c-hero-block__grid">
<div class="c-hero-block__item">
<a href="#block_1" class="c-block-link c-card c-card--hero">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit"
src="/assets/img/ds/layouts/home/block-links/hero_block--careers--desktop-@x2.webp"
loading="lazy"
alt
>
</div>
<div class="c-card__footer">
<div class="o-split">
<span class="u-heading u-size-md | o-split__title">Careers at Listers</span>
<span class="u-heading u-size-md" aria-hidden="true">→</span>
</div>
</div>
</a>
</div>
<div class="c-hero-block__item">
<a href="#block_2" class="c-block-link c-card c-card--hero">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit"
src="/assets/img/ds/layouts/home/block-links/hero_block--finance--desktop-@x2.webp"
loading="lazy"
alt
>
</div>
<div class="c-card__footer">
<div class="o-split">
<span class="u-heading u-size-md | o-split__title">Finance that's easy to understand</span>
<span class="u-heading u-size-md" aria-hidden="true">→</span>
</div>
</div>
</a>
</div>
<div class="c-hero-block__item">
<a href="#block_3" class="c-block-link c-card c-card--hero">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit"
src="/assets/img/ds/layouts/home/block-links/hero_block--buy_your_car--desktop-@x2.webp"
loading="lazy"
alt
>
</div>
<div class="c-card__footer">
<div class="o-split">
<span class="u-heading u-size-md | o-split__title">We'll buy your car</span>
<span class="u-heading u-size-md" aria-hidden="true">→</span>
</div>
</div>
</a>
</div>
<div class="c-hero-block__item">
<a href="#block_4" class="c-block-link c-card c-card--hero">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit"
src="/assets/img/ds/layouts/home/block-links/hero_block--offers--desktop-@x2.webp"
loading="lazy" alt
>
</div>
<div class="c-card__footer">
<div class="o-split">
<span class="u-heading u-size-md | o-split__title">Offers and Promotions</span>
<span class="u-heading u-size-md" aria-hidden="true">→</span>
</div>
</div>
</a>
</div>
</div>
</div>