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
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
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
Primary Alt
Secondary Alt
no icon
with icon
no icon
with icon
no icon
with icon
no icon
with icon
no icon
with icon
no icon
with icon
default
small
large

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 Right Hamburger Right
navbar-toggler__icon navbar-toggler--hamburger-right
navbar-toggler__icon navbar-toggler--hamburger-right 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

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_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-delete"></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-account_circle"></span>
<span class="nm nm-ad"></span>
<span class="nm nm-add_circle"></span>
<span class="nm nm-airplanemode_active"></span>
<span class="nm nm-apparel"></span>
<span class="nm nm-arrow_forward_ios"></span>
<span class="nm nm-assignment_ind"></span>
<span class="nm nm-bar_chart"></span>
<span class="nm nm-battery_0_bar"></span>
<span class="nm nm-bedtime"></span>
<span class="nm nm-blind"></span>
<span class="nm nm-bookmark"></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>

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

Slider Arrows

Slider Bullets

Modal

Launch modal default
Launch modal image
Launch modal standard

Pagination

Short

First

Last

Middle

Ajax Query Handler

Ajax Filter

^ array:11 [
  "filters" => array:3 [
    0 => App\Ajax\Filters\PostCategoryFilter {#1562
      +name: "category"
      +label: "Kategorien"
      +input: "select"
      +multiple: true
      #taxonomy: "category"
      #operator: "IN"
      #getTermsArgs: []
    }
    1 => App\Ajax\Filters\PostTagFilter {#1563
      +name: "tag"
      +label: "Tags"
      +input: "checkbox"
      +multiple: true
      #taxonomy: "post_tag"
      #operator: "IN"
      #getTermsArgs: []
    }
    2 => App\Ajax\Filters\SearchFilter {#1564
      +name: "search"
      +label: "Suchen"
      +input: "text"
      +multiple: false
    }
  ]
  "sort" => array:2 [
    0 => App\Ajax\SortOrder\TitleSortOrder {#1565
      +name: "title-asc"
      +label: "Titel aufsteigend"
      +orderby: "title"
      +order: "ASC"
    }
    1 => App\Ajax\SortOrder\TitleSortOrder {#1566
      +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
  ]
]
Keine Einträge gefunden

Ajax Pagination

^ array:11 [
  "filters" => array:1 [
    0 => App\Ajax\Filters\PostCategoryBadgeFilter {#1570
      +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
  ]
]
Keine Einträge gefunden

Ajax Masonry

^ 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
  ]
]
Keine Einträge gefunden

Custom Grid

Header Subtitle Header Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.

button button

Header Subtitle Header Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.

button button

Header Subtitle Header Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.

button button

Header Subtitle Header Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.

button button

Header Subtitle Header Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.

button button

Header Subtitle Header Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.

button button