Listing

<a href="#" class="listing-item">
    <h1 class="title" id="listing-item-title-1">Dapibus ac facilisis in</h1>
    <p>Lorem ipsum Morbi leo risus</p>
</a>

Listing

This is a custom component which mainly consists of a title and content wrapped in an anchor so the full element is clickable.

Accessibility

We do not use the aria-labelledby attribute on the anchor in order to ensure the entire link text is readable by screen readers.

Using

No additional actions, aside from the markup, are needed to use this component.

Notes

  • The title in this component is rendered via a h1 element, every heading (h1 - h6) will work so choose your own heading according the structure of the page.