🚧 Under Construction

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

Quick Link List Grid

View in Pattern Lab

HTML Markup

<a class="hoo-qllink" href="?">
<article class="hoo-qlgrid">
    <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 List Grid

A grid layout specifically optimized for displaying quick link list items in organized, responsive arrangements. This component bridges molecular list items with grid-based layouts for structured content presentation.

Overview

The list grid provides a structured way to display multiple quick link list items while maintaining their horizontal layout characteristics. It’s designed for content-heavy interfaces where detailed information needs organized presentation.

Features

  • List Item Integration: Optimized for quick link list items
  • Responsive Grid: Adapts to container width
  • Content Density: Efficient space usage for information-rich layouts
  • Flexible Columns: Supports various column configurations
  • Consistent Spacing: Uniform gaps between list items
  • Overflow Handling: Graceful content overflow management

Structure

The grid contains quick link list items arranged in a responsive grid pattern:

  1. Grid Container: Manages layout and spacing
  2. List Items: Individual quick link list components
  3. Responsive Behavior: Adapts column count to available space

CSS Classes

  • .hoo-ql-list-grid: Main grid container
  • .grid-row: Row container for items
  • .grid-item: Individual item wrapper

Use Cases

  • Navigation Menus: Organized navigation with descriptions
  • Resource Lists: Documents, tools, and application collections
  • Directory Layouts: Team members, contacts, or organizational units
  • Content Catalogs: Structured content with metadata display

Responsive Behavior

  • Large Screens: Multiple columns with full content display
  • Medium Screens: Reduced columns with maintained readability
  • Small Screens: Single or dual column layout with responsive text

SCSS Import