🚧 Under Construction

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

Quick Link Button - Outline Center One Line

View in Pattern Lab

HTML Markup

<a class="hoo-qllink" href="?">
<article class="hoo-qlbtn 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 - Outline Center One Line

A subtle button-style quick link with outline border, centered content, and single-line title display. This variant provides clear button appearance while maintaining visual subtlety.

Overview

The outline center one-line button offers button-like interaction with minimal visual weight. It uses border styling instead of filled backgrounds, making it ideal for secondary actions and complementary navigation.

Features

  • Outline Style: Border-only styling with transparent background
  • Centered Layout: Vertical icon and text alignment
  • Single Line: Compact title display with ellipsis
  • Subtle Appearance: Lower visual weight than filled variants
  • Hover Effects: Background color on interaction
  • Icon Integration: Centered icon positioning

CSS Classes

  • .hoo-qlbtn: Main button container
  • .oneline: Single-line text modifier
  • .center: Centered layout modifier

Styling

  • Border: Theme color outline (#0078d4)
  • Background: Transparent (default), light gray on hover
  • Text: Theme color text
  • Layout: Centered vertical arrangement

Use Cases

  • Secondary Actions: Supporting navigation options
  • Complementary Buttons: Alongside primary filled buttons
  • Clean Interfaces: Minimal visual weight requirements
  • Tool Palettes: Action selection interfaces

SCSS Import