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

Subheading

"Headline-Combo"-Komponente; Kombination aus Klassen

Texts

body-xl

body-lg

body-md

body-sm

body-xs

Colors

text-white
text-primary
text-secondary
text-tertiary
text-default
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
bg-secondary
bg-tertiary
bg-default
bg-gradient
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

Die CSS-Sonderlogik für die Styleguide-Seite killt auf dieser Seite die Farben des btn-tertiary.

Primary Secondary Light Tertiary Light Secondary Dark Tertiary Dark
no icon with icon no icon with icon no icon with icon no icon with icon no icon with icon
default default
button
button
hover
active
disabled
Classes btn btn-primary btn btn-primary btn--icon btn btn-secondary btn btn-secondary btn--icon btn btn-tertiary btn btn-tertiary btn--icon btn btn-secondary-dark btn btn-secondary-dark btn--icon btn btn-tertiary-dark btn btn-tertiary-dark btn--icon
small default
button
button
hover
active
disabled
Classes btn btn-primary btn-sm btn btn-primary btn-sm btn--icon btn btn-secondary btn-sm btn btn-secondary btn-sm btn--icon btn btn-tertiary btn-sm btn btn-tertiary btn-sm btn--icon btn btn-secondary-dark btn-sm btn btn-secondary-dark btn-sm btn--icon btn btn-tertiary-dark btn-sm btn btn-tertiary-dark btn-sm btn--icon
large default
button
button
hover
active
disabled
Classes btn btn-primary btn-lg btn btn-primary btn-lg btn--icon btn btn-secondary btn-lg btn btn-secondary btn-lg btn--icon btn btn-tertiary btn-lg btn btn-tertiary btn-lg btn--icon btn btn-secondary-dark btn-lg btn btn-secondary-dark btn-lg btn--icon btn btn-tertiary-dark btn-lg btn btn-tertiary-dark btn-lg btn--icon

Textlinks

no icon with icon (left) with icon (right)
default textlink textlink textlink
hover textlink textlink textlink
active textlink textlink textlink
Classes textlink wenn a-Tag, wird Class nicht zwingend benötigt textlink textlink--icon-left textlink textlink--icon-right

Navigation

Animationen

Name Preview Classes Code
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

.is-active Badge .is-active

Icons

Google Material Icons

Alle Icons und Codes hier einzusehen: Material Icons

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

nova Material

<span class="nm nm-facebook"></span>
<span class="nm nm-instagram"></span>
<span class="nm nm-linkedin"></span>
<span class="nm nm-pinterest"></span>
<span class="nm nm-quote"></span>
<span class="nm nm-tiktok"></span>
<span class="nm nm-twitter"></span>
<span class="nm nm-whatsapp"></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-outlined 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 title Card subtitle

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

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

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 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
  • A item
  • A second item
  • A third item
  • A fourth item
Footer
Header

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
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

Nur gute Nachrichten Jetzt bei unserem Newsletter anmelden!

Verpasse keine Neuigkeiten und Veranstaltungen mehr! In unserem werbefreien Newsletter geht es ausschließlich um Events und Neuigkeiten des Museums.