Quick Links Tiles Grid

A responsive grid layout for displaying quick links as visual tiles with prominent images. Features large, touch-friendly tiles with customizable image sizes, optimized for visual navigation and app launchers.

Overview

The quick links tiles grid presents navigation items as large, visual tiles with prominent images, arranged in a responsive grid. This image-centric approach is ideal for app launchers, visual categories, or any navigation scenario where visual recognition is more important than text.

Features

• Image-Centric Design: Large, prominent images as primary visual element
• Multiple Image Sizes: Default, medium, large, and extra-large variants
• Responsive Grid: Adapts to different screen sizes and image sizes
• Touch Optimized: Large touch targets ideal for mobile and tablet interfaces
• Visual Recognition: Emphasis on visual elements over text
• Flexible Content: Supports both images and icon-based tiles

Structure

The component consists of:

1. Grid Container: .hoo-ql-grid - Main grid layout container
2. Grid Items: {{> molecules-ql-tiles-*}} - Individual tile components with varying image sizes
3. Image Variants: Support for default, medium, large, and extra-large image tiles

Data Structure

{
    "quick-links": [
        {
            "href": "/word",
            "title": "Microsoft Word",
            "qlimg": {
                "src": "/images/apps/word-128.png",
                "alt": "Microsoft Word application"
            }
        },
        {
            "href": "/excel", 
            "title": "Microsoft Excel",
            "qlimg": {
                "src": "/images/apps/excel-128.png",
                "alt": "Microsoft Excel application"
            }
        },
        {
            "href": "/powerpoint",
            "title": "Microsoft PowerPoint",
            "qlimg": {
                "src": "/images/apps/powerpoint-128.png",
                "alt": "Microsoft PowerPoint application"
            }
        }
    ]
}

Image Size Variants

Default Tiles

• Image Size: 64px × 64px
• Use Case: Standard app icons, dense layouts
• Grid Density: 6-8 columns on large screens

Medium Tiles (.img-m)

• Image Size: 96px × 96px
• Use Case: Featured apps, balanced visibility
• Grid Density: 4-6 columns on large screens

Large Tiles (.img-l)

• Image Size: 128px × 128px
• Use Case: Primary applications, high visibility
• Grid Density: 3-4 columns on large screens

Extra Large Tiles (.img-xl)

• Image Size: 160px × 160px
• Use Case: Hero applications, maximum impact
• Grid Density: 2-3 columns on large screens

CSS Classes

• .hoo-ql-grid: Main grid container
• .hoo-qltiles: Base tile styling
• .hoo-qltiles.img-m: Medium image tiles
• .hoo-qltiles.img-l: Large image tiles
• .hoo-qltiles.img-xl: Extra large image tiles

Styling

Grid Layout

The grid automatically adapts based on image size:

• Default: 6-8 columns on large screens
• Medium: 4-6 columns on large screens
• Large: 3-4 columns on large screens
• Extra Large: 2-3 columns on large screens

Visual Design

• Tile Background: White with subtle border
• Border Radius: 8px for modern appearance
• Padding: 16px around image and text
• Shadow: Subtle elevation on hover
• Image: Centered with consistent aspect ratio

Interactive States

• Default: Clean white background with border
• Hover: Subtle elevation with shadow
• Focus: Blue focus ring for keyboard accessibility
• Active: Pressed state with reduced elevation

Use Cases

Application Launcher

<section class="app-launcher">
    <h2>Applications</h2>
    <div class="hoo-ql-grid">
        <!-- Large app icons with .img-l variant -->
        {{#each office-applications}}
        {{> molecules-ql-tiles-large quick-link=this}}
        {{/each}}
    </div>
</section>

Service Portal

<div class="service-portal">
    <h3>IT Services</h3>
    <div class="hoo-ql-grid">
        <!-- Service category tiles with default size -->
        {{#each it-services}}
        {{> molecules-ql-tiles quick-link=this}}
        {{/each}}
    </div>
</div>

Product Categories

<section class="product-categories">
    <h2>Shop by Category</h2>
    <div class="hoo-ql-grid">
        <!-- Category tiles with medium images -->
        {{#each categories}}
        {{> molecules-ql-tiles-medium quick-link=this}}
        {{/each}}
    </div>
</section>

Featured Content

<div class="featured-content">
    <h3>Featured</h3>
    <div class="hoo-ql-grid">
        <!-- Hero content with extra large tiles -->
        {{#each featured-items}}
        {{> molecules-ql-tiles-xlarge quick-link=this}}
        {{/each}}
    </div>
</div>

Accessibility

• Image Alt Text: Descriptive alt text for all tile images
• Keyboard Navigation: Full keyboard navigation support
• Focus Indicators: Clear focus states for keyboard users
• Touch Targets: Large touch areas ideal for mobile interaction
• Screen Reader Support: Proper semantic structure and descriptions
• High Contrast: Good contrast between tile and background

Performance

Image Optimization

• Lazy Loading: Support for lazy loading tile images
• Responsive Images: Different image sizes for different screen densities
• Format Support: WebP with fallbacks for optimal loading
• Compression: Optimized images for web delivery

Rendering Performance

• CSS Grid: Efficient native layout system
• GPU Acceleration: Hardware-accelerated hover effects
• Minimal Reflows: Stable layout with consistent sizing

Responsive Behavior

Breakpoint Behavior

• Mobile: Single column or 2 columns depending on image size
• Small: 2-3 columns based on tile size
• Medium: 3-5 columns based on tile size
• Large: 4-8 columns based on tile size

Image Size Recommendations by Device

• Mobile: Default or medium sizes for optimal density
• Tablet: Medium or large sizes for touch interaction
• Desktop: Any size based on content hierarchy

Content Guidelines

Image Selection

• High Quality: Use crisp, high-resolution images
• Consistent Style: Maintain visual consistency across tiles
• Recognizable: Choose images that clearly represent the content
• Aspect Ratio: Square images work best (1:1 ratio)

Title Text

• Concise: Keep titles short and descriptive
• Clear: Use clear, non-technical language
• Consistent: Maintain consistent naming conventions
• Localization: Consider text expansion in other languages

Browser Support

• Modern Browsers: Full support in Chrome, Firefox, Safari, Edge
• CSS Grid: Native grid layout support
• Image Formats: WebP support with PNG/JPG fallbacks
• Touch Events: Optimized for touch and mouse interactions

Individual Tile Components

• molecules-ql-tiles: Default size tiles
• molecules-ql-tiles-medium: Medium image tiles
• molecules-ql-tiles-large: Large image tiles
• molecules-ql-tiles-xlarge: Extra large image tiles

Alternative Grid Components

• organism-quick-links-compact-grid: Minimal text-based alternative
• organism-quick-links-list-grid: Text-heavy alternative with descriptions
• organism-quick-links-button-filled-grid: Button-style alternative

SCSS Import

Image Size Configuration

CSS Custom Properties

Integration Examples

Mixed Size Layout

<section class="app-dashboard">
    <h2>Applications</h2>
    
    <!-- Featured apps with large tiles -->
    <div class="featured-apps">
        <h3>Featured</h3>
        <div class="hoo-ql-grid">
            {{#each featured-apps}}
            {{> molecules-ql-tiles-large quick-link=this}}
            {{/each}}
        </div>
    </div>
    
    <!-- All apps with default tiles -->
    <div class="all-apps">
        <h3>All Applications</h3>
        <div class="hoo-ql-grid">
            {{#each all-apps}}
            {{> molecules-ql-tiles quick-link=this}}
            {{/each}}
        </div>
    </div>
</section>

Responsive Image Loading

<a class="hoo-qllink" href="/app">
    <article class="hoo-qltiles img-l">
        <div class="hoo-ql-media">
            <img src="/apps/word-128.png" 
                 srcset="/apps/word-128.png 1x, /apps/word-256.png 2x"
                 alt="Microsoft Word" 
                 loading="lazy" />
        </div>
        <div class="hoo-qlinfo">
            <div class="hoo-qltitle">Microsoft Word</div>
        </div>
    </article>
</a>