Mini Styleguide

Edit this elements to match your project toolkit.
Delete this page after the project is finished.

Text styles    —————————

Heading 01

Heading 02

Heading 03

Heading 04

Heading 05
Heading 06

Paragrath large ( u-font-size__large )

Paragraph regular

Paragraph small ( u-font-size__small )

Bold element

Italic element

Links doesn't have underline
  1. List item

  2. List item

  3. List item

  • List item

  • List item

  • List item

Block Quote
Button Text

All buttons should have the ( o-button ) class.

Button Text

Edit secondary buttons by adding the ( o-button__secondary ) class.

Colors    —————————

Colors can be edited using the Style ( s ) panel on the left. Follow these steps:

  1. Select the swatch in the color picker.
  2. Click "Edit swatch".
  3. Now you can edit the name and change the color.

Margins    —————————

To archive consistency, this template only uses margin-bottom for all elements. The following are created:

  1. u-margin-bottom__small ( 8px )
  2. u-margin-bottom__medium ( 16px )
  3. u-margin-bottom__large ( 24px )
  4. u-margin-bottom__xlarge ( 32px )
  5. u-margin-bottom__2xlarge ( 40px )
  6. u-margin__none ( 0px ) Removes all margins.

Opacities    —————————

By default, all elements have opacity to 100%, we have four classes to reduce the opacity by 20% each.

This is opacity 100. Default.

This is opacity 80.

This is opacity 60.

This is opacity 40.

This is opacity 20.

Extras    —————————

This class centers text. Under this text is an element with the "u-hidden" class.

This class centers text.