---
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">
        <!-- Secondary navigation options -->
    </div>
</section>
```

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

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

### Administrative Actions
```handlebars
<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
```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>
```