@n8d/htwoo-patterns

--- title: Quick Links Button Filled Grid order: 50 --- # Quick Links Button Filled Grid A responsive grid layout for displaying quick links as filled button elements. Features prominent button styling with filled backgrounds, optimized for high-visibility navigation and call-to-action scenarios. ## Overview The quick links button filled grid presents navigation items as prominent, filled buttons arranged in a responsive grid. The filled background styling makes these links highly visible and suitable for primary navigation or important actions that need to stand out. ## Features - **Filled Button Styling**: Prominent buttons with theme-colored backgrounds - **Responsive Grid**: Adapts to different screen sizes and container widths - **Icon Integration**: Supports both image and SVG icons with consistent sizing - **High Visibility**: Filled backgrounds ensure links stand out prominently - **Touch Optimized**: Large touch targets optimized for mobile interaction - **Hover Effects**: Interactive feedback with darker background on hover ## Structure The component consists of: 1. **Grid Container**: `.hoo-ql-grid` - Main grid layout container 2. **Grid Items**: `{{> molecules-ql-list-button-fill-oneline}}` - Individual filled button quick links 3. **Responsive Columns**: CSS Grid with responsive breakpoints ## Data Structure ```json { "quick-links": [ { "href": "/create-document", "title": "Create Document", "qlimg": { "src": "/icons/create-document.svg", "alt": "Create document icon" } }, { "href": "/upload-files", "title": "Upload Files", "qlimg": { "src": "/icons/upload.svg", "alt": "Upload icon" } }, { "href": "/schedule-meeting", "title": "Schedule Meeting", "qlimg": { "src": "/icons/calendar-add.svg", "alt": "Schedule meeting 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-qlbtn.filled`: Individual filled button styling - `.hoo-qlbtn.filled.oneline`: Single-line text variant ## Styling ### Grid Layout - **Default**: Auto-responsive columns based on content - **Grid Gap**: 16px spacing between items - **Min Column Width**: 180px minimum item width - **Max Columns**: 4 columns maximum on large screens ### Visual Design - **Button Background**: Theme primary color (`#0078d4`) - **Text Color**: White (`#ffffff`) for contrast - **Border**: 1px solid theme color with 4px border radius - **Padding**: 16px internal spacing - **Height**: 62px minimum for touch accessibility - **Font Weight**: 600 (semi-bold) for prominence ### Interactive States - **Default**: Theme background with white text - **Hover**: Darker theme background (`#106ebe`) - **Focus**: Keyboard focus ring for accessibility - **Active**: Pressed state with subtle shadow - **Disabled**: Reduced opacity and disabled state ## Use Cases ### Primary Actions Dashboard ```handlebars <section class="primary-actions"> <h2>Quick Actions</h2> <div class="hoo-ql-grid col-3">  </div> </section> ``` ### Application Launcher ```handlebars <div class="app-launcher"> <h3>Launch Applications</h3> <div class="hoo-ql-grid col-4">  </div> </div> ``` ### Service Portal ```handlebars <section class="service-portal"> <h2>IT Services</h2> <div class="hoo-ql-grid">  </div> </section> ``` ### Call-to-Action Grid ```handlebars <div class="cta-grid"> <h3>Get Started</h3> <div class="hoo-ql-grid col-2">  </div> </div> ``` ## Accessibility - **High Contrast**: White text on dark background meets WCAG AA standards - **Keyboard Navigation**: Full keyboard navigation with visible focus indicators - **Screen Reader Support**: Clear button text and icon descriptions - **Touch Targets**: Minimum 44px touch target size for mobile accessibility - **Color Independence**: Doesn't rely solely on color for meaning - **Focus Management**: Proper focus ring and keyboard interaction ## Performance - **Lightweight**: Efficient CSS Grid implementation - **No JavaScript**: Pure CSS solution for optimal performance - **Optimized Rendering**: Minimal reflows and repaints - **Icon Loading**: Supports lazy loading for better initial page load ## Grid Variations ### Column Count Classes - `.col-2`: Two columns, ideal for primary actions - `.col-3`: Three columns, balanced layout - `.col-4`: Four columns, maximum density ### Responsive Behavior - **Mobile**: Single column stack (< 576px) - **Small**: 2 columns (576px - 768px) - **Medium**: 3 columns (768px - 992px) - **Large**: 4 columns (992px+) ## Button Variants ### Style Modifiers - `.filled`: Filled background (default for this grid) - `.oneline`: Single-line text with ellipsis truncation - `.center`: Centered icon and text alignment ### Size Variations - **Standard**: 62px minimum height - **Large**: 80px height for more prominent display - **Compact**: 48px height for dense layouts ## Content Guidelines ### Button Text - Keep text concise and action-oriented - Use verb phrases (e.g., "Create Document", "Upload Files") - Avoid technical jargon or unclear terminology - Test with different text lengths for consistency ### Icon Selection - Use filled or outlined icons consistently - Ensure icons are recognizable at 24px size - Choose icons that clearly represent the action - Maintain consistent visual style across the grid ## Browser Support - **Modern Browsers**: Full support in Chrome, Firefox, Safari, Edge - **CSS Grid**: Native grid layout support in all modern browsers - **Flexbox Fallback**: Progressive enhancement for older browsers - **Mobile Browsers**: Optimized for mobile and tablet interfaces ## SCSS Import ## Color Theming ### Primary Theme (Default) - **Background**: `#0078d4` (Microsoft Blue) - **Hover**: `#106ebe` (Darker Blue) - **Text**: `#ffffff` (White) ### Custom Theme Support ## Integration Examples ### With Section Header ```handlebars <section class="featured-actions"> <header class="section-header"> <h2>Featured Actions</h2> <p>Quick access to your most important tasks</p> </header> {{> organism-quick-links-button-filled-grid}} </section> ``` ### Within Dashboard Card ```handlebars <div class="dashboard-card"> <div class="card-header"> <h3>Quick Actions</h3> </div> <div class="card-body"> {{> organism-quick-links-button-filled-grid}} </div> </div> ```