🚧 Under Construction

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

Quick Link Tiles - Medium

View in Pattern Lab

HTML Markup

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

Medium-sized tile variant of the quick link tiles with enhanced icon size and visual presence. This size strikes a balance between standard tiles and large tiles, offering good visibility without overwhelming the interface.

Overview

Medium tiles provide a step up in visual prominence from standard tiles while remaining suitable for most interface contexts. They feature larger icons (32px) and maintain the same square aspect ratio and theme-colored styling.

Features

  • Icon Size: 32px (2rem) icons for better visibility
  • Square Format: Maintains 1:1 aspect ratio
  • Enhanced Presence: More prominent than standard tiles
  • Theme Colors: Same color scheme as standard tiles
  • Responsive: Adapts to container constraints
  • Grid Compatible: Works within all grid layouts

Size Specifications

  • Icon: 32px (2rem) vs 24px (1.5rem) in standard
  • Overall Size: Same container size with larger icon emphasis
  • Visual Weight: Medium prominence level
  • Use Case: Featured applications, important navigation

CSS Classes

  • .hoo-qltiles: Main tile container
  • .img-m: Medium icon size modifier
  • All standard tile classes apply

SCSS Import