🚧 Under Construction

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

Quick Link Button - No Outline Center One Line

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 One Line

A minimal button-style quick link with no border, centered content, and single-line title display. This variant provides the cleanest appearance while maintaining button-like interaction patterns.

Overview

The no-outline center one-line button offers the most minimal visual treatment while preserving button functionality. It’s ideal for clean interfaces where visual clutter needs to be minimized while maintaining interactive affordances.

Features

  • No Border: Completely transparent border styling
  • Minimal Visual Weight: Cleanest appearance in button family
  • Centered Layout: Vertical icon and text alignment
  • Single Line: Compact title with ellipsis truncation
  • Subtle Hover: Light background feedback on interaction
  • Clean Design: Maximum content focus

CSS Classes

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

Styling

  • Border: Transparent (remains transparent on hover)
  • Background: Transparent (default), subtle gray on hover
  • Text: Standard text color
  • Layout: Centered vertical arrangement

Use Cases

  • Minimal Interfaces: Clean, uncluttered designs
  • Content-First: Where content takes visual priority
  • Subtle Navigation: Background navigation options
  • Grid Systems: Clean grid layouts without visual borders

SCSS Import