GOV
Featured Link Buttons/Tiles
Tiles of links to featured content/sections
Overview
We use larger link buttons with icons, titles, and descriptions for promoting and featuring website content/sections on landing pages. These should be somewhat sparingly.
In the CMS sets of these can be added to a page with the Featured Link Button custom element, and we have the custom coldfusion tag <cf_render-feature-button /> for use in custom scripts. See the documentation for more information.
Default Horizontal View
<div class="featured-link"> <div class="featured-link-icon" aria-hidden> <span class="glyphicons glyphicons-dog"></span> </div> <div class="featured-link-content"> <a href="#dogs" class="featured-link-heading"> Dogs </a> <div class="featured-link-description"> Dogs, puppies, pups, pooches </div> </div> </div>
Large Portrait View
This version has the icon, title, and description stacked vertically and takes up more vertical space. On mobile it switches to the horizontal view, with the icon on the left. To use this layout, add the .featured-link-large class.
<div class="featured-link featured-link-large"> <div class="featured-link-icon" aria-hidden> <span class="glyphicons glyphicons-dog"></span> </div> <div class="featured-link-content"> <a href="#dogs" class="featured-link-heading"> Dogs </a> <div class="featured-link-description"> Dogs, puppies, pups, pooches </div> </div> </div>
Grid Groups
To automatically have a set of featured link buttons show as a grid on larger screen sizes, put them inside a container element with the class .featured-link-flex.
This makes the default horizontal view show as a grid with 50% wide columns, and the large portrait view show as a grid with 33% wide columns.
<div class="featured-link-flex"> <div class="featured-link"> <div class="featured-link-icon" aria-hidden> <span class="glyphicons glyphicons-dog"></span> </div> <div class="featured-link-content"> <a href="#dogs" class="featured-link-heading"> Dogs </a> <div class="featured-link-description"> Dogs, puppies, pups, pooches </div> </div> </div> </div>
Help Us Improve This Page
Did you notice an error? Is there information that you expected to find on this page, but didn't? Let us know below, and we'll work on it.
Feedback is anonymous.
