---
title: Quick Links Tiles Grid
order: 20
---

# 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

```json
{
    "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
```handlebars
<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
```handlebars
<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
```handlebars
<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
```handlebars
<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
```handlebars
<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
```handlebars
<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>
```