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
secondary-900
secondary-800
secondary-700
secondary-600
secondary
secondary-400
secondary-300
secondary-200
secondary-100
environment-900
environment-800
environment-700
environment-600
environment
environment-400
environment-300
environment-200
environment-100
mobility-900
mobility-800
mobility-700
mobility-600
mobility
mobility-400
mobility-300
mobility-200
mobility-100
education-900
education-800
education-700
education-600
education
education-400
education-300
education-200
education-100
violet-900
violet-800
violet-700
violet-600
violet
violet-400
violet-300
violet-200
violet-100
darkgreen-900
darkgreen-800
darkgreen-700
darkgreen-600
darkgreen
darkgreen-400
darkgreen-300
darkgreen-200
darkgreen-100
info
warning
error
default
grey-900
grey-800
grey-700
grey-600
grey
grey-400
grey-300
grey-200
grey-100
Backgrounds
bg-white
primary-900
primary-800
primary-700
primary-600
primary
primary-400
primary-300
primary-200
primary-100
secondary-900
secondary-800
secondary-700
secondary-600
secondary
secondary-400
secondary-300
secondary-200
secondary-100
environment-900
environment-800
environment-700
environment-600
environment
environment-400
environment-300
environment-200
environment-100
mobility-900
mobility-800
mobility-700
mobility-600
mobility
mobility-400
mobility-300
mobility-200
mobility-100
education-900
education-800
education-700
education-600
education
education-400
education-300
education-200
education-100
violet-900
violet-800
violet-700
violet-600
violet
violet-400
violet-300
violet-200
violet-100
darkgreen-900
darkgreen-800
darkgreen-700
darkgreen-600
darkgreen
darkgreen-400
darkgreen-300
darkgreen-200
darkgreen-100
info
warning
error
default
grey-900
grey-800
grey-700
grey-600
grey
grey-400
grey-300
grey-200
grey-100
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 Right |
|
navbar-toggler__icon navbar-toggler--hamburger-right
navbar-toggler__icon navbar-toggler--hamburger-right 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
Bereiche
Kinder & Jugendliche
Natur & Umweltschutz
Bewegung & Mobilität
Bildung
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-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-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-divider"></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-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_circle"></span>
<span class="nm nm-public"></span>
<span class="nm nm-refresh"></span>
<span class="nm nm-search"></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-preheadline_icon"></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 title Card subtitle
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
Ajax Query Handler
Ajax Filter
Show Options
^ array:11 [ "filters" => array:3 [ 0 => App\Ajax\Filters\PostCategoryFilter {#1857 +name: "category" +label: "Kategorien" +input: "select" +multiple: true #taxonomy: "category" #operator: "IN" #getTermsArgs: [] } 1 => App\Ajax\Filters\PostTagFilter {#1858 +name: "tag" +label: "Tags" +input: "checkbox" +multiple: true #taxonomy: "post_tag" #operator: "IN" #getTermsArgs: [] } 2 => App\Ajax\Filters\SearchFilter {#1859 +name: "search" +label: "Suchen" +input: "text" +multiple: false } ] "sort" => array:2 [ 0 => App\Ajax\SortOrder\TitleSortOrder {#1860 +name: "title-asc" +label: "Titel aufsteigend" +orderby: "title" +order: "ASC" } 1 => App\Ajax\SortOrder\TitleSortOrder {#1861 +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 ] ]
Ajax Pagination
Show Options
^ array:11 [ "filters" => array:1 [ 0 => App\Ajax\Filters\PostCategoryBadgeFilter {#1865 +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 ] ]
Gemeinsam mehr bewegen: Die 300.000 Euro Challenge startet mit einer Nominierungskampagne in die nächste Phase
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 ] ]
Gemeinsam mehr bewegen: Die 300.000 Euro Challenge startet mit einer Nominierungskampagne in die nächste Phase
Ajax Events List
Show Options
^ array:11 [ "filters" => array:3 [ 0 => App\Ajax\Filters\SearchFilter {#1873 +name: "search" +label: "Suchen" +input: "text" +multiple: false } 1 => App\Ajax\Filters\EventDateFromFilter {#1874 +name: "from" +label: "Von" +input: "date" +multiple: false #metaKey: "event_date" #operator: ">=" #type: "CHAR" #getTermsArgs: [] +format: "yyyy-mm-dd 00:00:00" } 2 => App\Ajax\Filters\EventDateToFilter {#1875 +name: "to" +label: "Bis" +input: "date" +multiple: false #metaKey: "event_date" #operator: "<=" #type: "CHAR" #getTermsArgs: [] +format: "yyyy-mm-dd 23:59:59" } ] "sort" => array:4 [ 0 => App\Ajax\SortOrder\EventDateSortOrder {#1876 +name: "date-asc" +label: "Datum aufsteigend" +orderby: "meta_value" +order: "ASC" #metaKey: "event_date" } 1 => App\Ajax\SortOrder\EventDateSortOrder {#1877 +name: "date-desc" +label: "Datum absteigend" +orderby: "meta_value" +order: "DESC" #metaKey: "event_date" } 2 => App\Ajax\SortOrder\TitleSortOrder {#1878 +name: "title-asc" +label: "Titel aufsteigend" +orderby: "title" +order: "ASC" } 3 => App\Ajax\SortOrder\TitleSortOrder {#1879 +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" => "event" "posts_per_page" => 2 ] ]
Keine Einträge gefunden
Custom Grid
