🚧 Under Construction

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

Quick Links Button Filled Grid

View in Pattern Lab

HTML Markup

<div class="hoo-ql-grid"><a class="hoo-qllink" href="?">
    <article class="hoo-qlbtn filled one-line">
        <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-qlbtn filled one-line">
    <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-qlbtn filled one-line">
    <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-qlbtn filled one-line">
    <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-qlbtn filled one-line">
    <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-qlbtn filled one-line">
    <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-qlbtn filled one-line">
    <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-qlbtn filled one-line">
    <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-qlbtn filled one-line">
    <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-qlbtn filled one-line">
    <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 Button Filled Grid

A responsive grid layout for displaying quick links as filled button elements. Features prominent button styling with filled backgrounds, optimized for high-visibility navigation and call-to-action scenarios.

Overview

The quick links button filled grid presents navigation items as prominent, filled buttons arranged in a responsive grid. The filled background styling makes these links highly visible and suitable for primary navigation or important actions that need to stand out.

Features

  • Filled Button Styling: Prominent buttons with theme-colored backgrounds
  • Responsive Grid: Adapts to different screen sizes and container widths
  • Icon Integration: Supports both image and SVG icons with consistent sizing
  • High Visibility: Filled backgrounds ensure links stand out prominently
  • Touch Optimized: Large touch targets optimized for mobile interaction
  • Hover Effects: Interactive feedback with darker background on hover

Structure

The component consists of:

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

Data Structure

{
    "quick-links": [
        {
            "href": "/create-document",
            "title": "Create Document",
            "qlimg": {
                "src": "/icons/create-document.svg",
                "alt": "Create document icon"
            }
        },
        {
            "href": "/upload-files",
            "title": "Upload Files",
            "qlimg": {
                "src": "/icons/upload.svg",
                "alt": "Upload icon"
            }
        },
        {
            "href": "/schedule-meeting",
            "title": "Schedule Meeting",
            "qlimg": {
                "src": "/icons/calendar-add.svg",
                "alt": "Schedule meeting 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-qlbtn.filled: Individual filled button styling
  • .hoo-qlbtn.filled.oneline: Single-line text variant

Styling

Grid Layout

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

Visual Design

  • Button Background: Theme primary color (#0078d4)
  • Text Color: White (#ffffff) for contrast
  • Border: 1px solid theme color with 4px border radius
  • Padding: 16px internal spacing
  • Height: 62px minimum for touch accessibility
  • Font Weight: 600 (semi-bold) for prominence

Interactive States

  • Default: Theme background with white text
  • Hover: Darker theme background (#106ebe)
  • Focus: Keyboard focus ring for accessibility
  • Active: Pressed state with subtle shadow
  • Disabled: Reduced opacity and disabled state

Use Cases

Primary Actions Dashboard

<section class="primary-actions">
    <h2>Quick Actions</h2>
    <div class="hoo-ql-grid col-3">
        <!-- Create, Upload, Schedule actions -->
    </div>
</section>

Application Launcher

<div class="app-launcher">
    <h3>Launch Applications</h3>
    <div class="hoo-ql-grid col-4">
        <!-- Featured application shortcuts -->
    </div>
</div>

Service Portal

<section class="service-portal">
    <h2>IT Services</h2>
    <div class="hoo-ql-grid">
        <!-- IT service request buttons -->
    </div>
</section>

Call-to-Action Grid

<div class="cta-grid">
    <h3>Get Started</h3>
    <div class="hoo-ql-grid col-2">
        <!-- Primary call-to-action buttons -->
    </div>
</div>

Accessibility

  • High Contrast: White text on dark background meets WCAG AA standards
  • Keyboard Navigation: Full keyboard navigation with visible focus indicators
  • Screen Reader Support: Clear button text and icon descriptions
  • Touch Targets: Minimum 44px touch target size for mobile accessibility
  • Color Independence: Doesn’t rely solely on color for meaning
  • Focus Management: Proper focus ring and keyboard interaction

Performance

  • Lightweight: Efficient CSS Grid implementation
  • No JavaScript: Pure CSS solution for optimal performance
  • Optimized Rendering: Minimal reflows and repaints
  • Icon Loading: Supports lazy loading for better initial page load

Grid Variations

Column Count Classes

  • .col-2: Two columns, ideal for primary actions
  • .col-3: Three columns, balanced layout
  • .col-4: Four columns, maximum density

Responsive Behavior

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

Button Variants

Style Modifiers

  • .filled: Filled background (default for this grid)
  • .oneline: Single-line text with ellipsis truncation
  • .center: Centered icon and text alignment

Size Variations

  • Standard: 62px minimum height
  • Large: 80px height for more prominent display
  • Compact: 48px height for dense layouts

Content Guidelines

Button Text

  • Keep text concise and action-oriented
  • Use verb phrases (e.g., “Create Document”, “Upload Files”)
  • Avoid technical jargon or unclear terminology
  • Test with different text lengths for consistency

Icon Selection

  • Use filled or outlined icons consistently
  • Ensure icons are recognizable at 24px size
  • Choose icons that clearly represent the action
  • Maintain consistent visual style across the grid

Browser Support

  • Modern Browsers: Full support in Chrome, Firefox, Safari, Edge
  • CSS Grid: Native grid layout support in all modern browsers
  • Flexbox Fallback: Progressive enhancement for older browsers
  • Mobile Browsers: Optimized for mobile and tablet interfaces

SCSS Import

Color Theming

Primary Theme (Default)

  • Background: #0078d4 (Microsoft Blue)
  • Hover: #106ebe (Darker Blue)
  • Text: #ffffff (White)

Custom Theme Support

Integration Examples

With Section Header

<section class="featured-actions">
    <header class="section-header">
        <h2>Featured Actions</h2>
        <p>Quick access to your most important tasks</p>
    </header>
    {{> organism-quick-links-button-filled-grid}}
</section>

Within Dashboard Card

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