🚧 Under Construction

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

Quick Link Button - No Outline Center

View in Pattern Lab

HTML Markup

<a class="hoo-qllink" href="?">
<article class="hoo-qlbtn no-outline center">
    <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 No Outline - Center Aligned

The Center Aligned No Outline Button provides a clean, minimal quick link with centered text alignment and no border styling. This variant offers maximum visual simplicity while maintaining clear interactivity and professional appearance.

Overview

The Center Aligned No Outline Button represents the most minimal approach to button-style quick links. By removing border elements and centering the content, it creates a clean, uncluttered interface perfect for modern layouts requiring subtle navigation elements.

Features

Minimal Design

  • No Borders: Clean appearance without outline or border elements
  • Center Alignment: Icon and text centered within button area
  • Subtle Background: Minimal background treatment for clean aesthetics
  • Clean Typography: Centered text with optimal readability

Layout Characteristics

  • Symmetric Design: Balanced content distribution
  • Grid Friendly: Consistent alignment within grid layouts
  • Flexible Sizing: Adapts to content while maintaining center alignment
  • Visual Balance: Even spacing around centered content

Interactive Features

  • Hover States: Subtle background changes on interaction
  • Focus Indicators: Clear keyboard focus without border reliance
  • Touch Optimization: Appropriate touch targets despite minimal styling
  • Smooth Transitions: Gentle animations for state changes

Structure

The component consists of:

  1. Container: .hoo-qlbutton.hoo-qlbutton-no-outline.hoo-qlbutton-center - Main button container
  2. Icon Area: .hoo-ql-media - Centered icon display
  3. Text Container: .hoo-qlinfo - Centered text wrapper
  4. Title: .hoo-qltitle - Primary link text

Design Principles

Visual Hierarchy

  • Content Focus: Emphasis on content rather than container
  • Subtle Presence: Minimal visual weight while maintaining functionality
  • Balanced Layout: Even distribution of visual elements
  • Clean Aesthetics: Modern, uncluttered appearance

Spacing and Alignment

  • Center Justified: All content centered within button bounds
  • Consistent Margins: Even spacing around content elements
  • Optical Balance: Visual weight distributed evenly
  • Grid Harmony: Aligned with grid systems and layout structures

Use Cases

  • Modern Dashboards: Clean, contemporary interface designs
  • Minimal Layouts: Interfaces prioritizing simplicity and clarity
  • Grid Systems: Uniform appearance within organized grids
  • Content Focused: Designs where content takes precedence over chrome
  • Professional Interfaces: Business applications requiring subtle navigation

Styling Features

Background Treatment

  • Transparent Base: Minimal background interference
  • Hover Enhancement: Subtle background on interaction
  • Theme Respect: Integrates with overall theme colors
  • Focus Clarity: Clear focus states without border dependence

Typography Treatment

  • Center Alignment: Text centered within available space
  • Optimal Sizing: Font size optimized for centered display
  • Clean Hierarchy: Clear text hierarchy without visual distractions
  • Readable Contrast: Sufficient contrast for accessibility

Accessibility

  • Keyboard Navigation: Full keyboard support and clear focus states
  • Screen Reader Friendly: Proper semantic structure and labels
  • Color Independence: Functionality not dependent on color alone
  • Touch Accessibility: Appropriate touch targets despite minimal styling
  • High Contrast Support: Functions well in high contrast modes

Theme Integration

  • Color Harmony: Respects theme color schemes
  • Consistent States: Theme-appropriate hover and focus states
  • Brand Alignment: Supports brand color integration
  • Mode Support: Functions across light, dark, and high contrast themes

Responsive Behavior

  • Container Adaptation: Responds to parent container constraints
  • Touch Optimization: Maintains usability across device types
  • Text Scaling: Responsive typography for different screen sizes
  • Layout Stability: Consistent center alignment across breakpoints

Performance

  • Efficient Rendering: Minimal CSS for optimal performance
  • Smooth Interactions: Hardware-accelerated hover effects
  • Layout Stability: Prevents reflow during state changes
  • Resource Efficiency: Lightweight implementation

SCSS Import