p-xs
, margins: mx-3xl
, widths, sizes or heights. <div class="shadow-high">shadow-high</span>
<div class="shadow-medium">shadow-medium</span>
<div class="shadow-low">shadow-low</span>
p-xs
, margins: mx-3xl
, widths, sizes or heights. 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
<span class="font-title">Title</span>
<span class="font-heading">Heading</span>
<span class="font-heading-lite">Heading Lite</span>
<span class="font-subheading">Subheading</span>
<span class="font-subheading-semi">Subheading Semi</span>
<span class="font-subheading-semi-underline">Subheading Semi Underline</span>
<span class="font-subheading-lite">Subheading Lite</span>
<span class="font-sub-subheading">Sub Subheading</span>
<span class="font-sub-subheading-semi">Sub Subheading Semi</span>
<span class="font-sub-subheading-semi-underline">Sub Subheading Semi Underline</span>
<span class="font-sub-subheading-lite">Sub Subheading Lite</span>
<span class="font-intext-heading">In-Text Heading</span>
<span class="font-intext-heading-semi">In-Text Heading Semi</span>
<span class="font-intext-heading-semi-underline">In-Text Heading Semi Underline</span>
<span class="font-intext-heading-lite">In-Text Heading Lite</span>
<span class="font-copy-strong">Copy Strong</span>
<span class="font-copy-semi">Copy Semi</span>
<span class="font-copy-semi-underline">Copy Semi Underline</span>
<span class="font-copy">Copy</span>
<span class="font-fineprint-strong">Fineprint Strong</span>
<span class="font-fineprint">Fineprint</span>
<span class="font-fineprint-underline">Fineprint Underline</span>
#leading
slot: <CqButton label="Button with leading icon" leading-icon="fa6-solid:angle-left" />
#trailing
slot: <CqButton label="Button with trailing icon" trailing-icon="fa6-solid:angle-right" />
primary
, secondary
and ghost
. These variants go into the variant
attribute. #leading
slot: <CqChip label="Chip with icon" leading-icon="fa6-solid:user" variant="solid" />
#trailing
slot: <CqChip label="Chip with trailing icon" trailing-icon="fa6-solid:angle-right" variant="solid" />
default
, inverse
and solid
. These variants go into the variant
attribute. leading-icon
attribute or leading
slot to have something before the labeltrailing-icon
attribute or trailing
slot to have something after the labelGemanagte Infrastruktur & IoT-Lösungen abonnieren statt besitzen
Gemanagte Infrastruktur & IoT-Lösungen abonnieren statt besitzen
Gemanagte Infrastruktur & IoT-Lösungen abonnieren statt besitzen