Styleguide

Styleguide

Colors

in der Website verwendete Farben
  • spacerpic
  • spacerpic
  • spacerpic
  • spacerpic
  • Company Color
  • spacerpic
  • spacerpic
  • spacerpic
  • spacerpic
  • Company Color Two
  • spacerpic
  • spacerpic
  • spacerpic
  • spacerpic
  • Company Color Three
  • spacerpic
  • spacerpic
  • spacerpic
  • spacerpic
  • Company Color Four
  • spacerpic
  • spacerpic
  • spacerpic
  • spacerpic
  • Global Font Color

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text

Some infotext here


Some infotext here lead


You can use the mark tag to highlight text.


This line of text is meant to be treated as deleted text.


This line of text is meant to be treated as no longer accurate.


This line of text is meant to be treated as an addition to the document.


This line of text will render as underlined


This line of text is meant to be treated as fine print.

rendered as bold text

rendered as italicized text

Lowercased text.

Uppercased text.

Capitalized text.


An abbreviation of the word attribute is attr

HTML is the best thing since sliced bread.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

  • List icons
  • can be used
  • as bullets
  • in lists

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
standarmäßig verwendete Icons, welche auch als normale Links verwendet werden. Die Größe entspricht der global eingestellten Standardschriftgrösse oder kann mit Hilfe der Klassen gesetzt werden.

Alle Icons ansehen
  • Home Icon
  • Shoppingcard Icon
  • Heart Icon
  • Login Icon
  • Logout Icon
  • Register Icon
  • User Icon
  • Users Icon
  • Arrow Icon
  • Arrow Icon
  • Arrow Icon
  • Arrow Icon

Buttons with Badges and Icons

Hinweise und Zähler zum Link

Example block-level help text here.

email@example.com

Disabled Form States

Form Validation

Input Groups

@
.00
$ .00

Pagination

Pager

Default

Aligned

Branding

in der Website verwendete Logos

Company Logo

4c positiv

Company Logo

4c negativ

Company Logo Icon

4c positiv

Company Logo Icon

4c negativ

Favicon

spacerpic

favicon

Apple Touch Icons

Apple Touch Icons
spacerpic

Apple Touch-Icon

57x75px

spacerpic

Apple Touch-Icon

60x60px

spacerpic

Apple Touch-Icon

72x72px

spacerpic

Apple Touch-Icon

76x76px

spacerpic

Apple Touch-Icon

114x114px

spacerpic

Apple Touch-Icon

120x120px

spacerpic

Apple Touch-Icon

128x128px

spacerpic

Apple Touch-Icon

144x144px

spacerpic

Apple Touch-Icon

152x152px

Windows 8

Windows 8 Tile (Kachel)
spacerpic

win8 tile

70x70px

spacerpic

win8 tile

144x144px

spacerpic

win8 tile

150x150px

spacerpic

win8 tile

310x150px

spacerpic

win8 tile

310x310px

SYSTEM

Nachrichten, ...

HTML Box

MESSAGEBOX ÖFFNEN

Javascript Box open

var buttons = {'JA, zur Home!': 'home_de.php', 'Abbrechen': ''}; wpf_msgbox("Text der Box", 5, "_id", "Weiter?", buttons);