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

Font Size Large

Font Size Medium

Font Size Regular

Font Size Small

Bold element

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. Margin Bottom Small ( 8px )
  2. Margin Bottom Medium ( 16px )
  3. Margin Bottom Large ( 24px )
  4. Margin Bottom XLarge ( 32px )
  5. Margin Bottom XXlarge ( 40px )
  6. Margin Bottom 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.