---
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">
        <!-- Profile, settings, logout options -->
    </div>
</section>
```

### Subtle Navigation
```handlebars
<nav class="secondary-nav">
    <div class="hoo-ql-grid col-5">
        <!-- Quiet navigation options -->
    </div>
</nav>
```

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

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