Style Guide

Lumos | v2.0.4
Components

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

Lorem ipsum dolor

u-link-color-secondary

Lorem ipsum dolor

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.

Jetzt starten–kostenlos
Ohne Kreditkarte

Heading

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

  • Funktionen
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 Erstgespräch anfragen

Mehr qualifizierte Bewerbungen und Schluss mit langwierigen Prozessen!

In 40 Tagen die richtige Mitarbeiter*in einstellen, mit bis zu 50% geringeren Kosten, minimalem Zeitaufwand und unabhängig von Personaldienstleistern.

Jetzt Erstgespräch anfragen
Letztes Jahr haben über 2.500 mittelständische Unternehmen OnApply genutzt und 180.000+ Bewerbungen erhalten.

Haben Sie eines dieser Probleme mit Ihrer Rekrutierung?

Sie kämpfen mit langwierigen Rekrutierungsprozessen, Sie erhalten zu vielen unqualifizierte Bewerbungen oder Sie geben zu viel Geld für Headhunter oder Personaldienstleister aus?

Jetzt Probleme lösen
Stellenanzeigenmanagement

Mehr qualifizierte Bewerbungen durch:

Vorqualifizierung und 300+ Jobbörsen

  • Sie werden bessere Stellenanzeigen, als Headhunter schreiben

  • Ihre Stellenanzeigen werden mit Bildern, Videos, KI, SEO und Mobil optimiert

  • Sie schreiben auf den richtigen Jobbörsen aus (über 50k+ Datensätze)
  • Das Bewerbungsformular filtert alle unqualifizierten Bewerbungen heraus
Mehr erfahren
Mehr erfahren

In 40 Tagen neue Mitarbeitende einstellen durch:

Strukturierte, klare, kurze Rekrutierungs­prozesse

  • Ein wissenschaftlich geprüfter und 1.000-Fach Praxis erprobter Prozess
  • Sie und ihre Kollegen wissen immer, was als Nächstes zu tun ist
  • Klare Bewertungskriterien für jede Bewerbung
  • Stringente Kommunikation mit Bewerbenden
  • Klare Interviewleitfäden für gute Interviews
Mehr erfahren
Mehr erfahren
Bewerbermanagement
Welche Erfolge in der Rekrutierung erzielen unsere 2.500+ Kunden?
Kundentestimonials
OnApply
00:00
/
00:00
Kundentestimonials Video

Erhalten Sie mehr qualifizierte Bewerbungen und besetzen Sie ihre Stellen in 40 Tagen

Alle Schlüsselfunktionen in einer DSGVO konformen Software, gehostet und programmiert in Deutschland.

Jetzt Erstgespräch anfragen
Alle Funktionen
Malte Weiss mit Macbook für das perfekte Recruiting

DSGVO Konform

Server in Deutschland

Verschlüsselung 256-AES

Teambesprechung bei der Bewerberwahl

⌀41

Tage

Von Aussschreibung

bis zur Einstellung

Laptop mit offener OnApply Recruiting Software

+1

Mio

Bewerbungen für Kund:innen generiert

Ihre Vorteile
mit OnApply

Persönliche Beratung und Hilfe bei der Einrichtung des perfekten Rekrutierungs­prozesses.

Einstellung neuer Mitarbeiter in unter 40 Tagen.

Kosten reduzieren + Keine Abhängigkeit von  Agenturen und Headhunter mehr.

Timur Özcan
OnApply
00:00
/
00:00
Yannik Harney
OnApply
00:00
/
00:00

170.000+ Bewerbungen im letzten Jahr für Kunden generiert

Wir installieren den perfekten Recruiting Prozess persönlich in Ihrem Unternehmen in nur 30 Tagen, so dass sie ohne Personaldienstleister qualifziertere Mitarbeiter einfach, zuverlässig und kosteneffizient einstellen können.

Jetzt Erstgespräch anfragen
Unsere größte Herausforderung war die unstrukturierte Vorauswahl – mit OnApply haben wir es geschafft, den Prozess sinnvoll zu gestalten und die Qualität der Bewerber stark zu erhöhen.
Solomiya Terletska
Geschäftsführerin, Levari GmbH
Über OnApply haben wir tatsächlich knapp über 5.000 Bewerbungen erhalten. Es deckt alle Funktionen ab, die wir in unserem Recruitingprozess brauchen – und das ganz unkompliziert.
Valentina Pelz
Recruiting & People Development, Obungi GmbH

Bessere Stellenanzeige + Bessere Jobbörsen = Bessere Bewerbungen

Die OnApply Recruiting-Software hilft Ihnen, Ihre Stellenanzeige zu verbessern, Ihren Bewerbungsprozess zu beschleunigen und die richtige Person einzustellen.

Jetzt Erstgespräch anfragen
Ressourcen

Exzellentes Rekrutierungs­know-How für ihr Unternehmen–kostenlos

3000+ Artikel und Videos über Rekrutierung aus der Praxis & Forschung an der WHU.

Vorlagen Stellenanzeigen
Fragen für Vorstellungs­gespräche
E-Mail Vorlagen
Alle Vorlagen
HR Recruiting Ressourcen für Ihr Unternehmen von OnApply

Buchen Sie jetzt Ihre persönliche Beratung

Erfahren Sie, wie OnApply Ihnen bei der Mitarbeitergewinnung helfen wird. In einem kurzen 15-minütigen Call erhalten Sie einen Einblick über die Plattform und ein Experte beantwortet Ihre Fragen.

Jetzt Erstgespräch anfragen
4.6
4.8
5.0

15

min

Minuten Beratungs-Call

Yannik Harney
OnApply
00:00
/
00:00

Effektiver Ausschreiben

Gezielter Rekrutieren

Schneller Einstellen