@n8d/htwoo-patterns/_patterns/molecules/quick-links/ql-tiles-xlarge.md

hTWOo Patterns to setup custom style guide

---
title: Quick Link Tiles - XLarge
order: 24
---

# Quick Link Tiles - Extra Large

The largest tile variant featuring 48px icons for maximum visual impact and prominence. These tiles are designed for hero sections, primary navigation, and situations requiring the highest visual hierarchy.

## Overview

Extra Large tiles represent the pinnacle of visual prominence in the quick links family. With 48px icons and maximum visual weight, they're reserved for the most important content and primary user pathways.

## Features

- **Icon Size**: 48px (3rem) - maximum size for optimal impact
- **Maximum Prominence**: Highest visual hierarchy level
- **Hero Placement**: Designed for prominent interface areas
- **Touch Optimized**: Excellent touch targets for all devices
- **Theme Colors**: Full theme color integration
- **Accessibility**: Large targets meet all accessibility guidelines

## Size Specifications

- **Icon**: 48px (3rem) - largest available size
- **Visual Hierarchy**: Maximum prominence level
- **Accessibility**: Exceeds minimum touch target requirements
- **Use Case**: Hero tiles, primary actions, featured showcases

## CSS Classes

- `.hoo-qltiles`: Main tile container
- `.img-xl`: Extra large icon size modifier

## Use Cases

- **Hero Sections**: Primary hero area navigation
- **Landing Pages**: Main application entry points
- **Featured Showcases**: Highlighted content and applications
- **Primary Actions**: Most important user actions

## Design Considerations

- **Spacing**: Requires adequate spacing due to large size
- **Hierarchy**: Use sparingly to maintain visual hierarchy
- **Content**: Reserve for most important applications/content
- **Layout**: Consider grid impact and responsive behavior

## SCSS Files

**Quick Link Tile Styles:**
- `lib/sass/02-molecules/quicklinks/quicklinks-tiles`