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.

Entgegen der Annahme, das Internet werde sich eh nicht durchsetzen, können wir sagen: Im Stellenanzeigen-Bereich hat es sich schon durchgesetzt. Deshalb sollten Ihre Stellenanzeigen auch dafür optimiert sein.

Grund 1: Internet und Smartphones sind die Zukunft - mobil optimierte Stellenanzeigen sind Pflicht.

Haben Sie schon mal eine PDF auf Ihrem Smartphone geöffnet? Geschweige denn ein Word-Dokument? In der Regel sind das Formate, in die man am Handy hineinzoomen muss um den Text zu erkennen. Sie laden extreeeem langsam weil sie nicht selten größer als einige Megabyte sind (Achtung, Sie surfen jetzt mit reduziertem Datenvolumen) und es gibt keine Links zum Anklicken. Nicht der ideale Weg um Bewerber*innen anzusprechen. Eine Stellenanzeige muss heutzutage für das Web und alle Geräte optimiert sein. Egal, ob sie auf iPad, Röhrenbildschirm oder dem neuesten China-Smartphone aufgerufen wird. Damit sie im Internet erst richtig attraktiv wird (und ihre Möglichkeiten ausschöpft), sollten interaktive Elemente enthalten sein. Dazu zählen Bilderkarussell, Videos, Karten, Social Media Links und andere. Alles, was irgendwie dazu führt, Bewerber*innen zu begeistern. Wenn Sie das auch in Word oder PDF können, melden Sie sich bitte bei uns - Das wollen wir sehen!

Grund 2: Stellenanzeigen müssen für Suchmaschinen und Meta-Jobbörsen durchsuchbar sein

Stellenanzeigen sollen Aufmerksamkeit und dadurch Bewerber*innen generieren. PDF und Word Anzeigen können nicht von Google und Indeed gefunden werden, da ihr Format nicht geeignet ist, von diesen Diensten gecrawlt zu werden. Weil man in PDF und Word keine auslesbaren strukturierten Daten unterbringen kann, sind sie für das Internet unsichtbar. Mit einer Stellenanzeige im HTML Format (zum Beispiel aus unserem Stellenanzeigen-Editor), haben Sie eine Stellenanzeige, die für das Internet bereit ist von von allen gängigen Crawlern gelesen werden kann. Idealerweise sind strukturierte Daten über den Schema.org Typ 'JobPosting' implementiert.

Grund 3: Stellenanzeigen müssen teilbar sein

Wann haben Sie zuletzt eine PDF oder sogar ein Word-Dokument per Whatsapp geteilt? Und wann haben Sie das letzte Mal einen Link geteilt? Ob Sie Ihre Stellenanzeige im internen Netzwerk, öffentlich auf sozialen Medien oder Jobbörsen teilen wollen, mit einem Link ist alles leichter. Menschen, die Ihre Stellenanzeige weiterleiten wollen, werden Ihnen danken.

Grund 4: HTML-Stellenanzeigen werden schneller geschaltet

Je mehr Menschen mit Ihrer Stellenanzeige in Berührung kommen, desto mehr Fehler können entstehen. Hier noch ein Satz durch die Fachabteilung, da drei Wörter vom Personalverantwortlichen, die Marketing-Abteilung, die alles setzen soll, die Anzeigen-Agentur, die die Stellenanzeige schalten soll, das Jobboard, das Ihre Stellenanzeige in HTML programmiert, Sie korrigieren und das Jobboard stellt live. Puh, ganz schön viele Mitwirkende und ganz schön hohes Fehlerpotenzial. Außerdem auch ein ziemlich zeitintensiver Schaltungsprozess. Mit einer Anzeige aus dem onapply Stellenanzeigen-Editor geben Sie die Stellenanzeige ein Mal ein und sie wird direkt auf den Jobbörsen geschaltet. Das spart nicht nur Zeit sondern auch Kosten.

Grund 5: Der onapply Stellenanzeigen-Editor ist leichter zu bedienen als Word oder PDF.

Mit keinem anderen Tool und weniger Aufwand geben Sie Ihrer Stellenanzeige einen kleinen Extra-Boost als mit unserem Stellenanzeigen-Editor. Sie können im Handumdrehen und ohne Vorkenntnisse eine Stellenausschreibung erstellen, die auf allen Geräten begeistert und von allen (Job-) Suchmaschinen gefunden wird.

Grund 6: Stellenanzeigen müssen begeistern!

Wie lösen Sie Begeisterung bei Bewerbern aus? Die Stellenanzeige sollte kein statisches Dokument sein. Die Einbindung einer Karte, eines Bilderkarussells und/oder Videos, um einen besseren Eindruck von Ihrem Unternehmen zu vermitteln, ist Pflicht geworden.

Ihre nächsten Schritte

Starten Sie direkt durch: ✔ gratis auf 10 Jobbörsen schalten ✔ moderne Stellenanzeige erstellen ✔ 400 Premium-Jobbörsen ✔ Google for Jobs gratis

Lass Sie sich onapply vorführen: ✔ persönliche Führung von unserem Experten ✔ erste Tipps & Tricks um mehr Bewerber*innen zu begeistern ✔

Unsere Experten besprechen mit Ihnen in einem kostenlosen Audit ihre Möglickeiten.

6 Gründe gegen die PDF-Stellenanzeige

Keine PDFs für Stellemanzeigen: Im Stellenanzeigen-Bereich hat es sich schon durchgesetzt. Deshalb sollten Ihre Stellenanzeigen auch dafür optimiert sein.

Zuletzt aktualisiert:
3.12.2025

Entgegen der Annahme, das Internet werde sich eh nicht durchsetzen, können wir sagen: Im Stellenanzeigen-Bereich hat es sich schon durchgesetzt. Deshalb sollten Ihre Stellenanzeigen auch dafür optimiert sein.

Grund 1: Internet und Smartphones sind die Zukunft - mobil optimierte Stellenanzeigen sind Pflicht.

Haben Sie schon mal eine PDF auf Ihrem Smartphone geöffnet? Geschweige denn ein Word-Dokument? In der Regel sind das Formate, in die man am Handy hineinzoomen muss um den Text zu erkennen. Sie laden extreeeem langsam weil sie nicht selten größer als einige Megabyte sind (Achtung, Sie surfen jetzt mit reduziertem Datenvolumen) und es gibt keine Links zum Anklicken. Nicht der ideale Weg um Bewerber*innen anzusprechen. Eine Stellenanzeige muss heutzutage für das Web und alle Geräte optimiert sein. Egal, ob sie auf iPad, Röhrenbildschirm oder dem neuesten China-Smartphone aufgerufen wird. Damit sie im Internet erst richtig attraktiv wird (und ihre Möglichkeiten ausschöpft), sollten interaktive Elemente enthalten sein. Dazu zählen Bilderkarussell, Videos, Karten, Social Media Links und andere. Alles, was irgendwie dazu führt, Bewerber*innen zu begeistern. Wenn Sie das auch in Word oder PDF können, melden Sie sich bitte bei uns - Das wollen wir sehen!

Grund 2: Stellenanzeigen müssen für Suchmaschinen und Meta-Jobbörsen durchsuchbar sein

Stellenanzeigen sollen Aufmerksamkeit und dadurch Bewerber*innen generieren. PDF und Word Anzeigen können nicht von Google und Indeed gefunden werden, da ihr Format nicht geeignet ist, von diesen Diensten gecrawlt zu werden. Weil man in PDF und Word keine auslesbaren strukturierten Daten unterbringen kann, sind sie für das Internet unsichtbar. Mit einer Stellenanzeige im HTML Format (zum Beispiel aus unserem Stellenanzeigen-Editor), haben Sie eine Stellenanzeige, die für das Internet bereit ist von von allen gängigen Crawlern gelesen werden kann. Idealerweise sind strukturierte Daten über den Schema.org Typ 'JobPosting' implementiert.

Grund 3: Stellenanzeigen müssen teilbar sein

Wann haben Sie zuletzt eine PDF oder sogar ein Word-Dokument per Whatsapp geteilt? Und wann haben Sie das letzte Mal einen Link geteilt? Ob Sie Ihre Stellenanzeige im internen Netzwerk, öffentlich auf sozialen Medien oder Jobbörsen teilen wollen, mit einem Link ist alles leichter. Menschen, die Ihre Stellenanzeige weiterleiten wollen, werden Ihnen danken.

Grund 4: HTML-Stellenanzeigen werden schneller geschaltet

Je mehr Menschen mit Ihrer Stellenanzeige in Berührung kommen, desto mehr Fehler können entstehen. Hier noch ein Satz durch die Fachabteilung, da drei Wörter vom Personalverantwortlichen, die Marketing-Abteilung, die alles setzen soll, die Anzeigen-Agentur, die die Stellenanzeige schalten soll, das Jobboard, das Ihre Stellenanzeige in HTML programmiert, Sie korrigieren und das Jobboard stellt live. Puh, ganz schön viele Mitwirkende und ganz schön hohes Fehlerpotenzial. Außerdem auch ein ziemlich zeitintensiver Schaltungsprozess. Mit einer Anzeige aus dem onapply Stellenanzeigen-Editor geben Sie die Stellenanzeige ein Mal ein und sie wird direkt auf den Jobbörsen geschaltet. Das spart nicht nur Zeit sondern auch Kosten.

Grund 5: Der onapply Stellenanzeigen-Editor ist leichter zu bedienen als Word oder PDF.

Mit keinem anderen Tool und weniger Aufwand geben Sie Ihrer Stellenanzeige einen kleinen Extra-Boost als mit unserem Stellenanzeigen-Editor. Sie können im Handumdrehen und ohne Vorkenntnisse eine Stellenausschreibung erstellen, die auf allen Geräten begeistert und von allen (Job-) Suchmaschinen gefunden wird.

Grund 6: Stellenanzeigen müssen begeistern!

Wie lösen Sie Begeisterung bei Bewerbern aus? Die Stellenanzeige sollte kein statisches Dokument sein. Die Einbindung einer Karte, eines Bilderkarussells und/oder Videos, um einen besseren Eindruck von Ihrem Unternehmen zu vermitteln, ist Pflicht geworden.

Ihre nächsten Schritte

Starten Sie direkt durch: ✔ gratis auf 10 Jobbörsen schalten ✔ moderne Stellenanzeige erstellen ✔ 400 Premium-Jobbörsen ✔ Google for Jobs gratis

Lass Sie sich onapply vorführen: ✔ persönliche Führung von unserem Experten ✔ erste Tipps & Tricks um mehr Bewerber*innen zu begeistern ✔

Unsere Experten besprechen mit Ihnen in einem kostenlosen Audit ihre Möglickeiten.

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.