🚧 Under Construction

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

Quick Links List Grid

View in Pattern Lab

HTML Markup

<div class="hoo-ql-grid"><a class="hoo-qllink" href="?">
    <article class="hoo-qllist">
        <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">Quick-link title</div>
            <div class="hoo-qldesc">Quick-links description lorem ipsum dolor sit amet</div>
        </div>
    </article></a><a class="hoo-qllink" href="?">
<article class="hoo-qllist">
    <figure class="hoo-ql-media">
        <svg class="hoo-media-svg" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-ninjacat">
            </use>
        </svg>
    </figure>
    <div class="hoo-qlinfo">
        <div class="hoo-qltitle">Quick-link title</div>
        <div class="hoo-qldesc">Quick-links description lorem ipsum dolor sit amet</div>
    </div>
</article></a><a class="hoo-qllink" href="?">
<article class="hoo-qllist">
    <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">Quick-link title</div>
        <div class="hoo-qldesc">Quick-links description lorem ipsum dolor sit amet</div>
    </div>
</article></a><a class="hoo-qllink" href="?">
<article class="hoo-qllist">
    <figure class="hoo-ql-media">
        <svg class="hoo-media-svg" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-ninjacat">
            </use>
        </svg>
    </figure>
    <div class="hoo-qlinfo">
        <div class="hoo-qltitle">Quick-link title</div>
        <div class="hoo-qldesc">Quick-links description lorem ipsum dolor sit amet</div>
    </div>
</article></a><a class="hoo-qllink" href="?">
<article class="hoo-qllist">
    <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">Quick-link title</div>
        <div class="hoo-qldesc">Quick-links description lorem ipsum dolor sit amet</div>
    </div>
</article></a><a class="hoo-qllink" href="?">
<article class="hoo-qllist">
    <figure class="hoo-ql-media">
        <svg class="hoo-media-svg" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-ninjacat">
            </use>
        </svg>
    </figure>
    <div class="hoo-qlinfo">
        <div class="hoo-qltitle">Quick-link title</div>
        <div class="hoo-qldesc">Quick-links description lorem ipsum dolor sit amet</div>
    </div>
</article></a><a class="hoo-qllink" href="?">
<article class="hoo-qllist">
    <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">Quick-link title</div>
        <div class="hoo-qldesc">Quick-links description lorem ipsum dolor sit amet</div>
    </div>
</article></a><a class="hoo-qllink" href="?">
<article class="hoo-qllist">
    <figure class="hoo-ql-media">
        <svg class="hoo-media-svg" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-ninjacat">
            </use>
        </svg>
    </figure>
    <div class="hoo-qlinfo">
        <div class="hoo-qltitle">Quick-link title</div>
        <div class="hoo-qldesc">Quick-links description lorem ipsum dolor sit amet</div>
    </div>
</article></a><a class="hoo-qllink" href="?">
<article class="hoo-qllist">
    <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">Quick-link title</div>
        <div class="hoo-qldesc">Quick-links description lorem ipsum dolor sit amet</div>
    </div>
</article></a><a class="hoo-qllink" href="?">
<article class="hoo-qllist">
    <figure class="hoo-ql-media">
        <svg class="hoo-media-svg" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-ninjacat">
            </use>
        </svg>
    </figure>
    <div class="hoo-qlinfo">
        <div class="hoo-qltitle">Quick-link title</div>
        <div class="hoo-qldesc">Quick-links description lorem ipsum dolor sit amet</div>
    </div>
</article></a>
</div>

Quick Links List Grid

A responsive grid layout for displaying quick links in list format. Features clean list-style presentation with icon, title, and optional description text, optimized for informational navigation scenarios.

Overview

The quick links list grid presents navigation items in a clean, list-style format with icon, title, and optional description. This format provides more context than compact versions while maintaining visual clarity and efficient use of space.

Features

  • List-Style Format: Clean presentation with icon, title, and description
  • Optional Descriptions: Flexible content with or without description text
  • Responsive Grid: Adapts to different screen sizes and container widths
  • Icon Integration: Supports both image and SVG icons with consistent sizing
  • Content Flexibility: Accommodates varying text lengths gracefully
  • Hover Effects: Subtle interactive feedback with background changes

Structure

The component consists of:

  1. Grid Container: .hoo-ql-grid - Main grid layout container
  2. Grid Items: {{> molecules-ql-list-item}} - Individual list-style quick links
  3. Responsive Columns: CSS Grid with responsive breakpoints

Data Structure

{
    "quick-links": [
        {
            "href": "/employee-handbook",
            "title": "Employee Handbook",
            "description": "Policies, procedures, and company guidelines",
            "qlimg": {
                "src": "/icons/handbook.svg",
                "alt": "Handbook icon"
            }
        },
        {
            "href": "/benefits",
            "title": "Benefits Portal",
            "description": "Health insurance, retirement, and wellness programs",
            "qlimg": {
                "src": "/icons/benefits.svg",
                "alt": "Benefits icon"
            }
        },
        {
            "href": "/time-off",
            "title": "Request Time Off",
            "description": "Submit vacation and sick leave requests",
            "qlimg": {
                "src": "/icons/calendar.svg",
                "alt": "Calendar icon"
            }
        }
    ]
}

CSS Classes

  • .hoo-ql-grid: Main grid container
  • .hoo-ql-grid.col-2: Two-column grid layout
  • .hoo-ql-grid.col-3: Three-column grid layout
  • .hoo-ql-grid.col-4: Four-column grid layout
  • .hoo-qllist: Individual list item styling
  • .hoo-qllist.no-desc: List item without description

Styling

Grid Layout

  • Default: Auto-responsive columns based on content
  • Grid Gap: 16px spacing between items
  • Min Column Width: 240px minimum item width
  • Max Columns: 3 columns maximum on large screens

Visual Design

  • Item Background: White with subtle border (#d1d1d1)
  • Border Radius: 4px for modern appearance
  • Padding: 16px internal spacing
  • Typography: 14px title, 12px description
  • Icon Size: 32px for better visual prominence

Layout Structure

  • Direction: Horizontal layout with icon on left
  • Alignment: Icon and text vertically centered
  • Spacing: 12px gap between icon and text content
  • Text Stack: Title above description in text area

Use Cases

Resource Directory

<section class="resource-directory">
    <h2>Employee Resources</h2>
    <div class="hoo-ql-grid col-3">
        <!-- HR resources, policies, forms -->
    </div>
</section>

Information Portal

<div class="info-portal">
    <h3>Information Center</h3>
    <div class="hoo-ql-grid">
        <!-- Documentation, guides, FAQs -->
    </div>
</div>

Service Catalog

<section class="service-catalog">
    <h2>Available Services</h2>
    <div class="hoo-ql-grid col-2">
        <!-- Service descriptions and access points -->
    </div>
</section>

Knowledge Base

<nav class="knowledge-base">
    <h3>Knowledge Base</h3>
    <div class="hoo-ql-grid col-3">
        <!-- Articles, tutorials, documentation -->
    </div>
</nav>

Accessibility

  • Semantic Structure: Uses proper link elements with descriptive text
  • Keyboard Navigation: Full keyboard navigation support
  • Screen Reader Support: Clear titles and descriptions for context
  • Focus Management: Visible focus indicators for keyboard users
  • Touch Targets: Minimum 44px touch target size
  • Content Hierarchy: Clear visual hierarchy with title and description

Performance

  • Lightweight: Minimal CSS and HTML structure
  • CSS Grid: Modern, efficient layout with native browser support
  • No JavaScript: Pure CSS implementation for optimal performance
  • Content Loading: Supports progressive loading of descriptions

Grid Variations

Column Count Classes

  • .col-2: Two columns, ideal for detailed descriptions
  • .col-3: Three columns, balanced layout
  • .col-4: Four columns, more compact presentation

Responsive Breakpoints

  • Mobile: Single column (< 576px)
  • Small: 2 columns (576px - 768px)
  • Medium: 2-3 columns (768px - 992px)
  • Large: 3-4 columns (992px+)

Content Flexibility

With Descriptions

<a class="hoo-qllink" href="/resource">
    <article class="hoo-qllist">
        <div class="hoo-ql-media">
            <img src="/icon.svg" alt="Resource icon" />
        </div>
        <div class="hoo-qlinfo">
            <div class="hoo-qltitle">Resource Title</div>
            <div class="hoo-qldesc">Detailed description of the resource</div>
        </div>
    </article>
</a>

Without Descriptions

<a class="hoo-qllink" href="/resource">
    <article class="hoo-qllist no-desc">
        <div class="hoo-ql-media">
            <img src="/icon.svg" alt="Resource icon" />
        </div>
        <div class="hoo-qlinfo">
            <div class="hoo-qltitle">Resource Title</div>
        </div>
    </article>
</a>

Content Guidelines

Title Text

  • Keep titles descriptive but concise
  • Use sentence case for better readability
  • Avoid technical jargon when possible
  • Ensure titles are unique and meaningful

Description Text

  • Provide helpful context about the link destination
  • Keep descriptions to 1-2 sentences
  • Use active voice when possible
  • Avoid repeating the title text

Icon Selection

  • Use icons that clearly represent the content or action
  • Maintain consistent icon style throughout the grid
  • Ensure icons are recognizable at 32px size
  • Provide meaningful alt text for accessibility

Browser Support

  • Modern Browsers: Full CSS Grid support in Chrome, Firefox, Safari, Edge
  • Legacy Support: Flexbox fallback for older browsers
  • Mobile Browsers: Optimized for mobile and tablet interfaces
  • Progressive Enhancement: Graceful degradation on older browsers

SCSS Import

Interactive States

Default State

  • Clean white background with subtle border
  • Standard text colors and icon appearance
  • No visual elevation or shadow

Hover State

  • Light background tint (#f3f2f1)
  • Subtle border color change
  • Smooth transition animation

Focus State

  • Blue focus ring for keyboard navigation
  • Maintained hover state styling
  • Clear visual indicator for accessibility

Integration Examples

With Section Header

<section class="resources-section">
    <header class="section-header">
        <h2>Employee Resources</h2>
        <p>Access important documents and information</p>
    </header>
    {{> organism-quick-links-list-grid}}
</section>

Within Card Layout

<div class="dashboard-card">
    <div class="card-header">
        <h3>Quick Links</h3>
    </div>
    <div class="card-body">
        {{> organism-quick-links-list-grid}}
    </div>
</div>