@n8d/htwoo-patterns
Version:
hTWOo Patterns to setup custom style guide
47 lines (32 loc) • 1.69 kB
Markdown
---
title: Quick Link Button - Fill Center
order: 35
---
# 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