Cover all

Use a psuedo element inside the <a> to cover the entire parent.

  • This way we don’t have to make the parent element a link.
  • Downside: You can’t select the text anymore, but this should be considered an upside since you want the whole block to be clickable anyway.
<a class="k-link-coverall">...</a>

Use inside the same parent as the above “coverall” link to place this link on top of the psuedo element

<a class="k-link-ontop">...</a>

Example

Title

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.

Read more
<div class="k-ratio-block k-ratio-block--16-to-9">
    <img class="k-ratio-block__body" src="/images/developer/ui/placeholder-16-9.png" alt="" />
    <div class="k-ratio-block__body">
        <div class="k-ratio-block__centered">
            <h2><a href="#" class="k-link-coverall">Title</a></h2>
            <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.</p>
            <a class="k-button k-button--default k-link-ontop" href="javascript:void(0)">Read more</a>
        </div>
    </div>
</div>

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.