@n8d/htwoo-patterns

--- title: Quick Links List Grid order: 60 --- # Quick Links List Grid A responsive grid layout for displaying quick links in list format. Features clean list-style presentation with icon, title, and optional description text, optimized for informational navigation scenarios. ## Overview The quick links list grid presents navigation items in a clean, list-style format with icon, title, and optional description. This format provides more context than compact versions while maintaining visual clarity and efficient use of space. ## Features - **List-Style Format**: Clean presentation with icon, title, and description - **Optional Descriptions**: Flexible content with or without description text - **Responsive Grid**: Adapts to different screen sizes and container widths - **Icon Integration**: Supports both image and SVG icons with consistent sizing - **Content Flexibility**: Accommodates varying text lengths gracefully - **Hover Effects**: Subtle interactive feedback with background changes ## Structure The component consists of: 1. **Grid Container**: `.hoo-ql-grid` - Main grid layout container 2. **Grid Items**: `{{> molecules-ql-list-item}}` - Individual list-style quick links 3. **Responsive Columns**: CSS Grid with responsive breakpoints ## Data Structure ```json { "quick-links": [ { "href": "/employee-handbook", "title": "Employee Handbook", "description": "Policies, procedures, and company guidelines", "qlimg": { "src": "/icons/handbook.svg", "alt": "Handbook icon" } }, { "href": "/benefits", "title": "Benefits Portal", "description": "Health insurance, retirement, and wellness programs", "qlimg": { "src": "/icons/benefits.svg", "alt": "Benefits icon" } }, { "href": "/time-off", "title": "Request Time Off", "description": "Submit vacation and sick leave requests", "qlimg": { "src": "/icons/calendar.svg", "alt": "Calendar icon" } } ] } ``` ## CSS Classes - `.hoo-ql-grid`: Main grid container - `.hoo-ql-grid.col-2`: Two-column grid layout - `.hoo-ql-grid.col-3`: Three-column grid layout - `.hoo-ql-grid.col-4`: Four-column grid layout - `.hoo-qllist`: Individual list item styling - `.hoo-qllist.no-desc`: List item without description ## Styling ### Grid Layout - **Default**: Auto-responsive columns based on content - **Grid Gap**: 16px spacing between items - **Min Column Width**: 240px minimum item width - **Max Columns**: 3 columns maximum on large screens ### Visual Design - **Item Background**: White with subtle border (`#d1d1d1`) - **Border Radius**: 4px for modern appearance - **Padding**: 16px internal spacing - **Typography**: 14px title, 12px description - **Icon Size**: 32px for better visual prominence ### Layout Structure - **Direction**: Horizontal layout with icon on left - **Alignment**: Icon and text vertically centered - **Spacing**: 12px gap between icon and text content - **Text Stack**: Title above description in text area ## Use Cases ### Resource Directory ```handlebars <section class="resource-directory"> <h2>Employee Resources</h2> <div class="hoo-ql-grid col-3">  </div> </section> ``` ### Information Portal ```handlebars <div class="info-portal"> <h3>Information Center</h3> <div class="hoo-ql-grid">  </div> </div> ``` ### Service Catalog ```handlebars <section class="service-catalog"> <h2>Available Services</h2> <div class="hoo-ql-grid col-2">  </div> </section> ``` ### Knowledge Base ```handlebars <nav class="knowledge-base"> <h3>Knowledge Base</h3> <div class="hoo-ql-grid col-3">  </div> </nav> ``` ## Accessibility - **Semantic Structure**: Uses proper link elements with descriptive text - **Keyboard Navigation**: Full keyboard navigation support - **Screen Reader Support**: Clear titles and descriptions for context - **Focus Management**: Visible focus indicators for keyboard users - **Touch Targets**: Minimum 44px touch target size - **Content Hierarchy**: Clear visual hierarchy with title and description ## Performance - **Lightweight**: Minimal CSS and HTML structure - **CSS Grid**: Modern, efficient layout with native browser support - **No JavaScript**: Pure CSS implementation for optimal performance - **Content Loading**: Supports progressive loading of descriptions ## Grid Variations ### Column Count Classes - `.col-2`: Two columns, ideal for detailed descriptions - `.col-3`: Three columns, balanced layout - `.col-4`: Four columns, more compact presentation ### Responsive Breakpoints - **Mobile**: Single column (< 576px) - **Small**: 2 columns (576px - 768px) - **Medium**: 2-3 columns (768px - 992px) - **Large**: 3-4 columns (992px+) ## Content Flexibility ### With Descriptions ```handlebars <a class="hoo-qllink" href="/resource"> <article class="hoo-qllist"> <div class="hoo-ql-media"> <img src="/icon.svg" alt="Resource icon" /> </div> <div class="hoo-qlinfo"> <div class="hoo-qltitle">Resource Title</div> <div class="hoo-qldesc">Detailed description of the resource</div> </div> </article> </a> ``` ### Without Descriptions ```handlebars <a class="hoo-qllink" href="/resource"> <article class="hoo-qllist no-desc"> <div class="hoo-ql-media"> <img src="/icon.svg" alt="Resource icon" /> </div> <div class="hoo-qlinfo"> <div class="hoo-qltitle">Resource Title</div> </div> </article> </a> ``` ## Content Guidelines ### Title Text - Keep titles descriptive but concise - Use sentence case for better readability - Avoid technical jargon when possible - Ensure titles are unique and meaningful ### Description Text - Provide helpful context about the link destination - Keep descriptions to 1-2 sentences - Use active voice when possible - Avoid repeating the title text ### Icon Selection - Use icons that clearly represent the content or action - Maintain consistent icon style throughout the grid - Ensure icons are recognizable at 32px size - Provide meaningful alt text for accessibility ## Browser Support - **Modern Browsers**: Full CSS Grid support in Chrome, Firefox, Safari, Edge - **Legacy Support**: Flexbox fallback for older browsers - **Mobile Browsers**: Optimized for mobile and tablet interfaces - **Progressive Enhancement**: Graceful degradation on older browsers ## SCSS Import ## Interactive States ### Default State - Clean white background with subtle border - Standard text colors and icon appearance - No visual elevation or shadow ### Hover State - Light background tint (`#f3f2f1`) - Subtle border color change - Smooth transition animation ### Focus State - Blue focus ring for keyboard navigation - Maintained hover state styling - Clear visual indicator for accessibility ## Integration Examples ### With Section Header ```handlebars <section class="resources-section"> <header class="section-header"> <h2>Employee Resources</h2> <p>Access important documents and information</p> </header> {{> organism-quick-links-list-grid}} </section> ``` ### Within Card Layout ```handlebars <div class="dashboard-card"> <div class="card-header"> <h3>Quick Links</h3> </div> <div class="card-body"> {{> organism-quick-links-list-grid}} </div> </div> ```