---
title: Quick Links Button Filled Grid
order: 50
---

# Quick Links Button Filled Grid

A responsive grid layout for displaying quick links as filled button elements. Features prominent button styling with filled backgrounds, optimized for high-visibility navigation and call-to-action scenarios.

## Overview

The quick links button filled grid presents navigation items as prominent, filled buttons arranged in a responsive grid. The filled background styling makes these links highly visible and suitable for primary navigation or important actions that need to stand out.

## Features

- **Filled Button Styling**: Prominent buttons with theme-colored backgrounds
- **Responsive Grid**: Adapts to different screen sizes and container widths
- **Icon Integration**: Supports both image and SVG icons with consistent sizing
- **High Visibility**: Filled backgrounds ensure links stand out prominently
- **Touch Optimized**: Large touch targets optimized for mobile interaction
- **Hover Effects**: Interactive feedback with darker background on hover

## Structure

The component consists of:
1. **Grid Container**: `.hoo-ql-grid` - Main grid layout container
2. **Grid Items**: `{{> molecules-ql-list-button-fill-oneline}}` - Individual filled button quick links
3. **Responsive Columns**: CSS Grid with responsive breakpoints

## Data Structure

```json
{
    "quick-links": [
        {
            "href": "/create-document",
            "title": "Create Document",
            "qlimg": {
                "src": "/icons/create-document.svg",
                "alt": "Create document icon"
            }
        },
        {
            "href": "/upload-files",
            "title": "Upload Files",
            "qlimg": {
                "src": "/icons/upload.svg",
                "alt": "Upload icon"
            }
        },
        {
            "href": "/schedule-meeting",
            "title": "Schedule Meeting",
            "qlimg": {
                "src": "/icons/calendar-add.svg",
                "alt": "Schedule meeting 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.filled`: Individual filled button styling
- `.hoo-qlbtn.filled.oneline`: Single-line text variant

## Styling

### Grid Layout
- **Default**: Auto-responsive columns based on content
- **Grid Gap**: 16px spacing between items
- **Min Column Width**: 180px minimum item width
- **Max Columns**: 4 columns maximum on large screens

### Visual Design
- **Button Background**: Theme primary color (`#0078d4`)
- **Text Color**: White (`#ffffff`) for contrast
- **Border**: 1px solid theme color with 4px border radius
- **Padding**: 16px internal spacing
- **Height**: 62px minimum for touch accessibility
- **Font Weight**: 600 (semi-bold) for prominence

### Interactive States
- **Default**: Theme background with white text
- **Hover**: Darker theme background (`#106ebe`)
- **Focus**: Keyboard focus ring for accessibility
- **Active**: Pressed state with subtle shadow
- **Disabled**: Reduced opacity and disabled state

## Use Cases

### Primary Actions Dashboard
```handlebars
<section class="primary-actions">
    <h2>Quick Actions</h2>
    <div class="hoo-ql-grid col-3">
        <!-- Create, Upload, Schedule actions -->
    </div>
</section>
```

### Application Launcher
```handlebars
<div class="app-launcher">
    <h3>Launch Applications</h3>
    <div class="hoo-ql-grid col-4">
        <!-- Featured application shortcuts -->
    </div>
</div>
```

### Service Portal
```handlebars
<section class="service-portal">
    <h2>IT Services</h2>
    <div class="hoo-ql-grid">
        <!-- IT service request buttons -->
    </div>
</section>
```

### Call-to-Action Grid
```handlebars
<div class="cta-grid">
    <h3>Get Started</h3>
    <div class="hoo-ql-grid col-2">
        <!-- Primary call-to-action buttons -->
    </div>
</div>
```

## Accessibility

- **High Contrast**: White text on dark background meets WCAG AA standards
- **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
- **Color Independence**: Doesn't rely solely on color for meaning
- **Focus Management**: Proper focus ring and keyboard interaction

## Performance

- **Lightweight**: Efficient CSS Grid implementation
- **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 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
- `.filled`: Filled background (default for this grid)
- `.oneline`: Single-line text with ellipsis truncation
- `.center`: Centered icon and text alignment

### Size Variations
- **Standard**: 62px minimum height
- **Large**: 80px height for more prominent display
- **Compact**: 48px height for dense layouts

## Content Guidelines

### Button Text
- Keep text concise and action-oriented
- Use verb phrases (e.g., "Create Document", "Upload Files")
- Avoid technical jargon or unclear terminology
- Test with different text lengths for consistency

### Icon Selection
- Use filled or outlined icons consistently
- Ensure icons are recognizable at 24px size
- Choose icons that clearly represent the action
- Maintain consistent visual style across the grid

## 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)
- **Background**: `#0078d4` (Microsoft Blue)
- **Hover**: `#106ebe` (Darker Blue)
- **Text**: `#ffffff` (White)

### Custom Theme Support

## Integration Examples

### With Section Header
```handlebars
<section class="featured-actions">
    <header class="section-header">
        <h2>Featured Actions</h2>
        <p>Quick access to your most important tasks</p>
    </header>
    {{> organism-quick-links-button-filled-grid}}
</section>
```

### Within Dashboard Card
```handlebars
<div class="dashboard-card">
    <div class="card-header">
        <h3>Quick Actions</h3>
    </div>
    <div class="card-body">
        {{> organism-quick-links-button-filled-grid}}
    </div>
</div>
```