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
primary-900
primary-800
primary-700
primary-600
primary
primary-400
primary-300
primary-200
primary-100
info-900
info-800
info-700
info-600
info
info-400
info-300
info-200
info-100
warning-900
warning-800
warning-700
warning-600
warning
warning-400
warning-300
warning-200
warning-100
error-900
error-800
error-700
error-600
error
error-400
error-300
error-200
error-100
default
grey-20
grey-30
grey-40
grey
grey-60
grey-70
grey-80
grey-90
grey-95
Backgrounds
bg-white
primary-900
primary-800
primary-700
primary-600
primary
primary-400
primary-300
primary-200
primary-100
info-900
info-800
info-700
info-600
info
info-400
info-300
info-200
info-100
warning-900
warning-800
warning-700
warning-600
warning
warning-400
warning-300
warning-200
warning-100
error-900
error-800
error-700
error-600
error
error-400
error-300
error-200
error-100
default
grey-20
grey-30
grey-40
grey
grey-60
grey-70
grey-80
grey-90
grey-95
Buttons
Primary
Secondary
Primary Dark
Secondary Dark
no icon
with icon
no icon
with icon
no icon
with icon
no icon
with icon
default
small
Textlinks
Navigation
Animationen
| Name | Preview | Classes | Code |
|---|---|---|---|
| Hamburger Default |  | navbar-toggler__icon navbar-toggler--hamburger-default navbar-toggler__icon navbar-toggler--hamburger-default navbar-toggler--rounded | |
| Hamburger Left |  | navbar-toggler__icon navbar-toggler--hamburger-left navbar-toggler__icon navbar-toggler--hamburger-left navbar-toggler--rounded | |
| Hamburger Middle |  | navbar-toggler__icon navbar-toggler--hamburger-middle navbar-toggler__icon navbar-toggler--hamburger-middle navbar-toggler--rounded | |
| Hamburger Right |  | navbar-toggler__icon navbar-toggler--hamburger-right navbar-toggler__icon navbar-toggler--hamburger-right navbar-toggler--rounded | |
| Hamburger Back |  | navbar-toggler__icon navbar-toggler--hamburger-back navbar-toggler__icon navbar-toggler--hamburger-back navbar-toggler--rounded | |
| Hamburger Collapse |  | navbar-toggler__icon navbar-toggler--hamburger-collapse navbar-toggler__icon navbar-toggler--hamburger-collapse navbar-toggler--rounded | |
| Döner |  | navbar-toggler__icon navbar-toggler--doner navbar-toggler__icon navbar-toggler--doner navbar-toggler--rounded | |
| Bento Fadeout |  | navbar-toggler__icon navbar-toggler--bento-fadeout navbar-toggler__icon navbar-toggler--bento-fadeout navbar-toggler--rounded | |
| Bento Turn |  | navbar-toggler__icon navbar-toggler--bento-turn navbar-toggler__icon navbar-toggler--bento-turn navbar-toggler--rounded | |
| Kebab |  | navbar-toggler__icon navbar-toggler--kebab navbar-toggler__icon navbar-toggler--kebab navbar-toggler--rounded | |
| Meatball |  | navbar-toggler__icon navbar-toggler--meatball navbar-toggler__icon navbar-toggler--meatball navbar-toggler--rounded | |
| Vergrößert | | 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-2x1
ratio-3x2
ratio-4x3
ratio-2x3
ratio-3x4
ratio-1x2
ratio-9x16
ratio-9x21
ratio-16x9
ratio-21x9
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
You can add google material icons to the nova material fonts by providing the corresponsing svg. Material Icons
nova Material
<span class="nm nm-add"></span><span class="nm nm-arrow_back"></span><span class="nm nm-arrow_back_ios"></span><span class="nm nm-arrow_drop_down"></span><span class="nm nm-arrow_forward"></span><span class="nm nm-arrow_left"></span><span class="nm nm-arrow_right"></span><span class="nm nm-call"></span><span class="nm nm-cancel"></span><span class="nm nm-cancel_fill"></span><span class="nm nm-check-filled"></span><span class="nm nm-check"></span><span class="nm nm-check_circle-fill"></span><span class="nm nm-check_circle"></span><span class="nm nm-chevron_left"></span><span class="nm nm-chevron_right"></span><span class="nm nm-close"></span><span class="nm nm-download"></span><span class="nm nm-download_2-fill"></span><span class="nm nm-expand_less"></span><span class="nm nm-expand_more"></span><span class="nm nm-fax"></span><span class="nm nm-format_quote"></span><span class="nm nm-fullscreen"></span><span class="nm nm-fullscreen_exit"></span><span class="nm nm-home"></span><span class="nm nm-info"></span><span class="nm nm-key-fill"></span><span class="nm nm-keyboard_double_arrow_down"></span><span class="nm nm-keyboard_double_arrow_left"></span><span class="nm nm-keyboard_double_arrow_right"></span><span class="nm nm-keyboard_double_arrow_up"></span><span class="nm nm-language"></span><span class="nm nm-local_activity"></span><span class="nm nm-mail"></span><span class="nm nm-more_vert"></span><span class="nm nm-open_in_new"></span><span class="nm nm-pause-fill"></span><span class="nm nm-picture_in_picture_center"></span><span class="nm nm-play_arrow-fill"></span><span class="nm nm-play_arrow"></span><span class="nm nm-play_circle"></span><span class="nm nm-refresh"></span><span class="nm nm-remove"></span><span class="nm nm-search"></span><span class="nm nm-shopping_cart"></span><span class="nm nm-slow_motion_video-fill"></span><span class="nm nm-star-fill"></span><span class="nm nm-star"></span><span class="nm nm-star_half"></span><span class="nm nm-volume_down-fill"></span><span class="nm nm-volume_off-fill"></span><span class="nm nm-volume_up-fill"></span><span class="nm nm-volume_up"></span><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-whatsapp"></span><span class="nm nm-x"></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> A simple success alert—check it out! - alert alert-success A simple success alert—check it out! - alert alert-success A simple success alert—check it out! - alert alert-success
Alert mit Icon
<div class="alert alert-success d-flex align-items-center" role="alert">
<span class="nm nm-check_circle icon-align-top icon-size-lg me-2"></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 CardsCard subtitle Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Progress bar
<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> <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
Slider Arrows
Slider Bullets
Pagination
Short
First
Last
Middle
Ajay Query Handler
Ajax Filter
Show Options
^ array:11 [ "filters" => array:3 [ 0 => App\Ajax\Filters\PostCategoryFilter {#2110 +name: "category" +label: "Kategorien" +input: "select" +multiple: true #taxonomy: "category" #operator: "IN" #getTermsArgs: [] } 1 => App\Ajax\Filters\PostTagFilter {#2111 +name: "tag" +label: "Tags" +input: "checkbox" +multiple: true #taxonomy: "post_tag" #operator: "IN" #getTermsArgs: [] } 2 => App\Ajax\Filters\SearchFilter {#2112 +name: "search" +label: "Suchen" +input: "text" +multiple: false } ] "sort" => array:2 [ 0 => App\Ajax\SortOrder\TitleSortOrder {#2113 +name: "title-asc" +label: "Titel aufsteigend" +orderby: "title" +order: "ASC" } 1 => App\Ajax\SortOrder\TitleSortOrder {#2114 +name: "title-desc" +label: "Titel absteigend" +orderby: "title" +order: "DESC" } ] "pagination" => false "masonry" => false "empty-message" => "Keine Einträge gefunden" "history" => true "loadOnScroll" => false "query-args" => null "template" => "ajax.items.post-card" "skeleton" => "ajax.skeleton.post-card" "query" => array:3 [ "post_status" => "publish" "post_type" => "post" "posts_per_page" => 2 ] ]
Hallo Welt!
Ajax Pagination
Show Options
^ array:11 [ "filters" => array:1 [ 0 => App\Ajax\Filters\PostCategoryBadgeFilter {#2118 +name: "category" +label: "Kategorien" +input: "badge" +multiple: true #taxonomy: "category" #operator: "IN" #getTermsArgs: [] } ] "sort" => [] "pagination" => true "masonry" => false "empty-message" => "Keine Einträge gefunden" "history" => true "loadOnScroll" => false "query-args" => null "template" => "ajax.items.post-card" "skeleton" => "ajax.skeleton.post-card" "query" => array:3 [ "post_status" => "publish" "post_type" => "post" "posts_per_page" => 2 ] ]
Hallo Welt!
Ajax Masonry
Show Options
^ array:11 [ "filters" => [] "sort" => [] "pagination" => false "masonry" => true "empty-message" => "Keine Einträge gefunden" "history" => true "loadOnScroll" => 6 "query-args" => null "template" => "ajax.items.masonry-card" "skeleton" => "ajax.skeleton.post-card" "query" => array:3 [ "post_status" => "publish" "post_type" => "post" "posts_per_page" => 2 ] ]
Hallo Welt!
Ajax Events List
Show Options
^ array:11 [ "filters" => array:3 [ 0 => App\Ajax\Filters\SearchFilter {#2126 +name: "search" +label: "Suchen" +input: "text" +multiple: false } 1 => App\Ajax\Filters\EventDateFromFilter {#2127 +name: "from" +label: "Von" +input: "date" +multiple: false #metaKey: "post" #operator: ">=" #type: "CHAR" #getTermsArgs: [] +format: "yyyy-mm-dd 00:00:00" } 2 => App\Ajax\Filters\EventDateToFilter {#2128 +name: "to" +label: "Bis" +input: "date" +multiple: false #metaKey: "post" #operator: "<=" #type: "CHAR" #getTermsArgs: [] +format: "yyyy-mm-dd 23:59:59" } ] "sort" => array:4 [ 0 => App\Ajax\SortOrder\EventDateSortOrder {#2129 +name: "date-asc" +label: "Datum aufsteigend" +orderby: "meta_value" +order: "ASC" #metaKey: "post" } 1 => App\Ajax\SortOrder\EventDateSortOrder {#2130 +name: "date-desc" +label: "Datum absteigend" +orderby: "meta_value" +order: "DESC" #metaKey: "post" } 2 => App\Ajax\SortOrder\TitleSortOrder {#2131 +name: "title-asc" +label: "Titel aufsteigend" +orderby: "title" +order: "ASC" } 3 => App\Ajax\SortOrder\TitleSortOrder {#2132 +name: "title-desc" +label: "Titel absteigend" +orderby: "title" +order: "DESC" } ] "pagination" => true "masonry" => false "empty-message" => "Keine Einträge gefunden" "history" => true "loadOnScroll" => false "query-args" => null "template" => "ajax.items.event-card" "skeleton" => "ajax.skeleton.post-card" "query" => array:3 [ "post_status" => "publish" "post_type" => "post" "posts_per_page" => 2 ] ]
Keine Einträge gefunden
Custom Grid
