Pre-Defined Utilities

Fill Colors

Primary

When choosing which color belongs to which class, try to assign the most important colors alphabetically. ie. A is the primery, B is the secondary, and so on.

u-colorA

u-colorB

u-colorC

u-colorD

Font-Color

u-pColorA

The quick brown fox

u-pColorB

The quick brown fox

The quick brown fox

u-pColorC

The quick brown fox

u-pColorD

The quick brown fox

Font-Family

To define the main font-famliy of the website, do it directly from the body . But make sure you don't do any other styling from there, neither size, color, spacing, etc. The font-family includes the font-weight (400 - Normal, 300 - Light, 700 - Bold, etc)

Define the font family with letters and the variable with numberical values

u-fontA300

The quick brown

u-fontA400

The quick brown

u-fontA500

The quick brown

u-fontA600

The quick brown

u-fontA700

The quick brown

u-fontA800

The quick brown

u-fontB300

The quick brown

u-fontB400

The quick brown

u-fontB500

The quick brown

u-fontB600

The quick brown

u-fontB700

The quick brown

u-fontB800

The quick brown

u-fontB300

The quick brown

u-fontB400

The quick brown

u-fontB500

The quick brown

u-fontC600

The quick brown

u-fontB700

The quick brown

u-fontB800

The quick brown

Font-Style

To define the main font-famliy of the website, do it directly from the body . But make sure you don't do any other styling from there, neither size, color, spacing, etc.

u-pLeft

The quick brown fox

u-pCenter

The quick brown fox

u-pRight

The quick brown fox

Font-Size

Do not modify the font sizes or line-heigh, this are pre-defined and should be used for any project. If needed a custom style use u-pSize{size} (ie. u-pSize24)

Margins: Desktop

If bigger margins are needed, use the same class stucture: u-m{side}{size}. If you need to use margins on specific UI elements, continue with the base 8 numbers and make sure it is for specific purposes.

For negative margins use: u-m{side}{size}Neg

For percentage margins use: u-m{side}{size}Per

bottom, top, right, left (all)

u-m0

u-m8

u-m12

u-m16

u-m24

u-m32

u-m40

u-m48

top

u-mt0

u-mt8

u-mt12

u-mt16

u-mt24

u-mt32

u-mt40

u-mt48

right

u-mr0

u-mr8

u-mr12

u-mr16

u-mr24

u-mr32

u-mr40

u-mr48

bottom

u-mb0

u-mb8

u-mb12

u-mb16

u-mb24

u-mb32

u-mb40

u-mb48

left

u-ml0

u-ml8

u-ml12

u-ml16

u-ml24

u-ml32

u-ml40

u-ml48

Paddings

If bigger paddings are needed, continue with the same class stucture: u-p{side}{size}. If you need to use paddings on specific UI elements, continue with the base 8 numbers and make sure it is for specific purposes.

For negative paddings use: u-p{side}{size}Neg

For percentage paddings use: use: u-p{side}{size}Per

bottom, top, right, left (all)

u-p0

u-p8

u-p12

u-p16

u-p24

u-p32

u-p40

u-p48

top

u-pt0

u-pt8

u-pt12

u-pt16

u-pt24

u-pt32

u-pt40

u-pt48

right

u-pr0

u-pr8

u-pr12

u-pr16

u-pr24

u-pr32

u-pr40

u-pr48

bottom

u-pb0

u-pb8

u-pb12

u-pb16

u-pb24

u-pb32

u-pb40

u-pb48

left

u-pl0

u-pl8

u-pl12

u-pl16

u-pl24

u-pl32

u-pl40

u-pl48

Border-Radius

u-br0

u-br2

u-br4

u-br6

u-br8

u-br10

u-br12

u-br14

Border-Width

u-b0

u-b1

u-b2

u-b3

Border-Color

u-bColorA

u-bColorB

u-bColorC

u-bColorD

Dropshadows

u-dsA

u-dsB

u-dsC

u-dsD

Floats

u-floatLeft

u-floatRight

u-floatNone

Display Settings

u-inlineBlock

u-block

u-inline

u-displayNone

Overflow

u-ovHidden

u-ovVisible

u-ovScroll

u-ovScrollAuto

Pre-Defined Components

This are the most common components so we have a consistent naming within different projects.

Buttons

This component styling should have the base button styling that is common on the majority of the application/website including size, font-size, color, border style/color/size, paddings, margins, etc. To add additional styling that is specify for one component use --modifiers. For example: c-Button.c-Button--signup

base

c-Button

Button

c-Button

is-disabled

Button

importance --modifiers

c-Button

c-Button--default

Button

c-Button

c-Button--default

is-disabled

Button

c-Button

c-Button--secondary

Button

c-Button

c-Button--secondary

is-disabled

Button

c-Button

c-Button--tertiary

Button

c-Button

c-Button--tertiary

is-disabled

Button

This is an example of the is-disabled class being modified for this specific modifier component --secondary.

size --modifiers

c-Button

c-Button--s

Button

c-Button

c-Button--l

Button

c-Button

c-Button--xl

Button

Lists

The pre-defined naming on the list-elements purpose is to have a base naming to use in all lists. Feel free to change the style as needed, or (in the case of applications only) create custom components names as needed using the syntax: c-{List}{Name}

c-ListA

c-ListB

Tabs

This is just an example of a tab, edit the design or create new ones based on the same syntax: c-Tabs{Letter Alphabetical order}

c-TabsA

c-TabsA-menu

c-TabsA-tab

c-TabsA-tabText

c-TabsA-content

c-TabsA-pane

Dropdown

The pre-defined naming on the list-elements purpose is to have a base naming to use in all lists. Feel free to change the style as needed, or (in the case of applications only) create custom components names as needed.

Note: Dropdowns are elements from webflow and have states such as Open already assigned, you can style those to define the state instead of using is-{state} as with custom created elements.

c-DropdownA

c-DropdownA-toggle

c-DropdownA-placeholder

c-DropdownA-arrowIcon

c-DropdownA-list

c-DropdownA-listItem

c-DropdownB

c-DropdownB-toggle

c-DropdownB-placeholder

c-DropdownB-arrowIcon

c-DropdownB-list

c-DropdownB-listItem

Features

c-Features-item

Erstellung von Zwischenzeugnissen und Abschlusszeugnissen

Erstellung von Arbeitszeugnissen in deutscher und englischer Sprache

Über 10.000 geprüfte, rechtssichere Textbausteine

Englische Benutzeroberfläche einstellen

Je nachdem, wie international Sie in Ihrem Unternehmen aufgestellt sind, können Sie sich die Benutzeroberfläche des Haufe Zeugnis Managers Premium auch komplett in Englisch anzeigen lassen.

Mehr erfahren

Arbeitszeugnisse umwandeln

Mit dem Haufe Zeugnis Manager können Sie ganz einfach aus einem Zwischenzeugnis ein Abschlusszeugnis machen oder ein deutsches Zeugnis in ein englisches Zeugnis übersetzen.

Mehr erfahren

Steps

c-Steps-item

1

Zeugnis anlegen

Sie wählen, ob Sie ein Abschluss-, Zwischen- oder einfaches Zeugnis erstellen möchten: Mit wenigen Eingaben können Sie ein neues Arbeitszeugnis anlegen. Zudem kann der Prozess der Zeugniserstellung vom Mitarbeiter oder der Linie angestoßen werden.

Testimonials

c-Testimonial-listItem

„Sehr einfache Bedienung, da man sich bei unterschiedlichen Satzformulierungen keine Gedanken über Wiederholungen machen muss. Der Workflow zur weiteren Bearbeitung durch den Vorgesetzten inklusive Erinnerungsfunktion ist außerordentlich nützlich - seither vergessen die Vorgesetzten die Bewertung nicht mehr und der Prozess wird deutlich beschleunigt! Insgesamt ein sehr tolles, zeitsparendes Tool.“

Jörg Thomas Bacherer

Personalleiter, WÖRWAG PHARMA GmbH & Co.KG

Referenzen

c-ReferenzenColLeft

c-ReferenzenColRight

Bettina Riedel

Human Resources Specialist, Danone GmbH

„Was mich begeistert, ist der automatische Workflow. Ich kann in dem Tool einrichten, dass eine automatische Erinnerung an die Führungskräfte und an mich verschickt wird. Sehr zufrieden bin ich auch mit den einzelnen Textbausteinen und dem gesamten Handling.“

Lesen Sie hier die Case Study Danone

Eva Jochheim

Human Resources, Warsteiner Brauerei

„Uns war es wichtig, dass die Vorgesetzten besser und mehr eingebunden werden, denn sie sind auch für ihre Mitarbeiter zuständig. Da die Software leicht und unkompliziert zu bedienen ist, gab es auch seitens der Vorgesetzten keinen Widerstand gegen die Nutzung.“

Lesen Sie hier die Case Study Warsteiner

c-Webinare-colLeft

c-Webinare-date

c-Webinare-dateMonth

c-Webinare-colRight

Webinare

c-Webinare-colLeft

c-Webinare-date

c-Webinare-dateMonth

c-Webinare-colRight

Webinare

c-ClientsSection

c-Logos

c-Logos-image

Funktionen

c-FunktionenRow

c-FunktionenRow

col

c-Funktionen-imageLeft

c-Funktionen-imgMobileGif

c-FunktionenRow-colRight

Arbeitszeugnisse einfach und übersichtlich verwalten

Die Startseite dient Ihnen als Zeugnis-Cockpit und liefert Ihnen die wichtigsten Informationen zu allen angelegten Arbeitszeugnissen auf einen Blick. Sie haben optimale Filter- und Suchmöglichkeiten.

Informationen zur Zeugnisverwaltung

c-FunktionenRow

c-FunktionenRow

c-FunktionenRow-colLeft

col

c-Funktionen-imageRight

c-Funktionen-imgMobileGif

Zeugnisanträge gemeinsam bearbeiten

Ob Zeugnisempfänger, Führungskraft oder HR-Abteilung: Mit dem Haufe Zeugnis Manager Premium können Sie alle am Zeugnisprozess Beteiligten komfortabel einbeziehen.

Informationen zur gemeinsamen Bearbeitung

Hero

c-Hero-text

SENKEN SIE IHRE KOSTEN IM ZEUGNISMANAGEMENT

c-Hero

c-Hero--funktionen

ALLE FUNKTIONEN DES

ZEUGNISGENERATOR

c-Hero

Haufe Zeugnis

MANAGER PREMIUM

Arbeitszeugnisse schnell und rechtssicher erstellen

Form Elements

syntax: c-{element}{Letter Alphabetical order}

c-FormA

c-LabelA

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

c-InputA

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

c-SelectA

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

c-TextAreaA

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

c-Footer