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

{
    "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

<section class="user-menu">
    <h3>Account</h3>
    <div class="hoo-ql-grid col-3">
        <!-- Profile, settings, logout options -->
    </div>
</section>

Subtle Navigation

<nav class="secondary-nav">
    <div class="hoo-ql-grid col-5">
        <!-- Quiet navigation options -->
    </div>
</nav>

Footer Links

<footer class="page-footer">
    <div class="footer-links">
        <div class="hoo-ql-grid col-4">
            <!-- Footer navigation links -->
        </div>
    </div>
</footer>

Utility Actions

<div class="utility-panel">
    <h3>Quick Tools</h3>
    <div class="hoo-ql-grid">
        <!-- Utility and tool shortcuts -->
    </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

<section class="tools-section">
    <h3 class="section-title subtle">Quick Tools</h3>
    {{> organism-quick-links-button-no-outline-grid}}
</section>

Within Clean Layout

<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