Style Guide

Lumos | v2.0.4

Typography

Font Styles

u-text-display

Display

u-text-h1

Heading

u-text-h2

Heading

u-text-h3

Heading

u-text-h4

Heading

u-text-h5
Heading
u-text-h6
Heading
u-text-subtitles
Subtitles
u-text-quotes
Quotes
u-text-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-main

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-link
Text Link

Font Weight

u-weight-regular

Lorem ipsum dolor

u-weight-medium

Lorem ipsum dolor

u-weight-bold

Lorem ipsum dolor

Text alignment

u-text-aligned-left

Lorem ipsum dolor

u-text-aligned-center

Lorem ipsum dolor

u-text-aligned-right

Lorem ipsum dolor

Text wrap

u-text-wrap-balance

Lorem ipsum dolor

u-text-wrap-pretty

Lorem ipsum dolor

Line Clamp

u-line-clamp-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Typography Elements

Ordered List
  1. This is some text
  2. This is some text
  3. This is some text
  1. This is some text
  2. This is some text
  3. This is some text
  1. This is some text
  2. This is some text
  3. This is some text
Unordered List
  • This is some text
  • This is some text
  • This is some text
  • This is some text what happens if the text is long
  • This is some text
  • This is some text
  • This is some text what happens if the text is long
  • This is some text
u-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur

Text Link

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur

Text Link

Block Quotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

Color

Themes

data-theme="light"

Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Link
data-theme="dark"

Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Link
data-theme="invert"

Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Link
data-theme="inherit"

Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Link

Font Families

u-font-body

Lorem ipsum dolor

u-font-heading

Lorem ipsum dolor

u-font-decoration

Lorem ipsum dolor

u-font-display

Lorem ipsum dolor

Text Color

u-text-color-primary

Lorem ipsum dolor

u-text-color-secondary

Lorem ipsum dolor

u-text-color-tertiary

Lorem ipsum dolor

u-text-color-black

Lorem ipsum dolor

u-text-color-brand

Lorem ipsum dolor

u-text-color-red

Lorem ipsum dolor

u-text-color-green

Lorem ipsum dolor

u-color-inherit

Lorem ipsum dolor

u-color-faded

Lorem ipsum dolor

Link Color

u-link-color
u-link-color-secondary

Background Colors

u-bg-color
u-bg-color-secondary
u-bg-color-tertiary
u-bg-color-alternate

Flexbox

Horizontal Flex Utilities

u-hflex-left-top
u-hflex-left-center
u-hflex-left-bottom
u-hflex-left-stretch
u-hflex-center-top
u-hflex-center-center
u-hflex-center-bottom
u-hflex-center-stretch
u-hflex-right-top
u-hflex-right-center
u-hflex-right-bottom
u-hflex-right-stretch
u-hflex-between-top
u-hflex-between-center
u-hflex-between-bottom
u-hflex-between-stretch

Vertical Flex Utilities

u-vflex-left-top
u-vflex-left-center
u-vflex-left-bottom
u-vflex-left-between
u-vflex-center-top
u-vflex-center-center
u-vflex-center-bottom
u-vflex-center-between
u-vflex-right-top
u-vflex-right-center
u-vflex-right-bottom
u-vflex-right-between
u-vflex-stretch-top
u-vflex-stretch-center
u-vflex-stretch-bottom
u-vflex-stretch-between

Other Flex Utilities

u-hflex-wrap
u-vflex-wrap
u-flex-shrink
u-flex-grow
u-flex-noshrink

Align Self Utilities

u-align-self-auto
u-align-self-start
u-align-self-center
u-align-self-end
u-align-self-stretch

Align Items Utilities

u-align-items-variable
u-align-items-start
u-align-items-center
u-align-items-end
u-align-items-stretch

Grid

Grid Utilities

u-grid-custom
u-grid-breakout
u-grid-desktop
u-grid-tablet
u-grid-landscape
u-grid-column-2
u-grid-column-3
u-grid-column-4
u-grid-autofit
u-grid-subgrid

Column Utilities

u-column-custom
u-column-full
u-column-indent
u-column-1
u-column-2
u-column-3
u-column-4
u-column-5
u-column-6
u-column-7
u-column-8
u-column-9
u-column-10
u-column-11
u-column-12

Order Utilities

u-order-first
u-order-first-desktop
u-order-first-tablet
u-order-last
u-order-last-desktop
u-order-last-tablet

Spacing

Gap Utilities

u-gap-none
u-gap-main
u-gap-xxsmall
u-gap-xsmall
u-gap-small
u-gap-medium
u-gap-large
u-gap-xlarge

Row Gap Utilities

u-gap-row-none
u-gap-row-main
u-gap-row-xsmall
u-gap-row-small
u-gap-row-medium
u-gap-row-large
u-gap-row-xlarge

Column Gap Utilities

u-gap-column-none
u-gap-column-main
u-gap-column-xsmall
u-gap-column-small
u-gap-column-medium
u-gap-column-large
u-gap-column-xlarge

Section Spacing Attributes

data-padding-top="none"
data-padding-bottom="none"
data-padding-top="small"
data-padding-bottom="small"
data-padding-top="main"
data-padding-bottom="main"
data-padding-top="large"
data-padding-bottom="large"

Custom Spacing Classes

u-section-header

Margin Top Utilities

u-mt-auto
u-mt-gutter
u-mt-text
u-mt-0
u-mt-1
u-mt-2
u-mt-3
u-mt-4
u-mt-5
u-mt-6
u-mt-7

Margin Bottom Utilities

u-mb-auto
u-mb-gutter
u-mb-text
u-mb-0
u-mb-1
u-mb-2
u-mb-3
u-mb-4
u-mb-5
u-mb-6
u-mb-7

Z-Index

Z-Index

u-zindex-2
u-zindex-3

Miscellaneous

Other Utilities

u-height-screen
u-min-height-70
u-min-height-60
u-max-width-none
u-visual-wrap
u-display-none
u-hide-portrait
u-hide-landscape
u-hide-tablet
u-cover
u-cover-absolute
u-container
u-sr-only
u-margin-trim
u-hide-if-empty
u-hide-if-empty-cms

Positions

Positions

u-position-relative
u-position-absolute
u-position-fixed
u-position-sticky

Prevent Style Cleanup

Eyebrow Text Here

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Ohne Kreditkarte

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Badge
Bitte Business-E-mail verwenden.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Eyebrow Text Here

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Wie schalte ich günstig eine Stellenanzeige? Mit Agenturen durch den Jobbörsen-Dschungel

Stellenanzeigen zu schalten ist meist aufwändig und kostspielig. Insbesondere dann, wenn man wenig Erfahrung mit Jobbörsen hat. Auch die Selbst-Verwaltung von Stellenanzeigen-Kontingenten, gegebenenfalls auf mehreren Stellenbörsen, kostet viel Zeit. Vor allem dem gleichzeitigen Schalten auf verschiedenen Jobbörsen gehen unzählige Gespräche mit verschiedenen Vertriebler*innen voraus. Darüber hinaus muss man sich auf allen Jobbörsen registrieren. Einen Ausweg aus diesem Jobbörsen-Dschungel bieten Stellenanzeigen-Agenturen. Sie helfen Anzeigen zu schalten, Kontingente zu verwalten und die besten Angebote herauszusuchen.

Wie funktioniert die Stellenanzeigen-Agentur?

Eine Stellenanzeigen-Agentur ist eine Art Großhändler für Stellenanzeigen: Sie kauft in großen Mengen Stellenanzeigenpositionen ein, erhält dafür Rabatte bei Jobbörsen und verkauft diese Stellanzeigenpositionen dann an Unternehmen weiter, die Stellenanzeigen schalten möchten.
Die Rabatte, die die Agentur als Großhändler bei den Jobbörsen erhält, kann sie zum Teil auch an Ihre Kund*innen (Unternehmen, die Anzeigen schalten wollen) weitergeben. Die Schaltung über eine Agentur ist aber nicht einfach nur günstiger, sondern beinhaltet auch die Beratung zur bestmöglichen Platzierung und das ohne zusätzliche Kosten.

Warum mit einer Stellenanzeigen-Agentur Anzeigen schalten?

Eine Agentur bietet Personaler*innen einen sicheren Weg durch den Jobbörsen-Dschungel.
Eine Agentur…

  • gibt Empfehlungen, auf welcher Jobbörse welche Stellenanzeige am besten ausgeschrieben wird → Um maximale Erfolge zu erzielen
  • bietet einen zentralen Ort und eine*n Ansprechpartner*in für alle Jobbörsen → Ein*e Ansprechpartner*in behält den Überblick über Ihre Ausschreibungen
  • kann bei Jobbörsen aufgrund großer Kontingente bessere Preise erreichen → Sie erhalten unschlagbare Preise für Ihre Schaltung
  • bietet darüber hinaus ein weites Service-Spektrum: Lektorat, AGG-Prüfung, Design und Wording der Stellenanzeige → Sie haben ohne Aufpreis ein Rundum-Sorglos-Paket und können sich um wichtigeres kümmern

  • Die Expertise und der persönliche Service einer Agentur steigern Ihre Chancen auf die besten Bewerber*innen – und das alles ohne zusätzliche Kosten für Sie.

    Paketpreise und flexible Kontingente für die maximale Stellenanzeigen-Ersparnis

    Um vom vollen Umfang einer Agentur zu profitieren, sollten Sie sich Jobbörsen-Pakete für Ihre Stellenanzeige schnüren lassen. Hier sind Rabatte von bis zu 60% möglich.
    Flexible Kontingente sind vor allem dann nützlich, wenn Sie eine große Bandbreite von Stellenausschreibungen haben. Hier kaufen Sie ein Kontingent für eine bestimmte Jobbörse ein und erhalten Rabatt auf alle weiteren Jobbörsen, die Sie einkaufen wollen.

    Fazit

    Alles in allem hat es viele Vorteile Ihre Stellenanzeigen über eine Agentur zu schalten. Sie erhalten gute Preise, eine persönliche Beratung und steigern Ihre Chance auf qualifizierte Bewerber*innen.

    Unser Tipp

    Egal, ob Sie sich für die Nutzung einer Agentur entscheiden oder nicht – nutzen Sie zum Erstellen Ihrer Anzeigen unseren kostenlosen Stellenanzeigen-Editor. Damit sind Ihre Anzeigen in weniger als 5 Minuten erstellt und automatisch für alle Online-Jobbörsen optimiert!Wie Sie das Meiste aus Ihrer Stellenanzeige rausholen, finden Sie in unserem E-Book:

    Wie schalte ich günstig eine Stellenanzeige? Mit Agenturen durch den Jobbörsen-Dschungel

    Erhalten Sie günstige Preise, persönliche Beratung und steigern Sie Ihre Chancen auf qualifizierte Bewerber mit einer Stellenanzeigen-Agentur. Nutzen Sie unse

    Zuletzt aktualisiert:
    3.12.2025

    Wie schalte ich günstig eine Stellenanzeige? Mit Agenturen durch den Jobbörsen-Dschungel

    Stellenanzeigen zu schalten ist meist aufwändig und kostspielig. Insbesondere dann, wenn man wenig Erfahrung mit Jobbörsen hat. Auch die Selbst-Verwaltung von Stellenanzeigen-Kontingenten, gegebenenfalls auf mehreren Stellenbörsen, kostet viel Zeit. Vor allem dem gleichzeitigen Schalten auf verschiedenen Jobbörsen gehen unzählige Gespräche mit verschiedenen Vertriebler*innen voraus. Darüber hinaus muss man sich auf allen Jobbörsen registrieren. Einen Ausweg aus diesem Jobbörsen-Dschungel bieten Stellenanzeigen-Agenturen. Sie helfen Anzeigen zu schalten, Kontingente zu verwalten und die besten Angebote herauszusuchen.

    Wie funktioniert die Stellenanzeigen-Agentur?

    Eine Stellenanzeigen-Agentur ist eine Art Großhändler für Stellenanzeigen: Sie kauft in großen Mengen Stellenanzeigenpositionen ein, erhält dafür Rabatte bei Jobbörsen und verkauft diese Stellanzeigenpositionen dann an Unternehmen weiter, die Stellenanzeigen schalten möchten.
    Die Rabatte, die die Agentur als Großhändler bei den Jobbörsen erhält, kann sie zum Teil auch an Ihre Kund*innen (Unternehmen, die Anzeigen schalten wollen) weitergeben. Die Schaltung über eine Agentur ist aber nicht einfach nur günstiger, sondern beinhaltet auch die Beratung zur bestmöglichen Platzierung und das ohne zusätzliche Kosten.

    Warum mit einer Stellenanzeigen-Agentur Anzeigen schalten?

    Eine Agentur bietet Personaler*innen einen sicheren Weg durch den Jobbörsen-Dschungel.
    Eine Agentur…

  • gibt Empfehlungen, auf welcher Jobbörse welche Stellenanzeige am besten ausgeschrieben wird → Um maximale Erfolge zu erzielen
  • bietet einen zentralen Ort und eine*n Ansprechpartner*in für alle Jobbörsen → Ein*e Ansprechpartner*in behält den Überblick über Ihre Ausschreibungen
  • kann bei Jobbörsen aufgrund großer Kontingente bessere Preise erreichen → Sie erhalten unschlagbare Preise für Ihre Schaltung
  • bietet darüber hinaus ein weites Service-Spektrum: Lektorat, AGG-Prüfung, Design und Wording der Stellenanzeige → Sie haben ohne Aufpreis ein Rundum-Sorglos-Paket und können sich um wichtigeres kümmern

  • Die Expertise und der persönliche Service einer Agentur steigern Ihre Chancen auf die besten Bewerber*innen – und das alles ohne zusätzliche Kosten für Sie.

    Paketpreise und flexible Kontingente für die maximale Stellenanzeigen-Ersparnis

    Um vom vollen Umfang einer Agentur zu profitieren, sollten Sie sich Jobbörsen-Pakete für Ihre Stellenanzeige schnüren lassen. Hier sind Rabatte von bis zu 60% möglich.
    Flexible Kontingente sind vor allem dann nützlich, wenn Sie eine große Bandbreite von Stellenausschreibungen haben. Hier kaufen Sie ein Kontingent für eine bestimmte Jobbörse ein und erhalten Rabatt auf alle weiteren Jobbörsen, die Sie einkaufen wollen.

    Fazit

    Alles in allem hat es viele Vorteile Ihre Stellenanzeigen über eine Agentur zu schalten. Sie erhalten gute Preise, eine persönliche Beratung und steigern Ihre Chance auf qualifizierte Bewerber*innen.

    Unser Tipp

    Egal, ob Sie sich für die Nutzung einer Agentur entscheiden oder nicht – nutzen Sie zum Erstellen Ihrer Anzeigen unseren kostenlosen Stellenanzeigen-Editor. Damit sind Ihre Anzeigen in weniger als 5 Minuten erstellt und automatisch für alle Online-Jobbörsen optimiert!Wie Sie das Meiste aus Ihrer Stellenanzeige rausholen, finden Sie in unserem E-Book:

    Blogbeiträge

    Entdecken Sie weitere informative Artikel

    Change Management für Ihre Recruiting-Software

    Recruiting-Software einführen ohne Widerstände: So gelingt Change Management mit klaren Prozessen und hoher Akzeptanz im Unternehmen.

    KI im Recruiting: Datenschutz & EU-KI-Verordnung 2026

    Was ist bei KI im Recruiting erlaubt? Die EU-KI-Verordnung bringt neue Pflichten für HR. Risiken, Datenschutz & Praxisbeispiele für DACH.

    Mitarbeiter motivieren ohne finanzielle Anreize

    Entdecken Sie 7 wissenschaftlich fundierte Methoden, um Mitarbeiter ohne finanzielle Anreize nachhaltig zu motivieren und langfristig zu binden.