🚧 Under Construction

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

Quick Link Tiles - Large

View in Pattern Lab

HTML Markup

<a class="hoo-qllink" href="?">
<article class="hoo-qltiles img-l">
    <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 - Large

Large-sized tile variant featuring 40px icons for maximum visual impact while maintaining usability. These tiles are ideal for primary applications and featured content that requires prominent display.

Overview

Large tiles offer significant visual presence with enhanced icon sizing while maintaining the core tile design principles. They’re perfect for primary navigation, featured applications, and dashboard highlights.

Features

  • Icon Size: 40px (2.5rem) for maximum visibility
  • High Prominence: Significant visual weight and presence
  • Primary Use: Featured content and main applications
  • Square Format: Consistent 1:1 aspect ratio
  • Theme Integration: Full theme color support
  • Touch Friendly: Large touch targets for mobile

Size Specifications

  • Icon: 40px (2.5rem) - largest standard size
  • Visual Impact: High prominence for primary content
  • Touch Target: Excellent for mobile interfaces
  • Use Case: Hero tiles, primary applications, main navigation

CSS Classes

  • .hoo-qltiles: Main tile container
  • .img-l: Large icon size modifier

Use Cases

  • Primary Applications: Main application launchers
  • Featured Content: Highlighted resources and tools
  • Dashboard Headers: Primary dashboard navigation
  • Hero Sections: Prominent placement in hero areas

SCSS Files

Quick Link Tile Styles:

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