Components | Currenta Conneqtive

Sizing

Desktop

Mobile

3xs

2xs

xs

s

m

l

xl

2xl

3xl

You can use these sizing as paddings: p-xs, margins: mx-3xl, widths, sizes or heights.

Shadows

<div class="shadow-high">shadow-high

<div class="shadow-medium">shadow-medium

<div class="shadow-low">shadow-low

You can use these sizing as paddings: p-xs, margins: mx-3xl, widths, sizes or heights.

Colors

neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
neutral-950

link-default
link-hover
link-active
link-muted
link-focus

nav-default
nav-hover
nav-current
nav-text

type-default
type-reduced
type-inverse
type-inverse-reduced

state-error
state-error-bg
state-good
state-good-bg
state-warning
state-warning-bg
state-info
state-info-bg

brand-primary
brand-secondary

theme-1
theme-2
theme-3
theme-4
theme-5

Typography

Title Desktop

Title Mobile

Title

Heading Desktop

Heading Mobile

Heading

Heading Lite Desktop

Heading Lite Mobile

Heading Lite

Subheading Desktop

Subheading Mobile

Subheading

Subheading Semi Desktop

Subheading Semi Mobile

Subheading Semi

Subheading Semi Underline Desktop

Subheading Semi Underline Mobile

Subheading Semi Underline

Subheading Lite Desktop

Subheading Lite Mobile

Subheading Lite

Sub Subheading Desktop

Sub Subheading Mobile

Sub Subheading

Sub Subheading Semi Desktop

Sub Subheading Semi Mobile

Sub Subheading Semi

Sub Subheading Semi Underline Desktop

Sub Subheading Semi Underline Mobile

Sub Subheading Semi Underline

Sub Subheading Lite Desktop

Sub Subheading Lite Mobile

Sub Subheading Lite

In-Text Heading Desktop

In-Text Heading Mobile

In-Text Heading

In-Text Heading Semi Desktop

In-Text Heading Semi Mobile

In-Text Heading Semi

In-Text Heading Semi Underline Desktop

In-Text Heading Semi Underline Mobile

In-Text Heading Semi Underline

In-Text Heading Lite Desktop

In-Text Heading Lite Mobile

In-Text Heading Lite

Copy Strong Desktop

Copy Strong Mobile

Copy Strong

Copy Semi Desktop

Copy Semi Mobile

Copy Semi

Copy Semi Underline Desktop

Copy Semi Underline Mobile

Copy Semi Underline

Copy Desktop

Copy Mobile

Copy

Fineprint Strong Desktop

Fineprint Strong Mobile

Fineprint Strong

Fineprint Desktop

Fineprint Mobile

Fineprint

Fineprint Underline Desktop

Fineprint Underline Mobile

Fineprint Underline

Buttons

Buttons can have a leading-icon or you can use the #leading slot: <CqButton label="Button with leading icon" leading-icon="fa6-solid:angle-left" />

Buttons can have a trailing-icon or you can use the #trailing slot: <CqButton label="Button with trailing icon" trailing-icon="fa6-solid:angle-right" />

The buttons have three different variants: primary, secondary and ghost. These variants go into the variant attribute.

Chips

Chip default desktop

Chip default mobile

Chip default auto

Chip inverse desktop

Chip inverse mobile

Chip inverse auto

Chip solid desktop

Chip solid mobile

Chip solid auto

Chip with icon

Chips can have a leading-icon or you can use the #leading slot: <CqChip label="Chip with icon" leading-icon="fa6-solid:user" variant="solid" />

Chip with trailing icon

Chips can have a trailing-icon or you can use the #trailing slot: <CqChip label="Chip with trailing icon" trailing-icon="fa6-solid:angle-right" variant="solid" />

The chips have three different variants: default, inverse and solid. These variants go into the variant attribute.

Tab Items