Text Styles

Fonts

Title Font: Lato (Black), font-weight: 900
Normal Font: Nunito (SemiBold), font-weight: 400
Für spezielle Auszeichnungen in der Kommunikation: CCSignLanguage

Basic

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

Title

Subtitle

Description lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. A Link

Normal Body Text lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. A Link

Red Status message

Green Status message

Gray text message

Small text message

Bold text message

Table Header text

Link

Dangerous Link

code text

small code text

Lists

Item 1
Item 2
Item 3
Item 4
- Subitem 1
- Subitem 2
- Subitem 3
Item 5

Badges

.badge 123
.badge 12356
.badge-success 55.20
.badge-danger -10
.badge .badge--right12
.badge .badge--right12356
.badge-success .badge--right55.20
.badge-danger .badge--right-10

Mark Text

This is a highlighted text

Icon Colors

color-red
color-pink
color-purple
color-deep-purple
color-indigo
color-blue
color-teal
color-green
color-deep-orange
color-brown
color-blue-grey
color-grey
color-black

Components

Buttons

Alerts

Whoops! There has been an error.

I need some attention.

Just wanted to let you know.

Everything is fine.

An error message

A warning message

An info message

A success message

Tooltips

Progress Bar

Steps

1 Benutzer
2 Berechtigungen
3 Nachricht an Benutzer

Card

This is a card to show some separated content. This may be interesting content or not. But i dont care, because it's only a Style Guide.

What will you do with this card? use it wisely.

Content Containers

Content Container

Use the content container on grey backgrounds only.

Content Panels

Panel Title 1

Panel Content 1

Panel Title 2

Panel Content 2

Layout

Spacing

The classes are named using the format {property}{side}-{size}.
Possible Values:

property: m (margin), p (padding)
side: t (top), b (bottom), l (left), r (right)
size: 0 (0px), 1 (2px), 2 (5px), 3 (10px), 4 (20px), 5 (40px), auto (auto)

Examples:

mt-0 margin-top: 0px;

mr-1 margin-right: 2px;

mb-2 margin-bottom: 5px;

ml-3 margin-left: 10px;

pt-4 padding-top: 20px;

p-5 padding: 40px;

p-auto padding: auto;

Relative Positioning

Small vertical alignment fixes:

Alignment

.align-left

.align-center

.align-right

Flexbox Grid

Full Docs: flexboxgrid.com

Fixed Ratio

col-xs-4

col-xs-8

Responsive Ratio

col-lg-4 col-sm-6 col-xs-12

Without container

col-xs-4

col-xs-8

Auto Sizing

col-xs

Offsets

col-xs-offset-3

col-xs-offset-6

Responsive Helpers

.visible-xs

.visible-sm

.visible-md

.visible-lg

.hidden-xs

.hidden-sm

.hidden-md

.hidden-lg

Forms

Responsive Forms

Name

Field with an Error *

Error Message I know words, I have the best words.

Field with a Warning

Diese IBAN ist ungültig

E-Mail

No more secrecy. No more zone of privacy. After all, what good did that do for me?

Disabled Field

Left aligned labels

Name

Field with an Error *

Error Message I know words, I have the best words.

E-Mail

No more secrecy. No more zone of privacy. After all, what good did that do for me?

A Longer Name here to break layout

Status

Offen

Radio

I am option one

I am option two

I am option three

Radio indented

I am option one

I am option two

I am option three

Checkbox

Checkboxes

I am option one

I am option two

I am option three

Form without inputs (deprecated)

	Category
Key 1	Value 1
Key 2	Value 2
Key 999999	Value with multiple pre-formatted text lines for textarea values

Table Forms (deprecated)

	Category
Form Label	*
Form Label	* Error Message I know words, I have the best words.
Number	This is a file hint, you should only enter numbers here. Make text a bit longer so it breaks to a new line.
Number	Error Message
Disabled Field
File Upload	* Error Message
Checkbox
Checkbox	Error Message
Select
Select	* Error Message
Select
Select	* Error Message
Multiline Text
Multiline Text	Error Message
Date
Date	Error Message

Table Forms with Errors (deprecated)

Form Label	* Dieses Feld ist fehlerhaft
Form Label	* Error Message I know words, I have the best words.
Number	This is a file hint, you should only enter numbers here. Make text a bit longer so it breaks to a new line.

Grid

Grid Actions

Simple Grid

	Formular	Mitglieder
	Webling Free	50
	Webling Basic	100
	Webling Plus	250
	Webling Premium	500

Full Grid

		Name	Anzahl
		Bälle	17
		Freistossdummies	13
		Slalomstangen	1
		Volleyballnetz	2
		Fussball	26

Data Grid

A table built with divs.

Feld

Daten

A nice Label

Some Data

A Label

Some more Data

A Label which is a bit longer than usual

Some Data

A Label

Some Data that is a bit longer than usual. And there is even more data here.

Brand Farben

Fürs Webling UI-Design sollten immer diese Brand Farben verwendet werden.

#367FC2

Brand Primary

--color_primary_500

#256AAB

Brand Primary Accent

--color_primary_600

#5AB30F

Brand Secondary

--color_secondary_500

#49960A

Brand Secondary Accent

--color_secondary_600

#4A5568

Brand Title Grey

--color_tw_gray700

#B3C835

Logo Grün

CMYK Farbpalette

Für Print, Werbung etc.

CMYK 38/4/90/0

Primary

CMYK 78/42/0/0

Primary

CMYK 84/50/4/0

Shadow

CMYK 100/80/32/20

Secondary

CMYK 40/20/20/100

Schwarz

Erweiterte Farbpalette

Die erweiterte Farbpalette ist für zweitrangige Gestaltungselemente, falls die Brand Farben nicht ausreichen. Sollte abgesehen von den Grautönen nur spärlich verwendet werden.

Blue

#F7FAFC

--color_primary_100

#CFE5FA

--color_primary_200

#9FC9F0

--color_primary_300

#6BA9E2

--color_primary_400

#367FC2

--color_primary_500

#256AAB

--color_primary_600

#16548E

--color_primary_700

#093A69

--color_primary_800

#042748

--color_primary_900

Green

#F8FEF2

--color_secondary_100

#DDF5C8

--color_secondary_200

#B3EE82

--color_secondary_300

#82CF46

--color_secondary_400

#5AB30F

--color_secondary_500

#49960A

--color_secondary_600

#397705

--color_secondary_700

#2B5B02

--color_secondary_800

#1C3C01

--color_secondary_900

Red

#FEF2F2

--color_danger_50

#FEE2E2

--color_danger_100

#FECACA

--color_danger_200

#FCA5A5

--color_danger_300

#F87171

--color_danger_400

#EF4444

--color_danger_500

#DC2626

--color_danger_600

#B91C1C

--color_danger_700

#991B1B

--color_danger_800

#7F1D1D

--color_danger_900

Warning

#FEFCE8

--color_warning_50

#FEF9C3

--color_warning_100

#FEF08A

--color_warning_200

#FDE047

--color_warning_300

#FACC15

--color_warning_400

#EDB605

--color_warning_500

#CA8A04

--color_warning_600

#A16207

--color_warning_700

#854D0E

--color_warning_800

#713F12

--color_warning_900

Orange

#FF7A00

--color_orange

Grey

#F7FAFC

--color_tw_gray100

#EDF2F7

--color_tw_gray200

#E2E8F0

--color_tw_gray300

#CBD5E0

--color_tw_gray400

#A0AEC0

--color_tw_gray500

#718096

--color_tw_gray600

#4A5568

--color_tw_gray700

#2D3748

--color_tw_gray800

#1A202C

--color_tw_gray900

Black & White

#FFF

--color_white

#000

--color_black

Shadows

UI Colors

var(--color_tw_gray100)

--bg_level_0

var(--color_white)

--bg_level_1

Color Theme

var(--color_primary_500)

--color_theme

var(--color_primary_600)

--color_theme_accent

Icons

<!-- usage -->
<i class="icon-plus"></i>

<!-- small icons -->
<i class="icon-plus icon--small"></i>

<!-- colored icon -->
<i class="icon-plus color-red"></i>

icon-dot

dot circle-small status

icon-subtree

subtree, folder, subfolder

icon-font

font, typeface, typography, font-family, wysiwyg

icon-stopwatch

stopwatch, time, speed, meter, chronometer, timer

icon-condition

split, arrows, decision, condition

icon-location

location, map-marker, pin

icon-external-link

new-tab, out, external, outside, popout, link, blank

icon-medal

medal

icon-share

share, out, external, outside

icon-link

link, chain, url, uri, anchor, connection

icon-unlink

unlink, link, break, connection

icon-swap

switch, arrows, change

icon-move-horizontal

arrow-resize, horizontal

icon-move-vertical

arrow-resize, vertical

icon-home

home, house, start

icon-subscription

loop, repeat, recurring, subscription, abo

icon-recurring

loop, repeat, recurring, subscription, abo

icon-twitter

twitter, brand, tweet, social

icon-instagram

instagram, brand, social

icon-linkedin

linkedin, brand, social

icon-youtube

youtube, brand, social

icon-facebook

facebook, brand, social

icon-save

floppy-disk, save

icon-presence-list

file-check, file, document, checkmark, correct, tick, page, paper, checklist

icon-address-book

address-book, contacts, book

icon-form

form, forms, inputs, buttons

icon-colors

palette, color, paint, art

icon-invoice-eur

invoice

icon-invoice-chf

invoice

icon-helfereinsatz

helfereinsatz

icon-wordpress

wordpress, brand, social, cms

icon-mailchimp

mailchimp

icon-zapier

zapier

icon-eventfrog

eventfrog

icon-configuration

equalizer, sliders, settings, preferences, dashboard, control

icon-sort-asc

sort-amount-asc, arrange, order

icon-sort-desc

sort-amount-desc, arrange, order

icon-merge

merge

icon-datatype-int

number-input

icon-datatype-autoincrement

number-input

icon-datatype-text

text-input

icon-datatype-longtext

longtext-input

icon-datatype-enum

menu, list, options, lines, hamburger

icon-datatype-multienum

menu, list, options, lines, hamburger

icon-datatype-file

file-empty, file, document, paper, page, new, empty, blank

icon-datatype-image

file-picture, file, document, file-image

icon-datatype-numeric

coin-dollar, money, cash, currency-dollar

icon-datatype-bool

checkbox-checked, checkbox, tick, checked, selected

icon-datatype-date

calendar, date, schedule, time, day

icon-move

forward, right, arrow-right

icon-more

menu, dots, more

icon-birthday

gift, present, box

icon-vote

thumbs-up, like, vote-up, rate

icon-qrcode

qrcode

icon-membergroup

folder, directory, category, browse

icon-membergroup-saved

folder-search, dicrectory, browse

icon-membergroup-all

membergroup, folder, all member

icon-reload

loop, repeat, player, reload, refresh, update, synchronize, arrows

icon-definitions-edit

database-edit, db

icon-import

import, load, add, open

icon-organization-chart

organization, chart, tree

icon-member

vcard, card, contact, member

icon-vcard

vcard, card, contact, member

icon-member-plus

member-plus

icon-entrygroup

entry entrygroup booking buchung

icon-splitentry

splitentry

icon-due

clock, time, schedule, faellig, due

icon-time

clock, time, schedule, faellig, due

icon-calendar-past

calendar-past, calendarevent

icon-calendarevent

calendar, event, date, day

icon-calendar

calendar, month, date, schedule, time, day

icon-period

calendar, month, date, schedule, time, day

icon-calendar-week

calendar, week, date, schedule, time, day

icon-history

history, time, archive, past

icon-search

search, magnifier, magnifying-glass, inspect, find

icon-filter

filter, funnel

icon-drag-handle-move

dots, drag-handle

icon-drag-handle-resize

dots, resize-handle, drag

icon-drag-handle-reorder

menu, list, options, lines, hamburger, drag

icon-menu

menu, list, options, lines, hamburger

icon-grid-list

list, todo, bullet, menu, options, grid, view

icon-grid-cards

grid, apps, squares, blocks, view

icon-entry

certificate, license, degree

icon-documentation

lamp, light, idea, tip, bulb

icon-support

lifebuoy, support, help

icon-edit

pencil, write, edit

icon-read

eye, views, vision, visit

icon-hidden

eye-blocked, views, vision, banned, blocked, forbidden, private, hidden

icon-bank

library, bank, building

icon-accounting

piggy-bank, money, save, ecommerce

icon-budget

piggy-bank, money, save, ecommerce

icon-localization

sphere, globe, internet

icon-post

newspaper, news, paper, post

icon-accounting-dashboard

stats-bars, stats, statistics, chart

icon-space-usage

pie-chart, stats, statistics, graph, dualtone

icon-api

puzzle, puzzle-piece, extension, addon, app

icon-integration

power-cord, plugin, extension

icon-twint

twint, payment

icon-payment

payment credit card money

icon-credits

credit-card, money, payment, ecommerce

icon-call

phone, telephone, contact, support, call

icon-mobile

mobile, cell-phone, handheld

icon-globe

earth, globe, language, web, internet, sphere, planet

icon-domain

earth, globe, language, web, internet, sphere, planet

icon-tag

price-tag

icon-tags

price-tags

icon-table

table, wysiwyg

icon-angle-up

arrow-up, up, top

icon-angle-right

arrow-right, right, next

icon-angle-down

arrow-down, down, buttom

icon-angle-left

arrow-left, left, previous

icon-chevron-up

arrow-up, up, top

icon-chevron-right

arrow-right, right, next

icon-chevron-down

arrow-down, down, buttom

icon-chevron-left

arrow-left, left, previous

icon-caret-down

arrow-down, down, download, bottom

icon-caret-right

arrow-right, right, next

icon-caret-left

arrow-left, left, previous

icon-caret-up

arrow-up, up, upload, top

icon-goto-first

first, player

icon-goto-last

last, player

icon-goto-previous

previous, player

icon-goto-next

next, player

icon-star-empty

star-empty, rate, star, favorite, bookmark

icon-star-full

star-full, rate, star, favorite, bookmark

icon-ok

checkmark, tick, correct, accept, ok

icon-plus-circle

plus-circle, add, sum

icon-plus-circle-filled

plus-circle, add, sum

icon-state-applied

plus-circle, add, sum

icon-cancel-circle

cancel-circle, close, remove, delete

icon-cancel-circle-filled

cancel-circle, close, remove, delete, rejected

icon-state-rejected

cancel-circle, close, remove, delete, rejected

icon-ok-circle

checkmark-circle

icon-state-confirmed

checkmark-circle

icon-mail-circle

mail, contact, support, newsletter, letter, email, envelop, social, invited

icon-state-invited

mail, contact, support, newsletter, letter, email, envelop, social, invited

icon-upload-circle

circle, upload, arrow, file

icon-star-circle

star, rate, favorite, bookmark, interested, maybe

icon-state-maybe

star, rate, favorite, bookmark, interested, maybe

icon-minus-circle

minus-circle, remove, subtract

icon-circle-empty-filled

circle, empty, filled

icon-circle-empty

circle, empty

icon-circle-placeholder

circle-css, code, curly-braces, placeholder

icon-validation-error

notification, warning, notice, note, exclamation

icon-warning

warning, sign

icon-undo

undo, left, arrow-left

icon-zoom-in

zoom-in, magnifier, magnifier-plus, enlarge

icon-zoom-out

zoom-out, magnifier, magnifier-minus, reduce

icon-plus

plus, add, sum

icon-add

plus, add, sum

icon-minus

minus, subtract, minimize, line

icon-attachment

attachment, paperclip

icon-user

user, profile, avatar, person, member

icon-role

users, group, team, members, community, collaborate, dualtone

icon-debitor

user-tie, user, user-employee, profile, avatar, person, member, job, official

icon-book

book, read, reading

icon-accountgroups

book, read, reading

icon-key

key, password, login, signin

icon-box

box, inbox, archive

icon-spinner

spinner, loading, loading-wheel, busy, wait

icon-cog

cog, gear, preferences, settings, generate, control, options

icon-print

printer, print

icon-download-archive

box-add, box, download, storage, inbox, archive

icon-download

download, save, store, inbox, arrow

icon-upload

upload, load, open, outbox, arrow

icon-file-upload

file-upload, file, document, page, paper

icon-sms

bubble, comment, chat, talk

icon-comment

bubble, comment, chat, talk

icon-forum

bubbles, comments, chat, talk, forum, discussion

icon-email

envelop, mail, email, contact, letter

icon-lock

lock, secure, private, encrypted

icon-info

info, information

icon-question

question, help, support

icon-delete

bin, trashcan, remove, delete, recycle, dispose

icon-images

images, pictures, photos, graphics, polaroids, news

icon-file-empty

file-empty, file, document, paper, page, new, empty, blank

icon-file-text

file-text, file, document, list, paper, page

icon-file-picture

file-picture, file, document, file-image

icon-file-music

file-music, file, document, file-song, file-audio

icon-file-play

file-play, file, document, file-media, file-video

icon-file-video

file-video, file, document, file-camera

icon-file-zip

file-zip, file, document, file-compressed, file-type, file-format

icon-file-code

file-xml, file, document, file-code, file-type, file-format, iframe

icon-file-member

file-member

icon-copy

copy, duplicate, files, pages, papers, documents

icon-file-link

external-link, file-link

icon-folder-outline

folder, directory, category, browse

icon-folder

folder, directory, category, browse

icon-category

folder, directory, category, browse

icon-folder-open

folder-open, directory, category, browse

icon-file-pdf

file-pdf, file, file-format

icon-file-openoffice

file-openoffice, file, file-format

icon-file-word

file-word, file, file-format, word, docx

icon-file-excel

file-excel, file, file-format, xlc

icon-calendars

calendars, multi, date

icon-close

close, remove, times

icon-remove

close, remove, times

icon-cross

close, remove, times

icon-angle-double-left

angle-double-left

icon-angle-double-right

angle-double-right

icon-check-square

check-square

icon-check

check

icon-cogs

cogs, gears

Icomoon Demo File

Webling Logos

Download: PNG SVG