> For the complete documentation index, see [llms.txt](https://openup.gitbook.io/cape-agulhas-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://openup.gitbook.io/cape-agulhas-app/design-system/link-block.md).

# 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

![](https://3781560293-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJMOjRvhmSwc5da9Djd%2F-MLDUyyQRPLc-jbJfMOe%2F-MLDVt0q1f8162sjAVKT%2FScreenshot%202020-11-03%20at%2016.29.44.png?alt=media\&token=8c9ebf4e-7a4e-422c-bcac-52fdb6eb0200)

### 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

![](https://3781560293-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJMOjRvhmSwc5da9Djd%2F-MLDfKsNKDUWjPXLHkye%2F-MLDfvtkCUz9i1I5cjVT%2FScreenshot%202020-11-03%20at%2017.18.00.png?alt=media\&token=5b5731b5-a599-4048-9316-c0f801aaf245)

### 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

![](https://3781560293-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJMOjRvhmSwc5da9Djd%2F-MLDWjK428QG1si8VDfB%2F-MLD_51OtH8PFvE_RQRP%2FScreenshot%202020-11-03%20at%2016.48.06.png?alt=media\&token=a9b0cf3d-0eaf-4d82-97eb-ebc733d2ce53)

### 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

![](https://3781560293-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJMOjRvhmSwc5da9Djd%2F-MLDWjK428QG1si8VDfB%2F-MLD_hrUOq17G2Job5AJ%2FScreenshot%202020-11-03%20at%2016.50.49.png?alt=media\&token=b3dfb238-77c4-4324-a87e-dd29c19172d2)

### 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

![](https://3781560293-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJMOjRvhmSwc5da9Djd%2F-MLDWjK428QG1si8VDfB%2F-MLDa9Y2nA17vOqXujqx%2FScreenshot%202020-11-03%20at%2016.52.47.png?alt=media\&token=345534c4-3cc0-4423-9b6b-30e10c79a427)

### 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

![](https://3781560293-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJMOjRvhmSwc5da9Djd%2F-MLDaCmwGLeKKnz5y_wZ%2F-MLDcXVrm0hBFSoc6VnT%2FScreenshot%202020-11-03%20at%2017.03.09.png?alt=media\&token=c96eb93b-72d7-4fd7-a25d-cc7721620c07)

### 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

![](https://3781560293-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJMOjRvhmSwc5da9Djd%2F-MLDaCmwGLeKKnz5y_wZ%2F-MLDd-LVdfVqvJM48jqc%2FScreenshot%202020-11-03%20at%2017.05.11.png?alt=media\&token=ffeb8d8e-06d9-40a5-8eab-72cac3d97625)

### 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

![](https://3781560293-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJMOjRvhmSwc5da9Djd%2F-MLDaCmwGLeKKnz5y_wZ%2F-MLDdWJYIwv76R0gLLg0%2FScreenshot%202020-11-03%20at%2017.07.27.png?alt=media\&token=d2461896-d0b4-4644-88e8-8d3c9894bbac)

### 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

![](https://3781560293-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJMOjRvhmSwc5da9Djd%2F-MLDaCmwGLeKKnz5y_wZ%2F-MLDdtpPUt5O3eMQvWT-%2FScreenshot%202020-11-03%20at%2017.09.06.png?alt=media\&token=0b68e8a8-6075-443e-9120-dc3badfba2f0)