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.

Jetzt, da COVID-19 vielen Unternehmen weltweit die Umstellung auf Fernarbeit bzw. Homeoffice abverlangt, müssen mehr Unternehmen als je zuvor lernen, virtuell zu arbeiten. Angesichts dieser neuen Realität einer modernen, physisch getrennten Belegschaft ist es auch wichtig, grundlegende Prozesse im HR zu digitalisieren. In einer Umfrage zur Auswirkung der Corona-Krise planen fast 70 % der Unternehmen nun mehr Prozesse zu digitalisieren. Egal ob Sie bereits ein Homeoffice Profi sind oder Sie sich in dieser neuen Arbeitswelt gerade erst zurechtfinden müssen: Wir helfen Ihnen gerne weiter. Wir haben Ihnen hier die wichtigsten Tipps und Tricks für die optimale Organisation Ihrer Rekrutierung aus dem Homeoffice zusammengestellt.

Tools, die Sie für eine erfolgreiche Rekrutierung im Homeoffice benötigen:

Stellenanzeigen erstellen und Reichweite auf Jobbörsen

Sie haben zurzeit nicht immer Zugriff auf das Marketing- oder die Designabteilung? Erstellen Sie Ihre Anzeige einfach selbst mit einem Drag-and-Drop Baukasten. Ihre Anzeige ist sofort optimal strukturiert für mobile Geräte, alle Jobbörsen und natürlich Google for Jobs. Nutzen Sie dafür ganz einfach onapply BASIC kostenlos testen. Bei onapply erhalten Sie außerdem 10 kostenlose Jobbörsen inklusive und Sie können Ihre Stellenanzeigen auf allen Jobbörsen im Shop per Klick dazubuchen.

Sammeln Sie Bewerbungen datensicher: mit Cloud-basierter Bewerbermanagement Software

Stellen Sie sicher, dass Ihre Bewerberdaten weiterhin datensicher verarbeitet werden. Vermeiden Sie es jetzt Lebensläufe per E-Mail hin und her zusenden. Hier empfiehlt sich ein cloudbasiertes Bewerbermanagement System. So können sich alle Ihre Kollegen einloggen und Ihre Bewerberdaten bleiben an einem Ort. onapply PRO können Sie bereits ab 20 EUR/ Monat nutzen!

Karriereseite managen ohne IT-Abteilung

Managen Sie Ihre Karriereseite, ohne in der IT-Abteilung oder Ihren Administrator nach jeder Änderung fragen zu müssen. Eine kostenlose Karriereseite, die sich einfach in Ihrem Design einrichten lässt, sollte auch in Ihrer Bewerbermanagement-Software enthalten sein. Mit onapply BASIC können Sie eine Karriereseite sogar kostenlos nutzen!

Video-Chat

Wenn Sie dem Bewerber auch in die Augen schauen wollen, sind Sie seit den letzten Wochen bestimmt schon erprobt in der Nutzung von Video-Chats. z.B. Zoom, Skype, Google Hang-outs, diese sind leicht einzurichten und benötigen keine komplizierte Anmeldung vom Bewerber. Eine große Auswahl an unterschiedlichen Video Möglichkeiten finden Sie hier.

Assessment Tools

Viele Assessments, Tests sind bereits Online möglich. Eine große Auswahl haben wir, für Sie hier gefunden. Sie wollen es einfach halten? Sie können auch ein Bewerbungsformular als Assessment-Tool nutzen Lesen Sie hier wie das geht.

Weitere Tipps zu Interviews aus dem Homeoffice

Video Interviews

Verwenden Sie Videoanrufe, um Kandidaten im Rahmen Ihres Einstellungsverfahrens zu interviewen? Diese Beispiele für Online-Interview-Fragen helfen Ihnen bei der Auswahl von Kandidaten. → Hier Ihre Vorlagen für einen Fragenkatalog

Telefoninterviews

Führen Sie im Rahmen Ihres Einstellungsverfahrens Telefoninterviews mit Kandidaten durch? Diese Fragen für telefonische Vorstellungsgespräche helfen Ihnen bei der Auswahl der Kandidaten, die Sie zu einem persönlichen Gespräch einladen möchten.

Erfolgreich rekrutieren im Homeoffice - Alle Tipps und Tools auf einen Blick

Erfahren Sie, wie Sie erfolgreich im Homeoffice rekrutieren können. Wir haben Ihnen die wichtigsten Tipps und Tools zusammengestellt.

Zuletzt aktualisiert:
3.12.2025

Jetzt, da COVID-19 vielen Unternehmen weltweit die Umstellung auf Fernarbeit bzw. Homeoffice abverlangt, müssen mehr Unternehmen als je zuvor lernen, virtuell zu arbeiten. Angesichts dieser neuen Realität einer modernen, physisch getrennten Belegschaft ist es auch wichtig, grundlegende Prozesse im HR zu digitalisieren. In einer Umfrage zur Auswirkung der Corona-Krise planen fast 70 % der Unternehmen nun mehr Prozesse zu digitalisieren. Egal ob Sie bereits ein Homeoffice Profi sind oder Sie sich in dieser neuen Arbeitswelt gerade erst zurechtfinden müssen: Wir helfen Ihnen gerne weiter. Wir haben Ihnen hier die wichtigsten Tipps und Tricks für die optimale Organisation Ihrer Rekrutierung aus dem Homeoffice zusammengestellt.

Tools, die Sie für eine erfolgreiche Rekrutierung im Homeoffice benötigen:

Stellenanzeigen erstellen und Reichweite auf Jobbörsen

Sie haben zurzeit nicht immer Zugriff auf das Marketing- oder die Designabteilung? Erstellen Sie Ihre Anzeige einfach selbst mit einem Drag-and-Drop Baukasten. Ihre Anzeige ist sofort optimal strukturiert für mobile Geräte, alle Jobbörsen und natürlich Google for Jobs. Nutzen Sie dafür ganz einfach onapply BASIC kostenlos testen. Bei onapply erhalten Sie außerdem 10 kostenlose Jobbörsen inklusive und Sie können Ihre Stellenanzeigen auf allen Jobbörsen im Shop per Klick dazubuchen.

Sammeln Sie Bewerbungen datensicher: mit Cloud-basierter Bewerbermanagement Software

Stellen Sie sicher, dass Ihre Bewerberdaten weiterhin datensicher verarbeitet werden. Vermeiden Sie es jetzt Lebensläufe per E-Mail hin und her zusenden. Hier empfiehlt sich ein cloudbasiertes Bewerbermanagement System. So können sich alle Ihre Kollegen einloggen und Ihre Bewerberdaten bleiben an einem Ort. onapply PRO können Sie bereits ab 20 EUR/ Monat nutzen!

Karriereseite managen ohne IT-Abteilung

Managen Sie Ihre Karriereseite, ohne in der IT-Abteilung oder Ihren Administrator nach jeder Änderung fragen zu müssen. Eine kostenlose Karriereseite, die sich einfach in Ihrem Design einrichten lässt, sollte auch in Ihrer Bewerbermanagement-Software enthalten sein. Mit onapply BASIC können Sie eine Karriereseite sogar kostenlos nutzen!

Video-Chat

Wenn Sie dem Bewerber auch in die Augen schauen wollen, sind Sie seit den letzten Wochen bestimmt schon erprobt in der Nutzung von Video-Chats. z.B. Zoom, Skype, Google Hang-outs, diese sind leicht einzurichten und benötigen keine komplizierte Anmeldung vom Bewerber. Eine große Auswahl an unterschiedlichen Video Möglichkeiten finden Sie hier.

Assessment Tools

Viele Assessments, Tests sind bereits Online möglich. Eine große Auswahl haben wir, für Sie hier gefunden. Sie wollen es einfach halten? Sie können auch ein Bewerbungsformular als Assessment-Tool nutzen Lesen Sie hier wie das geht.

Weitere Tipps zu Interviews aus dem Homeoffice

Video Interviews

Verwenden Sie Videoanrufe, um Kandidaten im Rahmen Ihres Einstellungsverfahrens zu interviewen? Diese Beispiele für Online-Interview-Fragen helfen Ihnen bei der Auswahl von Kandidaten. → Hier Ihre Vorlagen für einen Fragenkatalog

Telefoninterviews

Führen Sie im Rahmen Ihres Einstellungsverfahrens Telefoninterviews mit Kandidaten durch? Diese Fragen für telefonische Vorstellungsgespräche helfen Ihnen bei der Auswahl der Kandidaten, die Sie zu einem persönlichen Gespräch einladen möchten.

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.