@n8d/htwoo-patterns

--- title: Quick Links Button No Outline Grid order: 30 --- # Quick Links Button No Outline Grid A responsive grid layout for displaying quick links as button elements without outline borders. Features clean, minimal button styling optimized for subtle navigation and secondary actions. ## Overview The quick links button no outline grid presents navigation items as clean buttons without visible borders, arranged in a responsive grid. This minimal styling approach provides a subtle yet interactive navigation option that integrates seamlessly with clean, modern interfaces. ## Features - **No Outline Styling**: Clean buttons without visible borders or backgrounds - **Minimal Visual Weight**: Subtle appearance that doesn't compete with primary content - **Responsive Grid**: Adapts to different screen sizes and container widths - **Icon Integration**: Supports both image and SVG icons with consistent sizing - **Touch Optimized**: Appropriate touch targets with hover feedback - **Hover Effects**: Subtle background change on interaction ## Structure The component consists of: 1. **Grid Container**: `.hoo-ql-grid` - Main grid layout container 2. **Grid Items**: `{{> molecules-ql-button-no-outline}}` - Individual no-outline button quick links 3. **Responsive Columns**: CSS Grid with responsive breakpoints ## Data Structure ```json { "quick-links": [ { "href": "/profile", "title": "View Profile", "qlimg": { "src": "/icons/profile.svg", "alt": "Profile icon" } }, { "href": "/preferences", "title": "Preferences", "qlimg": { "src": "/icons/preferences.svg", "alt": "Preferences icon" } }, { "href": "/logout", "title": "Sign Out", "qlimg": { "src": "/icons/logout.svg", "alt": "Logout 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.no-outline`: No outline button variant ## Styling ### Grid Layout - **Default**: Auto-responsive columns based on content - **Grid Gap**: 12px spacing between items (smaller for minimal style) - **Min Column Width**: 140px minimum item width - **Max Columns**: 5 columns maximum on large screens ### Visual Design - **Button Background**: Transparent with no border - **Text Color**: Standard text color (`#323130`) - **Padding**: 12px vertical, 16px horizontal - **Height**: 48px minimum for touch accessibility - **Border Radius**: 4px for hover state background ### Interactive States - **Default**: Transparent background, standard text color - **Hover**: Light background (`#f3f2f1`) with subtle transition - **Focus**: Keyboard focus ring for accessibility - **Active**: Slightly darker background for pressed state - **Disabled**: Reduced opacity and disabled interactions ## Use Cases ### User Menu Options ```handlebars <section class="user-menu"> <h3>Account</h3> <div class="hoo-ql-grid col-3">  </div> </section> ``` ### Subtle Navigation ```handlebars <nav class="secondary-nav"> <div class="hoo-ql-grid col-5">  </div> </nav> ``` ### Footer Links ```handlebars <footer class="page-footer"> <div class="footer-links"> <div class="hoo-ql-grid col-4">  </div> </div> </footer> ``` ### Utility Actions ```handlebars <div class="utility-panel"> <h3>Quick Tools</h3> <div class="hoo-ql-grid">  </div> </div> ``` ## Accessibility - **Minimal Visual Cues**: Clear focus states compensate for minimal default styling - **Keyboard Navigation**: Full keyboard navigation with enhanced focus indicators - **Screen Reader Support**: Clear button text and icon descriptions - **Touch Targets**: Minimum 44px touch target size maintained - **Color Independence**: Doesn't rely on color alone for interaction cues - **Focus Management**: Strong focus indicators for keyboard users ## Performance - **Minimal CSS**: Lightweight styling with minimal visual effects - **No JavaScript**: Pure CSS implementation for optimal performance - **Efficient Rendering**: Minimal visual changes reduce repaints - **Icon Loading**: Supports lazy loading for better performance ## Grid Variations ### Column Count Classes - `.col-2`: Two columns, good for primary/secondary actions - `.col-3`: Three columns, balanced layout - `.col-4`: Four columns, compact presentation - `.col-5`: Five columns, maximum density for minimal styling ### Responsive Behavior - **Mobile**: Single column stack (< 576px) - **Small**: 2-3 columns (576px - 768px) - **Medium**: 3-4 columns (768px - 992px) - **Large**: 4-5 columns (992px+) ## Content Guidelines ### Button Text - Use clear, concise action words - Keep text short (1-2 words preferred) - Use sentence case for better readability - Ensure text provides sufficient context ### Icon Selection - Use subtle, recognizable icons - Maintain consistent icon weight/style - Ensure icons work well without strong borders - Provide meaningful alt text for accessibility ## Design Considerations ### When to Use No Outline - **Clean Interfaces**: When visual simplicity is paramount - **Secondary Actions**: For less prominent navigation options - **Dense Layouts**: When space efficiency is important - **Subtle Integration**: When buttons should blend with content ### When NOT to Use No Outline - **Primary Actions**: Use filled or outline buttons instead - **High Contrast Needs**: When stronger visual cues are required - **Complex Interfaces**: Where clear interactive elements are needed ## Browser Support - **Modern Browsers**: Full support in Chrome, Firefox, Safari, Edge - **CSS Grid**: Native grid layout support in all modern browsers - **Hover States**: CSS hover support in all modern browsers - **Mobile Browsers**: Optimized hover alternatives for touch interfaces ## SCSS Import ## Styling Customization ### Hover State ### Focus State ## Integration Examples ### With Minimal Section Header ```handlebars <section class="tools-section"> <h3 class="section-title subtle">Quick Tools</h3> {{> organism-quick-links-button-no-outline-grid}} </section> ``` ### Within Clean Layout ```handlebars <div class="clean-panel"> <div class="panel-content"> {{> organism-quick-links-button-no-outline-grid}} </div> </div> ``` ## Comparison with Other Variations ### vs. Compact Grid - **No Outline**: Button-like interaction, larger touch targets - **Compact**: Even more minimal, smaller visual footprint ### vs. Outline Grid - **No Outline**: Cleaner appearance, minimal visual weight - **Outline**: More prominent, clearer interactive cues ### vs. Filled Grid - **No Outline**: Subtle, secondary navigation - **Filled**: Primary actions, high visibility