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

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

<section class="secondary-nav">
    <h2>Tools & Resources</h2>
    <div class="hoo-ql-grid col-4">
        <!-- Secondary navigation options -->
    </div>
</section>

Settings & Configuration

<div class="settings-panel">
    <h3>Account Management</h3>
    <div class="hoo-ql-grid col-3">
        <!-- Settings and configuration options -->
    </div>
</div>

Support & Help

<section class="support-section">
    <h2>Get Help</h2>
    <div class="hoo-ql-grid col-2">
        <!-- Support and help resources -->
    </div>
</section>

Administrative Actions

<div class="admin-panel">
    <h3>Administration</h3>
    <div class="hoo-ql-grid">
        <!-- Admin tools and utilities -->
    </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

<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

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