EN

Vouchers Request Book 360° Tour

Das Dilly Web - Styleguide

Set Fonts and buttons

Default Text

DesktopLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

TabletLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

MobileLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

.smaller Default Text

DesktopLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

TabletLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

MobileLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<small> or .small Default Text

DesktopLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

TabletLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

MobileLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

.medium1 Default Text

DesktopLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

TabletLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

MobileLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

.large1 Default Text

DesktopLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

TabletLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

MobileLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Headings

Desktop

.t1large Header

Tablet

.t1large Header

Mobile

.t1large Header

Desktop

Tablet

Mobile

.t1 Header

.t1 Header

.t1 Header

.t2 Header

.t2 Header

.t2 Header

.t3 Header

.t3 Header

.t3 Header

.t4 Header

.t4 Header

.t4 Header

.t5 Header

.t5 Header

.t5 Header

.t6 Header

.t6 Header

.t6 Header

.morelink

.morelink

.morelink

Background Colors

.bgweb

Header

Header .t2

Text

Button1 Button2

.bgweb2

Header

Header .t2

Text

Button1 Button2

.bglist, .bgteaser, .bgusp

Header

Header .t2

Text

Button1 Button2

.bglistalternate

Header

Header .t2

Text

Button1 Button2

.bgbar

Header

Header .t2

Text

Button1 Button2

.bghighlight

Header

Header .t2

Text

Button1 Button2

.bghighlight2

Header

Header .t2

Text

Button1 Button2

.bggallerybox

Header

Header .t2

Text

Button1 Button2

.bgheader

Header

Header .t2

Text

Button1 Button2

.bgheader2

Header

Header .t2

Text

Button1 Button2

.bgmobile

Header

Header .t2

Text

Button1 Button2

.bgfooter

Header

Header .t2

Text

Button1 Button2

.bgfooter2

Header

Header .t2

Text

Button1 Button2

Fonts

Fonts 1*

Please select

Fonts 1 Variant*

Fonts 2

Please select

Fonts 2 Variant

Fonts 3

Please select

Fonts 3 Variant

Fonts 4

Please select

Fonts 4 Variant

Fonts 5

Please select

Fonts 5 Variant

Buttons

border-radius

Button type*

Button with background

outline-width

font-size

line-height

Links

Font weight*

None

Text transform*

None

font-size

line-height

letter-spacing

General

Default

font-family*

font-size*

line-height*

letter-spacing*

tablet-font-size*

tablet-line-height*

tablet-letter-spacing*

mobile-font-size*

mobile-line-height*

mobile-letter-spacing*

Smaller

font-family*

font-size*

line-height*

letter-spacing*

tablet-font-size*

tablet-line-height*

tablet-letter-spacing*

mobile-font-size*

mobile-line-height*

mobile-letter-spacing*

Small

font-family*

font-size*

line-height*

letter-spacing*

tablet-font-size*

tablet-line-height*

tablet-letter-spacing*

mobile-font-size*

mobile-line-height*

mobile-letter-spacing*

Medium

font-family*

font-size*

line-height*

letter-spacing*

tablet-font-size*

tablet-line-height*

tablet-letter-spacing*

mobile-font-size*

mobile-line-height*

mobile-letter-spacing*

Large

font-family*

font-size*

line-height*

letter-spacing*

tablet-font-size*

tablet-line-height*

tablet-letter-spacing*

mobile-font-size*

mobile-line-height*

mobile-letter-spacing*

Headings

T1Large

font-family*

text-transform*

None

font-size*

line-height*

letter-spacing*

tablet-font-size*

tablet-line-height*

tablet-letter-spacing*

mobile-font-size*

mobile-line-height*

mobile-letter-spacing*

T1

font-family*

text-transform*

None

font-size*

line-height*

letter-spacing*

tablet-font-size*

tablet-line-height*

tablet-letter-spacing*

mobile-font-size*

mobile-line-height*

mobile-letter-spacing*

T2

font-family*

text-transform*

None

font-size*

line-height*

letter-spacing*

tablet-font-size*

tablet-line-height*

tablet-letter-spacing*

mobile-font-size*

mobile-line-height*

mobile-letter-spacing*

T3

font-family*

text-transform*

None

font-size*

line-height*

letter-spacing*

tablet-font-size*

tablet-line-height*

tablet-letter-spacing*

mobile-font-size*

mobile-line-height*

mobile-letter-spacing*

T4

font-family*

text-transform*

None

font-size*

line-height*

letter-spacing*

tablet-font-size*

tablet-line-height*

tablet-letter-spacing*

mobile-font-size*

mobile-line-height*

mobile-letter-spacing*

T5

font-family*

text-transform*

None

font-size*

line-height*

letter-spacing*

tablet-font-size*

tablet-line-height*

tablet-letter-spacing*

mobile-font-size*

mobile-line-height*

mobile-letter-spacing*

T6

font-family*

text-transform*

None

font-size*

line-height*

letter-spacing*

tablet-font-size*

tablet-line-height*

tablet-letter-spacing*

mobile-font-size*

mobile-line-height*

mobile-letter-spacing*

MoreLink

font-family*

text-transform*

None

font-size*

line-height*

letter-spacing*

tablet-font-size*

tablet-line-height*

tablet-letter-spacing*

mobile-font-size*

mobile-line-height*

mobile-letter-spacing*

BackgroundColor

BgWeb

Background

rgba-o0*

rgba-o1*

bg-color*

Opacity

Title

title-color*

t2-title-color*

t5-title-color*

Text & border

text-color*

border-color*

Link

link-color*

link-hover-color*

Button 1

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Button 2

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Form

form-bg-color*

Opacity

form-text-color*

form-border-color*

BgWeb2

Background

rgba-o0*

rgba-o1*

bg-color*

Opacity

Title

title-color*

t2-title-color*

t5-title-color*

Text & border

text-color*

border-color*

Link

link-color*

link-hover-color*

Button 1

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Button 2

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Form

form-bg-color*

Opacity

form-text-color*

form-border-color*

BgList

Background

bg-color*

Opacity

Title

title-color*

t2-title-color*

t5-title-color*

Text & border

text-color*

border-color*

Link

link-color*

link-hover-color*

Button 1

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Button 2

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

BgListAlternate

Background

bg-color*

Opacity

Title

title-color*

t2-title-color*

t5-title-color*

Text & border

text-color*

border-color*

Link

link-color*

link-hover-color*

Button 1

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Button 2

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Form

form-bg-color*

Opacity

form-text-color*

form-border-color*

BgBar

Background

bg-color*

Opacity

Title

title-color*

t2-title-color*

t5-title-color*

Text & border

text-color*

border-color*

Link

link-color*

link-hover-color*

Button 1

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Button 2

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Form

form-bg-color*

Opacity

form-text-color*

form-border-color*

BgHighlight

Background

bg-color*

Opacity

Title

title-color*

t2-title-color*

t5-title-color*

Text & border

text-color*

border-color*

Link

link-color*

link-hover-color*

Button 1

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Button 2

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

BgHighlight2

Background

bg-color*

Opacity

Title

title-color*

t2-title-color*

t5-title-color*

Text & border

text-color*

border-color*

Link

link-color*

link-hover-color*

Button 1

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Button 2

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

BgGallerybox

Background

bg-color*

Opacity

Title

title-color*

t2-title-color*

t5-title-color*

Text & border

text-color*

border-color*

Link

link-color*

link-hover-color*

Button 1

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Button 2

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

BgHeader

Background

bg-color*

Opacity

Title

title-color*

t2-title-color*

t5-title-color*

Text & border

text-color*

border-color*

Link

link-color*

link-hover-color*

Button 1

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Button 2

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

BgHeader2

Background

bg-color*

Opacity

Title

title-color*

t2-title-color*

t5-title-color*

Text & border

text-color*

border-color*

Link

link-color*

link-hover-color*

Button 1

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Button 2

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

BgFooter

Background

bg-color*

Opacity

Title

title-color*

t2-title-color*

t5-title-color*

Text & border

text-color*

border-color*

Link

link-color*

link-hover-color*

Button 1

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Button 2

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Form

form-bg-color*

Opacity

form-text-color*

form-border-color*

BgFooter2

Background

bg-color*

Opacity

Title

title-color*

t2-title-color*

t5-title-color*

Text & border

text-color*

border-color*

Link

link-color*

link-hover-color*

Button 1

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Button 2

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Form

form-bg-color*

Opacity

form-text-color*

form-border-color*

BgMobile

Background

bg-color*

Opacity

Title

title-color*

t2-title-color*

t5-title-color*

Text & border

text-color*

border-color*

Link

link-color*

link-hover-color*

Button 1

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

Button 2

bg-color*

Opacity

border-color*

text-color*

hover-bg-color*

Opacity

hover-text-color*

No Client specified! Styleguide can't be saved!