@n8d/htwoo-patterns/_patterns/molecules/quick-links/ql-list-button-no-outline-center-oneline.md

hTWOo Patterns to setup custom style guide

---
title: Quick Link Button - No Outline Center One Line
order: 34
---

# 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