Styleguide
Headings
.t1 Headline
.t2 Headline
.t3 Headline
.t4 Headline
.t5 Headline
.t6 Headline
Default Text
Lorem 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. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis.
.defaulti Default Text
<small> or .small Default Text
Lorem 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. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis.
.medium1 Default Text
Lorem 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. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis.
.medium1i Default Text
.large1 Default Text
Lorem 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. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis.
.large1i Default Text
<a> Link
LinkLink - hover
<a class="back"> Back-Link
Back to listBack to list - hover
<ul><li>..</li></ul> Unordered List
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Facilisis in pretium nisl aliquet
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Integer molestie lorem at massa
<ol><li>..</li></ol> Ordered List
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Facilisis in pretium nisl aliquet
- Integer molestie lorem at massa
<ul class="icon1"><li>..</li></ul> Unordered List with icon
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Facilisis in pretium nisl aliquet
- Integer molestie lorem at massa
<table>..</table> Table
| # | Column1 | Column2 | Column3 |
|---|---|---|---|
| - | - | - | - |
| 1 | Lorem ipsum | dolor sit | amet dolor |
| 2 | Consectetur | adipiscing | elit integer |
<a class="button button1">..</a> (.small, .big) Button 1
SmallDefaultBigSmallDefaultBig
<a class="button button2">..</a> (.small, .big) Button 2
SmallDefaultBigSmallDefaultBig
.icon-prev, icon-next, icon-up, icon-down (with hover .iconhover)
.icon-prev, icon-next, icon-up, icon-down (with background .bgicon and hover .iconhover)
Background Colors
bgcolor
hover/activebg
descriptionbackground website (.bgweb)
background website 2 (.bgweb2)
background website gradient left (.bgwebgradientleft)
background website gradient right (.bgwebgradientright)
background header (.bgheader)
background header 2 (.bgheader2)
background mobile (.bgmobile)
background lists (.bglist)
background teaser (.bgteaser)
background list alternate (.bglistalternate)
background teaser alternate (.bgteaseralternate)
background bars, filter ecc.. (.bgbar)
background highlight (.bghighlight)
background gallery box (.bggallerybox)
background gallery gradient top (.bggallerygradienttop)
background gallery gradient top bottom (.bggallerygradienttopbottom)
background gallery gradient radius (.bggallerygradientradius)
background gallery gradient radius inverse (.bggallerygradientradiusi)
background gallery gradient diagonal bottom top (.bggallerygradientdiagonalbottomtop)
.points1v, points1h (.active) Points 1
- 1
- 2
- 3
- 1
- 2
- 3
.points2v, points2h (.active) Points 2
- 1
- 2
- 3
- 1
- 2
- 3
.points3v, points3h (.active) Points 3
- 1
- 2
- 3
- 1
- 2
- 3
.tab1 (.active) Tab 1
Tab
Tab active
.tab2 (> .active) Tab 2
TITEL/ÜBERSCHRIFT TAB 1
TITEL/ÜBERSCHRIFT TAB 2
TITEL/ÜBERSCHRIFT TAB 3
.tab3 (.active) Tab 3
Tab
Tab active (.arrowtop)
Tab active (.arrowbottom)
.tabs4 (.active) Tabs 4
Tab 1
Tab 2 active
Tab 3
.tabs5 (.active) Tabs 5
Tab 1
Tab 2 active
Tab 3
.paging1 Paging 1
.paging2 Paging 2
.paging3 Paging 3
.paging4 Paging 4
.paging5 Paging 5
Default Iconset
icon-nexticon-previcon-upicon-down icon-callsignicon-callsign-roundicon-callsign-round-invicon-enlarge icon-decreaseicon-crossicon-cross-roundicon-cross-round-inv icon-plusicon-plus-roundicon-plus-round-invicon-minus icon-minus-roundicon-minus-round-invicon-searchicon-travel-children icon-add-roomicon-remove-roomicon-add-additionalserviceicon-complete-data icon-pencilicon-pencil2icon-phoneicon-email icon-checkicon-check-roundicon-check-round-invicon-360 icon-mapicon-openfoldericon-banicon-spinner icon-menuicon-basketicon-clipboardicon-divider icon-facebookicon-twittericon-googleplusicon-youtube icon-pinteresticon-instagramicon-locationicon-download icon-zoomicon-zoominicon-zoomouticon-play icon-pauseicon-shareicon-moduleicon-star icon-star-invicon-add-calendaricon-remove-calendar
Default Form Iconset
icon-checkboxicon-checkbox-checkedicon-checkbox-disabledicon-radio icon-radio-checkedicon-radio-disabledicon-radio-checkeddisabledicon-calendar