Below are a number of variants of the link block template available in the styles container.
Container classes:
card link-block w-inline-block
jQuery Selector
$(".styles .link-block:eq(0)");
<a href="#" class="card link-block w-inline-block">
<div class="link-block__inner">
<h3 class="h3-block-title">Head of section</h3>
<div class="subtitle">Mr Walter Linnert</div>
</div>
</a>
Image preview
Container classes:
card link-block w-inline-block
jQuery Selector
$(".styles .link-block:eq(2)");
<a href="#" class="card link-block w-inline-block">
<div class="link-block__inner">
<h3 class="h3-block-title">Block title</h3>
</div>
<div class="icon link-block__arrow-icon">
<div class="fas fa-long-arrow-alt-right" aria-hidden="true"></div>
</div>
</a>
Image preview
Container classes
card link-block link-block--icon-left w-inline-block
jQuery Selector
$(".styles .link-block:eq(3)");
<a href="#" class="card link-block link-block--icon-left w-inline-block">
<div class="icon link-block__icon">
<div class="fas fa-spinner" aria-hidden="true"></div>
</div>
<div class="link-block__inner">
<h3 class="h3-block-title">Block title</h3>
</div>
<div class="icon link-block__arrow-icon">
<div class="fas fa-long-arrow-alt-right" aria-hidden="true"></div>
</div>
</a>
Image preview
Container classes
card link-block w-inline-block
jQuery Selector
$(".styles .link-block:eq(4)");
<a href="#" class="card link-block w-inline-block">
<div class="link-block__inner">
<h3 class="h3-block-title">Block title</h3>
<div class="subtitle">Block subtitle</div>
</div>
<div class="icon link-block__arrow-icon">
<div class="fas fa-long-arrow-alt-right" aria-hidden="true"></div>
</div>
</a>
Image preview
Container classes
card link-block w-inline-block
jQuery Selector
$(".styles .link-block:eq(5)");
<a href="#" class="card link-block w-inline-block">
<div class="link-block__inner">
<h3 class="h3-block-title">Block title</h3>
<div class="subtitle">Block subtitle<br></div>
</div>
<div class="icon link-block__action-icon">
<div class="fas fa-long-arrow-alt-right" aria-hidden="true"></div>
</div>
</a>
Image preview
Container classes
card link-block link-block--icon-left w-inline-block
jQuery Selector
$(".styles .link-block:eq(6)");
<a href="#" class="card link-block link-block--icon-left w-inline-block">
<div class="icon link-block__icon">
<div class="fas fa-spinner" aria-hidden="true"></div>
</div>
<div class="link-block__inner">
<h3 class="h3-block-title">Block title</h3>
<div class="subtitle">Block subtitle<br></div>
</div>
<div class="icon link-block__arrow-icon">
<div class="fas fa-long-arrow-alt-right" aria-hidden="true"></div>
</div>
</a>
Image preview
Container classes
card link-block link-block--icon-left w-inline-block
jQuery Selector
$(".styles .link-block:eq(7)");
<a href="#" class="card link-block link-block--icon-left w-inline-block">
<div class="icon link-block__card-icon">
<div class="fas fa-comment" aria-hidden="true"></div>
</div>
<div class="link-block__inner">
<h3 class="h3-block-title">Call for comment on the 2020 draft Municipal Budget
</h3>
<div class="subtitle">12 August, 2020</div>
</div>
<div class="icon link-block__action-icon">
<div class="fas fa-long-arrow-alt-right" aria-hidden="true"></div>
</div>
</a>
Image preview
Container classes
card link-block link-block--image-left w-inline-block
jQuery Selector
$(".styles .link-block:eq(8)");
<a href="#" class="card link-block link-block--image-left w-inline-block">
<div class="image link-block__image-left"><img
src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg"
loading="lazy" alt="" class="link-block__image"></div>
<div class="link-block__inner">
<h3 class="h3-block-title">Block title</h3>
<div class="subtitle">Block subtitle</div>
</div>
<div class="icon link-block__arrow-icon">
<div class="fas fa-long-arrow-alt-right" aria-hidden="true"></div>
</div>
</a>
Image preview
Container classes
card link-block link-block--image-left-action-right w-inline-block
jQuery Selector
$(".styles .link-block:eq(9)");
<a href="#" class="card link-block link-block--image-left-action-right w-inline-block">
<div class="image link-block__image-left"><img
src="https://d3e54v103j8qbb.cloudfront.net/plugins/Basic/assets/placeholder.60f9b1840c.svg"
loading="lazy" alt="" class="link-block__image"></div>
<div class="link-block__inner">
<h3 class="h3-block-title">Block title</h3>
<div class="subtitle">Block subtitle</div>
</div>
<div class="icon link-block__action-icon">
<div class="fas fa-long-arrow-alt-right" aria-hidden="true"></div>
</div>
</a>
Image preview
