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

Background color classes use the same extended color palette, mapped through Aqua’s CSS variables. These classes make it easy to apply consistent background tones to any element while aligning with your project’s theme.

Background

<aside>

Lime

aq-background-lime-5

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

aq-background-lime-20

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

aq-background-lime-40

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

aq-background-lime-60

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

aq-background-lime-80

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

aq-background-lime-10

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

aq-background-lime-30

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

aq-background-lime-50

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

aq-background-lime-70

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

aq-background-lime-90

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

</aside>

<aside>

Green

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>