Make a whole block a link

We often get requests about how to make a block a link instead of just a link inside a block. You can do this in a couple ways.

Method 1: A nested div inside a hyperlink

In HTML5, this is perfectly valid and will succeed in making a text block or custom code block clickable. The key is to draw the block at the height you are going to set the font-size/line-height at.

<a href="#quote"><div>Get a Quote</div></a>

Method 2: Use CSS to make the hyperlink a block level element

a.cta {display:block;}

This would make a hyperlink with a class of cta a block level element. The key is to draw the block at the height you are going to set the font-size/line-height at.

Method 3: Use javascript

An example of the code

$('.cta').click(function() {
  window.location.href = $('a', this).attr('href');
});