Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons

FAQ

Aqua Basis

Aqua Composition

Text color classes are built on the extended color palette and leverage Aqua’s CSS variables. They allow you to apply semantic and extended colors directly to text, ensuring visual consistency across your application.

Colors

<aside>

Lime

.aq-text-lime-5

<span class="aq-text-lime-5">Hello Aqua</span>

.aq-text-lime-20

<span class="aq-text-lime-20">Hello Aqua</span>

.aq-text-lime-40

<span class="aq-text-lime-40">Hello Aqua</span>

.aq-text-lime-60

<span class="aq-text-lime-60">Hello Aqua</span>

.aq-text-lime-80

<span class="aq-text-lime-80">Hello Aqua</span>

.aq-text-lime-10

<span class="aq-text-lime-10">Hello Aqua</span>

.aq-text-lime-30

<span class="aq-text-lime-30">Hello Aqua</span>

.aq-text-lime-50

<span class="aq-text-lime-50">Hello Aqua</span>

.aq-text-lime-70

<span class="aq-text-lime-70">Hello Aqua</span>

.aq-text-lime-90

<span class="aq-text-lime-90">Hello Aqua</span>

</aside>

<aside>

Green

.aq-text-green-5

<span class="aq-text-green-5">Hello Aqua</span>

.aq-text-green-20

<span class="aq-text-green-20">Hello Aqua</span>

.aq-text-green-40

<span class="aq-text-green-40">Hello Aqua</span>

.aq-text-green-60

<span class="aq-text-green-60">Hello Aqua</span>

.aq-text-green-80

<span class="aq-text-green-80">Hello Aqua</span>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>