Click-Regions

Click regions allow an entire containing div to be clickable instead of individual elements located inside. This benefits both users with smaller devices or motor disabilities.

Basic Example  Code

Notes

  • Links: When using a click region, an invisible link is covering the entire area. If any additional links are included inside the click-region, they will be disabled.
  • Width: Click-regions scale to the width of it's parent container. So you can use this technique in combination with grids or flex boxes.

Example: Tile  Code

Example: Card  Code

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.