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 {#1348
      +name: "category"
      +label: "Kategorien"
      +input: "select"
      +multiple: true
      #taxonomy: "category"
      #operator: "IN"
      #getTermsArgs: []
    }
    1 => App\Ajax\Filters\PostTagFilter {#1349
      +name: "tag"
      +label: "Tags"
      +input: "checkbox"
      +multiple: true
      #taxonomy: "post_tag"
      #operator: "IN"
      #getTermsArgs: []
    }
    2 => App\Ajax\Filters\SearchFilter {#1350
      +name: "search"
      +label: "Suchen"
      +input: "text"
      +multiple: false
    }
  ]
  "sort" => array:2 [
    0 => App\Ajax\SortOrder\TitleSortOrder {#1351
      +name: "title-asc"
      +label: "Titel aufsteigend"
      +orderby: "title"
      +order: "ASC"
    }
    1 => App\Ajax\SortOrder\TitleSortOrder {#1352
      +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
14.07.2026
Mittlerer Handlungsbedarf Berufliches Umfeld

14 Schwachstellen in n8n: CERT-Bund stuft die Lage als kritisch ein

Für die Workflow-Automatisierungsplattform n8n sind 14 Sicherheitslücken geschlossen worden. Das CERT-Bund des BSI hat dazu den Sicherheitshinweis WID-SEC-2026-2267 veröffentlicht und die Gesamtgefahr mit einem CVSS-Base-Score von 9.9 als kritisch bewertet. Wer n8n selbst betreibt, sollte zeitnah aktualisieren. Was gepatcht wurde Die Lücken verteilen sich auf verschiedene Komponenten der Plattform und

mehr erfahren

Ajax Pagination

^ array:12 [
  "filters" => array:1 [
    0 => App\Ajax\Filters\PostCategoryBadgeFilter {#1356
      +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
  ]
]
16.07.2026
Mittlerer Handlungsbedarf Privates und Berufliches Umfeld

Bundesweite Phishing-Kampagne mit gefälschten Behörden-Absendern: Warnung vor angeblicher Betriebsprüfung nach „Prüfungsanordnung gemäß §193 AO“

Zurzeit sind von annähernd allen Landesfinanzministerien und -verwaltungen gefälschte und betrügerische Phishing-Mails im Umlauf. Angekündigt wird darin eine „Außenprüfung gemäß § 193 Abgabenordnung“. Nachdem am 14.…

mehr erfahren
15.07.2026
Mittlerer Handlungsbedarf Berufliches Umfeld

Fake-Mail zu angeblicher Betriebsprüfung im Namen des Finanzministeriums für Schleswig-Holstein im Umlauf

Aktuell verschicken Kriminelle E-Mails, die aussehen, als kämen sie von der Poststelle des Finanzministeriums Schleswig-Holstein. Angekündigt wird darin eine "Außenprüfung gemäß § 193 Abgabenordnung". Das Finanzministerium selbst versendet solche Prüfungsanordnungen jedoch nie, hier wären ausschließlich die Finanzämter zuständig. Es handelt sich um einen Betrugsversuch. Was ist passiert? Die gefälschten Mails

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
  ]
]
16.07.2026
Mittlerer Handlungsbedarf Privates und Berufliches Umfeld

Bundesweite Phishing-Kampagne mit gefälschten Behörden-Absendern: Warnung vor angeblicher Betriebsprüfung nach „Prüfungsanordnung gemäß §193 AO“

Zurzeit sind von annähernd allen Landesfinanzministerien und -verwaltungen gefälschte und betrügerische Phishing-Mails im Umlauf. Angekündigt wird darin eine „Außenprüfung gemäß § 193 Abgabenordnung“. Nachdem am 14.…

mehr erfahren
15.07.2026
Mittlerer Handlungsbedarf Berufliches Umfeld

Fake-Mail zu angeblicher Betriebsprüfung im Namen des Finanzministeriums für Schleswig-Holstein im Umlauf

Aktuell verschicken Kriminelle E-Mails, die aussehen, als kämen sie von der Poststelle des Finanzministeriums Schleswig-Holstein. Angekündigt wird darin eine "Außenprüfung gemäß § 193 Abgabenordnung". Das Finanzministerium selbst versendet solche Prüfungsanordnungen jedoch nie, hier wären ausschließlich die Finanzämter zuständig. Es handelt sich um einen Betrugsversuch. Was ist passiert? Die gefälschten Mails

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