Link Blocks

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