Styleguide

Spacing system

200px - $spacer * 12.5 - 13

160px - $spacer * 10 - 12

120px - $spacer * 7.5 - 11

80px - $spacer * 5 - 10

72px - $spacer * 4.5 - 9

64px - $spacer * 4 - 8

48px - $spacer * 3 - 7

40px - $spacer * 2.5 - 6

32px - $spacer * 2 - 5

24px - $spacer * 1.5 - 4

16px - $spacer - 3

12px - $spacer * 0.75 - standard

8px - $spacer * 0.5 - 2

4px - $spacer * 0.25 - 1

0px - $spacer * 0 - 0

Headings

heading-3xl

heading-xxl, h1

heading-xl, h2

heading-lg, h3

heading-md, h4

heading-sm, h5

heading-xs, h6

heading-xxs

heading-3xs

heading-4xs

heading-5xs

heading-6xs

Texts

body-xl

body-lg

body-md

body-sm

body-xs

Colors

text-white
text-primary-900
text-primary-800
text-primary-700
text-primary-600
text-primary
text-primary-400
text-primary-300
text-primary-200
text-primary-100
text-info-900
text-info-800
text-info-700
text-info-600
text-info
text-info-400
text-info-300
text-info-200
text-info-100
text-warning-900
text-warning-800
text-warning-700
text-warning-600
text-warning
text-warning-400
text-warning-300
text-warning-200
text-warning-100
text-error-900
text-error-800
text-error-700
text-error-600
text-error
text-error-400
text-error-300
text-error-200
text-error-100
text-default
text-grey-20
text-grey-30
text-grey-40
text-grey
text-grey-60
text-grey-70
text-grey-80
text-grey-90
text-grey-95

Backgrounds

bg-white
bg-primary-900
bg-primary-800
bg-primary-700
bg-primary-600
bg-primary
bg-primary-400
bg-primary-300
bg-primary-200
bg-primary-100
bg-info-900
bg-info-800
bg-info-700
bg-info-600
bg-info
bg-info-400
bg-info-300
bg-info-200
bg-info-100
bg-warning-900
bg-warning-800
bg-warning-700
bg-warning-600
bg-warning
bg-warning-400
bg-warning-300
bg-warning-200
bg-warning-100
bg-error-900
bg-error-800
bg-error-700
bg-error-600
bg-error
bg-error-400
bg-error-300
bg-error-200
bg-error-100
bg-default
bg-grey-20
bg-grey-30
bg-grey-40
bg-grey
bg-grey-60
bg-grey-70
bg-grey-80
bg-grey-90
bg-grey-95

Buttons

PrimarySecondary LightTertiary LightPrimary DarkTertiary Dark
no iconwith iconno iconwith iconno iconwith iconno iconwith iconno iconwith icon
defaultdefault
hover
active
disabled
Classesbtn btn-primarybtn btn-primary btn--iconbtn btn-secondarybtn btn-secondary btn--iconbtn btn-tertiarybtn btn-tertiary btn--iconbtn btn-primary-darkbtn btn-primary-dark btn--iconbtn btn-tertiary-darkbtn btn-tertiary-dark btn--icon
smalldefault
hover
active
disabled
Classesbtn btn-primary btn-smbtn btn-primary btn-sm btn--iconbtn btn-secondary btn-smbtn btn-secondary btn-sm btn--iconbtn btn-tertiary btn-smbtn btn-tertiary btn-sm btn--iconbtn btn-primary-dark btn-smbtn btn-primary-dark btn-sm btn--iconbtn btn-tertiary-dark btn-smbtn btn-tertiary-dark btn-sm btn--icon
largedefault
hover
active
disabled
Classesbtn btn-primary btn-lgbtn btn-primary btn-lg btn--iconbtn btn-secondary btn-lgbtn btn-secondary btn-lg btn--iconbtn btn-tertiary btn-lgbtn btn-tertiary btn-lg btn--iconbtn btn-primary-dark btn-lgbtn btn-primary-dark btn-lg btn--iconbtn btn-tertiary-dark btn-lgbtn btn-tertiary-dark btn-lg btn--icon

Textlinks

no iconwith icon (left)with icon (right)
defaulttextlinktextlinktextlink
hovertextlinktextlinktextlink
activetextlinktextlinktextlink
Classes textlink wenn a-Tag, wird Class nicht zwingend benötigttextlink textlink--icon-lefttextlink textlink--icon-right

Navigation

Animationen

NamePreviewClassesCode
Hamburger Default Hamburger Default
navbar-toggler__icon navbar-toggler--hamburger-default
navbar-toggler__icon navbar-toggler--hamburger-default navbar-toggler--rounded
Hamburger Left Hamburger Left
navbar-toggler__icon navbar-toggler--hamburger-left
navbar-toggler__icon navbar-toggler--hamburger-left navbar-toggler--rounded
Hamburger Middle Hamburger Middle
navbar-toggler__icon navbar-toggler--hamburger-middle
navbar-toggler__icon navbar-toggler--hamburger-middle navbar-toggler--rounded
Hamburger Right Hamburger Right
navbar-toggler__icon navbar-toggler--hamburger-right
navbar-toggler__icon navbar-toggler--hamburger-right navbar-toggler--rounded
Hamburger Back Hamburger Back
navbar-toggler__icon navbar-toggler--hamburger-back
navbar-toggler__icon navbar-toggler--hamburger-back navbar-toggler--rounded
Hamburger Collapse Hamburger Collapse
navbar-toggler__icon navbar-toggler--hamburger-collapse
navbar-toggler__icon navbar-toggler--hamburger-collapse navbar-toggler--rounded
Döner Döner
navbar-toggler__icon navbar-toggler--doner
navbar-toggler__icon navbar-toggler--doner navbar-toggler--rounded
Bento Fadeout Bento Fadeout
navbar-toggler__icon navbar-toggler--bento-fadeout
navbar-toggler__icon navbar-toggler--bento-fadeout navbar-toggler--rounded
Bento Turn Bento Turn
navbar-toggler__icon navbar-toggler--bento-turn
navbar-toggler__icon navbar-toggler--bento-turn navbar-toggler--rounded
Kebab Kebab
navbar-toggler__icon navbar-toggler--kebab
navbar-toggler__icon navbar-toggler--kebab navbar-toggler--rounded
Meatball Meatball
navbar-toggler__icon navbar-toggler--meatball
navbar-toggler__icon navbar-toggler--meatball navbar-toggler--rounded
Vergrößert Hamburger Default
navbar-toggler__icon navbar-toggler--hamburger-default scale-4
navbar-toggler__icon navbar-toggler--hamburger-default navbar-toggler--rounded scale-4

Ratios

Referenz: Bootstrap 5.2 Ratios
ratio-1x1
ratio
ratio-2x1
ratio
ratio-3x2
ratio
ratio-4x3
ratio
ratio-2x3
ratio
ratio-3x4
ratio
ratio-1x2
ratio
ratio-9x16
ratio
ratio-9x21
ratio
ratio-16x9
ratio
ratio-21x9
ratio

Inputs

Ihr Passwort muss 8-20 Zeichen lang sein, Buchstaben und Zahlen enthalten und darf keine Leerzeichen, Sonderzeichen oder Emoji enthalten.
Dieses Feld ist erforderlich.
Ihr Passwort muss 8-20 Zeichen lang sein, Buchstaben und Zahlen enthalten und darf keine Leerzeichen, Sonderzeichen oder Emoji enthalten.
Dieses Feld ist erforderlich.
Ihr Passwort muss 8-20 Zeichen lang sein, Buchstaben und Zahlen enthalten und darf keine Leerzeichen, Sonderzeichen oder Emoji enthalten.
Dieses Feld ist erforderlich.
Ihr Passwort muss 8-20 Zeichen lang sein, Buchstaben und Zahlen enthalten und darf keine Leerzeichen, Sonderzeichen oder Emoji enthalten.
Dieses Feld ist erforderlich.

Badges

Single-choice

Badge .is-active Badge

Multi-choice

Badge .is-active .is-active
.is-active Badge .is-active

Icons

Google Material Icons

Alle Icons und Codes hier einzusehen: Material Icons

IconEinbindung über ClassEinbindung über Code
close <span class="material-icons-rounded">close</span> ::before {
font-family: "Material Icons Rounded";
content: "e5cd";
}
expand_more <span class="material-icons-rounded">expand_more</span> ::before {
font-family: "Material Icons Rounded";
content: "e5cf";
}
expand_less <span class="material-icons-rounded">expand_less</span> ::before {
font-family: "Material Icons Rounded";
content: "e5ce";
}
chevron_right <span class="material-icons-rounded">chevron_right</span> ::before {
font-family: "Material Icons Rounded";
content: "e5cc";
}
chevron_left <span class="material-icons-rounded">chevron_left</span> ::before {
font-family: "Material Icons Rounded";
content: "e5cb";
}
arrow_drop_down <span class="material-icons-rounded">arrow_drop_down</span> ::before {
font-family: "Material Icons Rounded";
content: "e5c5";
}
arrow_drop_up <span class="material-icons-rounded">arrow_drop_up</span> ::before {
font-family: "Material Icons Rounded";
content: "e5c7";
}
arrow_left <span class="material-icons-rounded">arrow_left</span> ::before {
font-family: "Material Icons Rounded";
content: "e5de";
}
arrow_right <span class="material-icons-rounded">arrow_right</span> ::before {
font-family: "Material Icons Rounded";
content: "e5df";
}
add <span class="material-icons-rounded">add</span> ::before {
font-family: "Material Icons Rounded";
content: "e145";
}
home <span class="material-icons-rounded">home</span> ::before {
font-family: "Material Icons Rounded";
content: "e88a";
}
search <span class="material-icons-rounded">search</span> ::before {
font-family: "Material Icons Rounded";
content: "e8b6";
}
key <span class="material-icons-rounded">key</span> ::before {
font-family: "Material Icons Rounded";
content: "e73c";
}
check <span class="material-icons-rounded">check</span> ::before {
font-family: "Material Icons Rounded";
content: "e5ca";
}
check_circle <span class="material-icons-rounded">check_circle</span> ::before {
font-family: "Material Icons Rounded";
content: "e86c";
}
info <span class="material-icons-rounded">info</span> ::before {
font-family: "Material Icons Rounded";
content: "e88e";
}

nova Material

<span class="nm nm-cancel"></span>
<span class="nm nm-copy"></span>
<span class="nm nm-delete_forever"></span>
<span class="nm nm-download"></span>
<span class="nm nm-drag"></span>
<span class="nm nm-edit"></span>
<span class="nm nm-facebook"></span>
<span class="nm nm-icon-arrow-link"></span>
<span class="nm nm-instagram"></span>
<span class="nm nm-linkedin"></span>
<span class="nm nm-login"></span>
<span class="nm nm-mail"></span>
<span class="nm nm-pinterest"></span>
<span class="nm nm-quote"></span>
<span class="nm nm-search"></span>
<span class="nm nm-tiktok"></span>
<span class="nm nm-twitter"></span>
<span class="nm nm-vector"></span>
<span class="nm nm-wand"></span>
<span class="nm nm-whatsapp"></span>
<span class="nm nm-wishlist"></span>
<span class="nm nm-xing"></span>
<span class="nm nm-youtube"></span>

Alerts

Alert ohne Schließen-Button

<div class="alert alert-success" role="alert">
Text text text
</div>

Alert mit Schließen-Button

<div class="alert alert-success alert-dismissible fade show" role="alert">
Text text text
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" tabindex="0"></button>
</div>

Alert mit Icon

<div class="alert alert-success d-flex align-items-center" role="alert">
<span class="material-icons-rounded me-2">check_circle</span>
Text text text
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" tabindex="0"></button>
</div>

Alert mit Weiten-Einstellung

<div class="alert alert-info alert-dismissible w-75" role="alert">
Text text text
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Cards

Referenz: Bootstrap 5.2 Cards

Card subtitle Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card subtitle Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

button button

Card title Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

button button
Header

Card Subtitle Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

button button
  • A item
  • A second item
  • A third item
  • A fourth item
Footer
Header

Card Subtitle Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

button button
Footer

Progress bar

25%
<div class="progress">
⠀ <div class="progress-bar rounded-end-2xl" role="progressbar" aria-label="label"
⠀ style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
75%
<div class="progress">
⠀ <div class="progress-bar rounded-end-2xl" role="progressbar" aria-label="label"
⠀ style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>

Tooltips

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top"> Tooltip on top</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom"> Tooltip on bottom</button>

Popovers

<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And heres some amazing content. Its very engaging. Right?">Click to toggle popover</button>

Checks-Radios

<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked> <label class="form-check-label" for="flexCheckChecked"> Checked checkbox </label> </div>
<div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked> <label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label> </div>
<div class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault"> <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label> </div>

Slider

Swiper Controls

Swiper Pagination

Modal

Pagination

ALM Controls