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

Border color classes are powered by Aqua’s extended color palette, using predefined CSS variables. They provide a quick way to style element borders while maintaining consistency and accessibility in your UI.

Border color

<aside>

Lime

aq-border-lime-5

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

aq-border-lime-20

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

aq-border-lime-40

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

aq-border-lime-60

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

aq-border-lime-80

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

aq-border-lime-10

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

aq-border-lime-30

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

aq-border-lime-50

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

aq-border-lime-70

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

aq-border-lime-90

<span class="aq-border-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>