Style Guide

Visual Style Guide for the Global Widgets

Heading styles with vw-h-style-1 class

h1 Lorem Ipsum is simply dummy text of the printing

h2 Lorem Ipsum is simply dummy text of the printing

h3 Lorem Ipsum is simply dummy text of the printing

h4 Lorem Ipsum is simply dummy text of the printing

h5 Lorem Ipsum is simply dummy text of the printing
h6 Lorem Ipsum is simply dummy text of the printing

Heading styles with vw-h-style-2 class

h1 Lorem Ipsum is simply dummy text of the printing

h2 Lorem Ipsum is simply dummy text of the printing

h3 Lorem Ipsum is simply dummy text of the printing

h4 Lorem Ipsum is simply dummy text of the printing

h5 Lorem Ipsum is simply dummy text of the printing
h6 Lorem Ipsum is simply dummy text of the printing

Heading styles with vw-h-style-3 class

h1 Lorem Ipsum is simply dummy text of the printing

h2 Lorem Ipsum is simply dummy text of the printing

h3 Lorem Ipsum is simply dummy text of the printing

h4 Lorem Ipsum is simply dummy text of the printing

h5 Lorem Ipsum is simply dummy text of the printing
h6 Lorem Ipsum is simply dummy text of the printing

Heading styles with vw-h-style-4 class

h1 Lorem Ipsum is simply dummy text of the printing

h2 Lorem Ipsum is simply dummy text of the printing

h3 Lorem Ipsum is simply dummy text of the printing

h4 Lorem Ipsum is simply dummy text of the printing

h5 Lorem Ipsum is simply dummy text of the printing
h6 Lorem Ipsum is simply dummy text of the printing

Heading styles for Large screen vw-h-style-lg class

h1 Lorem Ipsum

h2 Lorem Ipsum

h3 Lorem Ipsum

h4 Lorem Ipsum

h5 Lorem Ipsum
h6 Lorem Ipsum

Heading styles for Extra Large screen vw-h-style-xl class

h1 Lorem Ipsum

h2 Lorem Ipsum

h3 Lorem Ipsum

h4 Lorem Ipsum

h5 Lorem Ipsum
h6 Lorem Ipsum

Heading styles for Extra-Extra Large screen vw-h-style-xxl class

h1 Lorem Ipsum

h2 Lorem Ipsum

h3 Lorem Ipsum

h4 Lorem Ipsum

h5 Lorem Ipsum
h6 Lorem Ipsum

Paragraph styles

Paragraph Style 1

Normal font style

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Bold font style

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Italic font style

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Small vw-p-sm

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Large vw-p-lg

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Extra Large vw-p-xl

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Paragraph Style 2

Normal font style

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Bold font style

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Italic font style

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Small vw-p-sm

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Large vw-p-lg

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Extra Large vw-p-xl

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Paragraph Style 3

Normal font style

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Bold font style

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Italic font style

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Small vw-p-sm

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Large vw-p-lg

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Extra Large vw-p-xl

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

ul Unordered List without class

  • Unordered List Item
  • Unordered List Item
  • Unordered List Item
  • Unordered List Item
    • 2nd Level Unordered List Item
    • 2nd Level Unordered List Item
      • 3rd Level Unordered List
      • 3rd Level Unordered List
      • 3rd Level Unordered List
    • 2nd Level Unordered List Item
    • 2nd Level Unordered List Item
  • Unordered List Item
  • Unordered List Item

ol Ordered List without class

  1. Ordered List Item
  2. Ordered List Item
  3. Ordered List Item
  4. Ordered List Item
    1. 2nd Level Ordered List Item
    2. 2nd Level Ordered List Item
      1. 3rd Level Ordered List
      2. 3rd Level Ordered List
      3. 3rd Level Ordered List
    3. 2nd Level Ordered List Item
    4. 2nd Level Ordered List Item
  5. Ordered List Item
  6. Ordered List Item

Text Colors

Text Color Black - vw-color-1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Text Color White - vw-color-2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Text Color Brand Strong - vw-color-3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Text Color Brand Accent - vw-color-4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Background Color Classes

Background Color Black

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


vw-bg-color-1
Background Color White

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


vw-bg-color-2
Background Color Brand Strong

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


vw-bg-color-3
Background Color Brand Accent

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


vw-bg-color-4

Buttons


btn primary


btn primary outlined

btn secondary


btn secondary outlined

btn third


btn third outlined

btn brand-accent


brand-accent outlined

Small Buttons


btn small primary


btn small primary outlined

btn small secondary


btn small secondary outlined

btn small third


btn small third outlined

btn small brand-accent


btn small brand-accent outlined

Form Elements

Default Style

Form Elements

Style with - vw-farm-container

Form Elements




!