@n8d/htwoo-patterns
Version:
hTWOo Patterns to setup custom style guide
46 lines (31 loc) • 1.52 kB
Markdown
---
title: Quick Link Tiles - Large
order: 23
---
# Quick Link Tiles - Large
Large-sized tile variant featuring 40px icons for maximum visual impact while maintaining usability. These tiles are ideal for primary applications and featured content that requires prominent display.
## Overview
Large tiles offer significant visual presence with enhanced icon sizing while maintaining the core tile design principles. They're perfect for primary navigation, featured applications, and dashboard highlights.
## Features
- **Icon Size**: 40px (2.5rem) for maximum visibility
- **High Prominence**: Significant visual weight and presence
- **Primary Use**: Featured content and main applications
- **Square Format**: Consistent 1:1 aspect ratio
- **Theme Integration**: Full theme color support
- **Touch Friendly**: Large touch targets for mobile
## Size Specifications
- **Icon**: 40px (2.5rem) - largest standard size
- **Visual Impact**: High prominence for primary content
- **Touch Target**: Excellent for mobile interfaces
- **Use Case**: Hero tiles, primary applications, main navigation
## CSS Classes
- `.hoo-qltiles`: Main tile container
- `.img-l`: Large icon size modifier
## Use Cases
- **Primary Applications**: Main application launchers
- **Featured Content**: Highlighted resources and tools
- **Dashboard Headers**: Primary dashboard navigation
- **Hero Sections**: Prominent placement in hero areas
## SCSS Files
**Quick Link Tile Styles:**
- `lib/sass/02-molecules/quicklinks/quicklinks-tiles`