🚧 Under Construction

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

Quick Link Button - Fill Center

View in Pattern Lab

HTML Markup

<a class="hoo-qllink" href="?">
<article class="hoo-qlbtn filled 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 - Filled Center

A prominent button-style quick link with filled background, centered content, and multi-line title support. This variant provides maximum visual impact while allowing for more descriptive content.

Overview

The filled center button offers the highest visual prominence in the quick link family, combining theme-colored backgrounds with centered layouts and flexible text display. It’s perfect for primary actions and featured content.

Features

  • Filled Background: Theme-colored background with white text
  • Centered Layout: Vertical stacking of icon and text content
  • Multi-line Support: Up to 2 lines for title with optional description
  • Visual Prominence: Highest contrast and visual weight
  • Icon Integration: Centered icon display above text
  • Hover Effects: Interactive feedback with enhanced contrast

Key Differences from One-Line Variant

  • Text Lines: Supports 2-line titles vs single line
  • Description: Optional description field available
  • Height: Taller to accommodate additional content
  • Use Case: More descriptive content vs compact actions

CSS Classes

  • .hoo-qlbtn: Main button container
  • .filled: Filled background modifier
  • .center: Centered layout modifier
  • .hoo-qltitle: Title text (2-line clamp)
  • .hoo-qldesc: Description text (2-line clamp)

Use Cases

  • Primary Actions: Main call-to-action buttons
  • Featured Content: Highlighted applications or sections
  • Dashboard Cards: Prominent dashboard elements
  • Hero Buttons: Primary navigation in hero sections

SCSS Import