Mozilla SUMO Styleguide
  • 0Overview
  • 1Utilities
    • 1.1Expanded link utility
  • 2Typography
  • 3Colors
  • 4Grid
  • 5Forms
  • 6Buttons
  • 7Tables
  • 8Cards
  • 9Pagination
  • 10Progress Bar
  • 11Banners
  • 12Breadcrumbs
  • 13Social Links
  • 14Tabs
  • 15Containers
  • 16Navigation
  • 17Document Vote
  • 18Footer
  • 19Layout Examples

1 Utilities Utilities

1.1 Utilities.link-expand Expanded link utility

Open in new window

The .expand-this-link utility class can be added to a link, in combination with .uk-position-relative to make an inline link appear to be a block-level link. This is useful when you want to expand the click target, but for SEO and accessibility reasons, an anchor with complicated nested content is not preferred.

Examples
Default styling

Expand this

Markup: ../../../../../styleguide/styleguide-examples/expanded-link-utility.njk
<p style="position:relative; padding: 40px;background:rgba(0,0,0,0.05);">
  <a class="expand-this-link" href="#">Expand this</a>
</p>
Source: ../kitsune/sumo/static/sumo/scss/base/_utilities.scss, line 4