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

primary-900
primary-800
primary-700
primary-600
primary
primary-400
primary-300
primary-200
primary-100
secondary-900
secondary
secondary-700
secondary-600
secondary-500
secondary-400
secondary-300
secondary-200
secondary-100
tertiary
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
secondary-700
secondary-600
secondary-500
secondary-400
secondary-300
secondary-200
secondary-100
tertiary
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
large

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

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_long_down"></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-check_thick"></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-dots"></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-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-reset alert-close" data-bs-dismiss="alert" aria-label="Close"></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-reset alert-close" data-bs-dismiss="alert" aria-label="Close"></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-reset alert-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Cards

Referenz: Bootstrap 5.2 Cards

Card title

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

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

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:12 [
  "filters" => array:3 [
    0 => App\Ajax\Filters\PostCategoryFilter {#1327
      +name: "category"
      +label: "Kategorien"
      +input: "select"
      +multiple: true
      #taxonomy: "category"
      #operator: "IN"
      #getTermsArgs: []
    }
    1 => App\Ajax\Filters\PostTagFilter {#1328
      +name: "tag"
      +label: "Tags"
      +input: "checkbox"
      +multiple: true
      #taxonomy: "post_tag"
      #operator: "IN"
      #getTermsArgs: []
    }
    2 => App\Ajax\Filters\SearchFilter {#1329
      +name: "search"
      +label: "Suchen"
      +input: "text"
      +multiple: false
    }
  ]
  "sort" => array:2 [
    0 => App\Ajax\SortOrder\TitleSortOrder {#1330
      +name: "title-asc"
      +label: "Titel aufsteigend"
      +orderby: "title"
      +order: "ASC"
    }
    1 => App\Ajax\SortOrder\TitleSortOrder {#1331
      +name: "title-desc"
      +label: "Titel absteigend"
      +orderby: "title"
      +order: "DESC"
    }
  ]
  "pagination" => false
  "masonry" => false
  "layout" => "grid"
  "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
  ]
]
02.04.2026
Mittlerer Handlungsbedarf Berufliches Umfeld

„GlassWorm“: Unsichtbare Malware infiziert Entwickler-Tools

Eine raffinierte Schadsoftware namens „GlassWorm“ verbreitet sich über Erweiterungen für den Code-Editor Visual Studio Code (VS Code) auf dem Open VSX-Marktplatz. Die Malware nutzt extensionpacks, um zunächst eigenständig wirkende Erweiterungen in späteren Updates umzuwandeln. Der Vorfall Sicherheitsforscher haben eine massive Kampagne identifiziert, bei der mindestens 72 bösartige Erweiterungen auf dem

mehr erfahren
17.01.2026
Niedriger Handlungsbedarf Berufliches Umfeld

Adobe-Patchday schließt kritische Schwachstellen

Auch Adobe hat im Januar-Patchday mehrere sicherheitskritische Schwachstellen in seinen Produkten behoben. Besonders problematisch ist eine kritische Sicherheitslücke in Adobe ColdFusion, die eine vollständige Systemübernahme ermöglichen kann. Kritische Schwachstelle in Adobe ColdFusion Die gravierendste Lücke betrifft Adobe ColdFusion und erlaubt eine sogenannte Remote Code Execution (RCE). Angreifer können dabei eigenen

mehr erfahren

Ajax Pagination

^ array:12 [
  "filters" => array:1 [
    0 => App\Ajax\Filters\PostCategoryBadgeFilter {#1335
      +name: "category"
      +label: "Kategorien"
      +input: "badge"
      +multiple: true
      #taxonomy: "category"
      #operator: "IN"
      #getTermsArgs: []
    }
  ]
  "sort" => []
  "pagination" => true
  "masonry" => false
  "layout" => "grid"
  "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
  ]
]
15.04.2026
Niedriger Handlungsbedarf Privates Umfeld

Das sind die Gefahren kostenloser Streams

Die Formel 1 Saison hat begonnen und die Fußball-Weltmeisterschaft steht vor der Tür. Damit einher gehen mehr Suchanfragen nach "kostenlosen Streams" – Sicherheitsforscher warnen vor den Gefahren und zeigen, dass vermeintlich kostenlose Streaming-Websites auch monetären Zwecken dienen. Einzelne Streams sind nur über Plattformen zu erreichen Sicherheitsexperten von Bitdefender haben populäre

mehr erfahren
14.04.2026
Niedriger Handlungsbedarf Privates und Berufliches Umfeld

Datenpanne bei Basic-Fit: Bankdaten von rund einer Million Mitglieder abgeflossen

Europas größte Fitnesskette Basic-Fit hat am 13. April 2026 offiziell bestätigt, dass Angreifer sich unbefugt Zugang zu einem internen System verschafft haben. Betroffen sind Mitgliederdaten aus sechs Ländern: Deutschland, Niederlande, Belgien, Luxemburg, Frankreich und Spanien. Die Gesamtzahl der betroffenen Mitglieder liegt bei rund einer Million, davon allein etwa 200.000 in

mehr erfahren

Ajax Masonry

^ array:12 [
  "filters" => []
  "sort" => []
  "pagination" => false
  "masonry" => true
  "layout" => "grid"
  "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
  ]
]
15.04.2026
Niedriger Handlungsbedarf Privates Umfeld

Das sind die Gefahren kostenloser Streams

Die Formel 1 Saison hat begonnen und die Fußball-Weltmeisterschaft steht vor der Tür. Damit einher gehen mehr Suchanfragen nach "kostenlosen Streams" – Sicherheitsforscher warnen vor den Gefahren und zeigen, dass vermeintlich kostenlose Streaming-Websites auch monetären Zwecken dienen. Einzelne Streams sind nur über Plattformen zu erreichen Sicherheitsexperten von Bitdefender haben populäre

mehr erfahren
14.04.2026
Niedriger Handlungsbedarf Privates und Berufliches Umfeld

Datenpanne bei Basic-Fit: Bankdaten von rund einer Million Mitglieder abgeflossen

Europas größte Fitnesskette Basic-Fit hat am 13. April 2026 offiziell bestätigt, dass Angreifer sich unbefugt Zugang zu einem internen System verschafft haben. Betroffen sind Mitgliederdaten aus sechs Ländern: Deutschland, Niederlande, Belgien, Luxemburg, Frankreich und Spanien. Die Gesamtzahl der betroffenen Mitglieder liegt bei rund einer Million, davon allein etwa 200.000 in

mehr erfahren

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