🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Quick Link Tiles - XLarge

View in Pattern Lab

HTML Markup

<a class="hoo-qllink" href="?">
<article class="hoo-qltiles img-xl">
    <figure class="hoo-ql-media">
        <img src="/htwoo-core/images/placeholders/ph-16by9.png" class="hoo-ql-img" alt="" loading="lazy">
    </figure>
    <div class="hoo-qlinfo">
        <div class="hoo-qltitle">This is a really long title to get everything working lorem ipsum dolor sit amet</div>
    </div>
</article></a>

Quick Link Tiles - Extra Large

The largest tile variant featuring 48px icons for maximum visual impact and prominence. These tiles are designed for hero sections, primary navigation, and situations requiring the highest visual hierarchy.

Overview

Extra Large tiles represent the pinnacle of visual prominence in the quick links family. With 48px icons and maximum visual weight, they’re reserved for the most important content and primary user pathways.

Features

  • Icon Size: 48px (3rem) - maximum size for optimal impact
  • Maximum Prominence: Highest visual hierarchy level
  • Hero Placement: Designed for prominent interface areas
  • Touch Optimized: Excellent touch targets for all devices
  • Theme Colors: Full theme color integration
  • Accessibility: Large targets meet all accessibility guidelines

Size Specifications

  • Icon: 48px (3rem) - largest available size
  • Visual Hierarchy: Maximum prominence level
  • Accessibility: Exceeds minimum touch target requirements
  • Use Case: Hero tiles, primary actions, featured showcases

CSS Classes

  • .hoo-qltiles: Main tile container
  • .img-xl: Extra large icon size modifier

Use Cases

  • Hero Sections: Primary hero area navigation
  • Landing Pages: Main application entry points
  • Featured Showcases: Highlighted content and applications
  • Primary Actions: Most important user actions

Design Considerations

  • Spacing: Requires adequate spacing due to large size
  • Hierarchy: Use sparingly to maintain visual hierarchy
  • Content: Reserve for most important applications/content
  • Layout: Consider grid impact and responsive behavior

SCSS Files

Quick Link Tile Styles:

  • lib/sass/02-molecules/quicklinks/quicklinks-tiles