🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Quick Link Button - Fill One Line

HTML Markup

<a class="hoo-qllink" href="?">
<article class="hoo-qlbtn filled one-line">
    <figure class="hoo-ql-media">
        <img src="/htwoo-core/images/placeholders/ph-16by9.png" class="hoo-ql-img" alt="" loading="lazy">
    </figure>
    <div class="hoo-qlinfo">
        <div class="hoo-qltitle">This is a really long title to get everything working lorem ipsum dolor sit amet</div>
        <div class="hoo-qldesc">Quick-links description lorem ipsum dolor sit amet</div>
    </div>
</article></a>

Quick Link Button Fill - One Line

The One Line Fill Button quick link provides a compact, single-line interface with solid background styling for quick access to resources. This variant maximizes space efficiency while maintaining strong visual presence and clear actionability.

Overview

The One Line Fill Button combines the visual prominence of filled buttons with space-efficient single-line text display. This variant is ideal for dense layouts, toolbars, and interfaces requiring compact yet visually distinct quick access elements.

Features

Compact Design

Single Line Text: Title truncated with ellipsis for long names
Fixed Height: Consistent vertical dimensions for grid alignment
Space Efficient: Maximized information density
Clean Truncation: Elegant text overflow handling

Visual Styling

Solid Background: Filled button style with theme colors
Icon Integration: 24px icons with optimized spacing
Typography: Single line title with proper font sizing
Interactive States: Hover and focus feedback with color changes

Layout Features

Grid Compatible: Designed for consistent grid arrangements
Flexible Width: Adapts to container and content constraints
Uniform Height: Consistent button height across components
Touch Optimized: Appropriate touch targets for mobile use

Structure

The component consists of:

Container: .hoo-qlbutton.hoo-qlbutton-fill - Main filled button container
Icon Area: .hoo-ql-media - Icon display area
Text Container: .hoo-qlinfo - Single-line text wrapper
Title: .hoo-qltitle - Truncated primary text

Styling Features

Text Handling

Ellipsis Truncation: Graceful handling of long titles
Single Line Display: white-space: nowrap prevents wrapping
Consistent Height: Fixed line height for uniform appearance
Readable Typography: Optimized font size and weight

Background Treatment

Solid Fill: Strong background color for visual prominence
Theme Integration: Uses primary or accent theme colors
Hover Enhancement: Darker/lighter background on interaction
Focus States: Clear keyboard focus indicators

Use Cases

Compact Toolbars: Space-constrained navigation areas
Dense Grids: High-density layout requirements
Mobile Interfaces: Touch-optimized compact navigation
Dashboard Panels: Quick actions within limited space
Sidebar Navigation: Compact vertical navigation menus

Responsive Behavior

Mobile Optimization: Touch-friendly sizing and spacing
Container Adaptation: Flexes to available space
Grid Integration: Maintains consistent grid proportions
Text Scaling: Responsive text sizing based on container

Accessibility

Button Semantics: Proper button role and behavior
Keyboard Navigation: Full keyboard support and focus management
Screen Reader Support: Descriptive text and ARIA labels
Color Contrast: High contrast for text on background
Touch Accessibility: Minimum touch target requirements