@n8d/htwoo-patterns

--- 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">  {{#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">  {{#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">  {{#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">  {{#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>  <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>  <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> ```