Styleguide

Lidea Styleguide

Messages

Der Gutscheincode "xxyyzz" ist ungültig.

Sie haben Gutscheincode "xxyyzz" angewendet.

Lorem Ipsum dolor si amet

Colors

black

black-hover

grey-dark

grey-light

white

success

warn / alert

error

Typography

Headline h1

Headline h2

Headline h3

Headline h4

Headline h5

Headline h6

COPY TEXT Lorem ipsum dolor Link 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

COPY TEXT BOLD Lorem ipsum dolor Textlink 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

CAPTION Lorem ipsum dolor Link 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

CAPTION BOLD Lorem ipsum dolor Textlink 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Item 1
Item 2
Item 3
Item 4
Item 5

Buttons

Regular Link

a.button a.button.secondary a.button.tertiary

a.button[disabled] a.button.secondary[disabled] a.button.tertiary[disabled] Regular Link [disabled]

Form Elements

E-Mail *

Please enter a valid email address (Ex: johndoe@domain.com).

Anrede

Vorname

Nachname

Firma

Straße / Hausnummer

Adressenzusatz

Postleitzahl

Stadt

Land

Phone Number

Nachricht

Radio Buttons

Red

Green

Blue (Disabled)

This is a required field.

Checkbox

Change Email

Change Password

Checkbox - required

change address

change test - disabled

Checkbox - required - note

Checkbox1

This is a required field.

Special Select

Address

Max Mustermann
Mustermannstr. 1
11111 Musterstadt
Deutschland

Icons

account
arrow-left-long
arrow-left-short
arrow-right-long
arrow-right-short
bag
check
chevron-down
chevron-left
chevron-right
chevron-up
close
creditcard
delete
edit
heart-filled
heart-header-filled
heart-header
heart
menu
minus
pin
plus
refresh
search
truck
world

Overlays

Example Overlay Content

Lorem ipsum dolor Link 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor Textlink 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Off-Canvas

Offcanvas Content

Logos

tables

xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy
xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy
xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy
xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy
xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy
xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy
xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy

xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy
xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy
xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy
xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy
xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy
xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy
xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy	xyxyxy

bulma tables

Sphäre

Zylinder

Achse

Auge links

-0.25

Auge rechts

0.25

-0.25

26.5