@n8d/htwoo-patterns

--- title: Quick Links Button Outline Grid order: 70 --- # Quick Links Button Outline Grid A responsive grid layout for displaying quick links as outlined button elements. Features clean button styling with outline borders, optimized for secondary navigation and subtle call-to-action scenarios. ## Overview The quick links button outline grid presents navigation items as outlined buttons arranged in a responsive grid. The outline styling provides a clean, professional appearance that works well for secondary navigation or when you need prominent links without the visual weight of filled buttons. ## Features - **Outline Button Styling**: Clean buttons with outline borders and transparent backgrounds - **Responsive Grid**: Adapts to different screen sizes and container widths - **Icon Integration**: Supports both image and SVG icons with consistent sizing - **Subtle Prominence**: More prominent than text links, less than filled buttons - **Touch Optimized**: Appropriate touch targets optimized for mobile interaction - **Hover Effects**: Interactive feedback with background fill on hover ## Structure The component consists of: 1. **Grid Container**: `.hoo-ql-grid` - Main grid layout container 2. **Grid Items**: `{{> molecules-ql-button-outline}}` - Individual outlined button quick links 3. **Responsive Columns**: CSS Grid with responsive breakpoints ## Data Structure ```json { "quick-links": [ { "href": "/reports", "title": "View Reports", "qlimg": { "src": "/icons/reports.svg", "alt": "Reports icon" } }, { "href": "/settings", "title": "Settings", "qlimg": { "src": "/icons/settings.svg", "alt": "Settings icon" } }, { "href": "/help", "title": "Help & Support", "qlimg": { "src": "/icons/help.svg", "alt": "Help 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`: Individual button base styling - `.hoo-qlbtn.outline`: Outline button variant ## Styling ### Grid Layout - **Default**: Auto-responsive columns based on content - **Grid Gap**: 16px spacing between items - **Min Column Width**: 160px minimum item width - **Max Columns**: 4 columns maximum on large screens ### Visual Design - **Button Background**: Transparent with theme-colored border - **Border**: 1px solid theme color (`#0078d4`) with 4px border radius - **Text Color**: Theme color (`#0078d4`) for consistency - **Padding**: 12px vertical, 16px horizontal - **Height**: 54px minimum for touch accessibility ### Interactive States - **Default**: Transparent background with colored border and text - **Hover**: Filled background with theme color, white text - **Focus**: Keyboard focus ring for accessibility - **Active**: Pressed state with subtle shadow - **Disabled**: Reduced opacity and disabled state ## Use Cases ### Secondary Navigation ```handlebars <section class="secondary-nav"> <h2>Tools & Resources</h2> <div class="hoo-ql-grid col-4">  </div> </section> ``` ### Settings & Configuration ```handlebars <div class="settings-panel"> <h3>Account Management</h3> <div class="hoo-ql-grid col-3">  </div> </div> ``` ### Support & Help ```handlebars <section class="support-section"> <h2>Get Help</h2> <div class="hoo-ql-grid col-2">  </div> </section> ``` ### Administrative Actions ```handlebars <div class="admin-panel"> <h3>Administration</h3> <div class="hoo-ql-grid">  </div> </div> ``` ## Accessibility - **Color Contrast**: Meets WCAG AA standards for text and border colors - **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 - **Focus Management**: Proper focus ring and keyboard interaction - **State Communication**: Clear visual feedback for all interactive states ## Performance - **Lightweight**: Efficient CSS implementation with minimal overhead - **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/secondary 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 - `.outline`: Outline border styling (default for this grid) - `.center`: Centered icon and text alignment - `.oneline`: Single-line text with ellipsis truncation ### Size Variations - **Standard**: 54px minimum height - **Large**: 68px height for more prominent display - **Compact**: 42px height for dense layouts ## Content Guidelines ### Button Text - Use clear, action-oriented language - Keep text concise (1-3 words preferred) - Use sentence case for better readability - Ensure text is descriptive and specific ### Icon Selection - Choose icons that clearly represent the action or destination - Use consistent icon style (outline or filled) - Ensure icons are recognizable at 24px size - Provide meaningful alt text for accessibility ## 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) - **Border**: `#0078d4` (Microsoft Blue) - **Text**: `#0078d4` (Microsoft Blue) - **Hover Background**: `#0078d4` (Microsoft Blue) - **Hover Text**: `#ffffff` (White) ### Custom Theme Support ## Interaction Design ### Hover Animation ### Focus Indicators - Clear focus ring for keyboard navigation - High contrast focus indicators - Maintained hover state during focus ## Integration Examples ### With Section Header ```handlebars <section class="tools-section"> <header class="section-header"> <h2>Administrative Tools</h2> <p>Manage your account and preferences</p> </header> {{> organism-quick-links-button-outline-grid}} </section> ``` ### Within Dashboard Panel ```handlebars <div class="dashboard-panel"> <div class="panel-header"> <h3>Quick Tools</h3> </div> <div class="panel-body"> {{> organism-quick-links-button-outline-grid}} </div> </div> ```