Sizing
Desktop
Mobile
3xs
3xs
2xs
2xs
xs
xs
s
s
m
m
l
l
xl
xl
2xl
2xl
3xl
3xl
You can use these sizing as paddings: p-xs, margins: mx-3xl, widths, sizes or heights.
Shadows
<div class="shadow-high">shadow-high</span>
<div class="shadow-medium">shadow-medium</span>
<div class="shadow-low">shadow-low</span>
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
<span class="font-title">Title</span>
Heading Desktop
Heading Mobile
<span class="font-heading">Heading</span>
Heading Lite Desktop
Heading Lite Mobile
<span class="font-heading-lite">Heading Lite</span>
Subheading Desktop
Subheading Mobile
<span class="font-subheading">Subheading</span>
Subheading Semi Desktop
Subheading Semi Mobile
<span class="font-subheading-semi">Subheading Semi</span>
Subheading Semi Underline Desktop
Subheading Semi Underline Mobile
<span class="font-subheading-semi-underline">Subheading Semi Underline</span>
Subheading Lite Desktop
Subheading Lite Mobile
<span class="font-subheading-lite">Subheading Lite</span>
Sub Subheading Desktop
Sub Subheading Mobile
<span class="font-sub-subheading">Sub Subheading</span>
Sub Subheading Semi Desktop
Sub Subheading Semi Mobile
<span class="font-sub-subheading-semi">Sub Subheading Semi</span>
Sub Subheading Semi Underline Desktop
Sub Subheading Semi Underline Mobile
<span class="font-sub-subheading-semi-underline">Sub Subheading Semi Underline</span>
Sub Subheading Lite Desktop
Sub Subheading Lite Mobile
<span class="font-sub-subheading-lite">Sub Subheading Lite</span>
In-Text Heading Desktop
In-Text Heading Mobile
<span class="font-intext-heading">In-Text Heading</span>
In-Text Heading Semi Desktop
In-Text Heading Semi Mobile
<span class="font-intext-heading-semi">In-Text Heading Semi</span>
In-Text Heading Semi Underline Desktop
In-Text Heading Semi Underline Mobile
<span class="font-intext-heading-semi-underline">In-Text Heading Semi Underline</span>
In-Text Heading Lite Desktop
In-Text Heading Lite Mobile
<span class="font-intext-heading-lite">In-Text Heading Lite</span>
Copy Strong Desktop
Copy Strong Mobile
<span class="font-copy-strong">Copy Strong</span>
Copy Semi Desktop
Copy Semi Mobile
<span class="font-copy-semi">Copy Semi</span>
Copy Semi Underline Desktop
Copy Semi Underline Mobile
<span class="font-copy-semi-underline">Copy Semi Underline</span>
Copy Desktop
Copy Mobile
<span class="font-copy">Copy</span>
Fineprint Strong Desktop
Fineprint Strong Mobile
<span class="font-fineprint-strong">Fineprint Strong</span>
Fineprint Desktop
Fineprint Mobile
<span class="font-fineprint">Fineprint</span>
Fineprint Underline Desktop
Fineprint Underline Mobile
<span class="font-fineprint-underline">Fineprint Underline</span>
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
Alternatively you can use leading-icon attribute or leading slot to have something before the label
Or you can use trailing-icon attribute or trailing slot to have something after the label
Accordions

Labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.

Labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.

Labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.

Pagination
12 Seiten
12 Seiten
12 Seiten
Language Switch
EN
DE
FR
ES
EN
DE
FR
ES
EN
DE
FR
ES
Cards
Alles as a Service

Gemanagte Infrastruktur & IoT-Lösungen abonnieren statt besitzen

Alles as a Service

Gemanagte Infrastruktur & IoT-Lösungen abonnieren statt besitzen

Alles as a Service

Gemanagte Infrastruktur & IoT-Lösungen abonnieren statt besitzen

Tab Bar
Footers
Icons
wer-wir-sind
thumbs-up
network-wired
wifi
server
gears
question
triangle-exclamation
comments
newspaper
handshake
quote-left
calendar
at
shield
check-double
angles-right
truck-fast
screwdriver-wrench
mobile
cloud-arrow-up
laptop-mobile
conveyor-belt-boxes
chart-network
buildings
truck
shuffle
cloud
book-font
people-group
puzzle
it-infrastructure
iot-solutions
nfc-signal
check
instagram
linked-in
conneqtive-logo
chevron-left
chevron-right
x-circle
envelope-open-text
fa6-solid:chevron-right