Styleguide

Styleguide

Background and Text color generator

Letter Spacing

UTEMOBLER ( Wide )

UTEMOBLER ( Wider )

UTEMOBLER ( Widest )

UTEMOBLER ( 0.25rem )

UTEMOBLER ( 0.5rem )

UTEMOBLER ( 1rem )

UTEMOBLER ( 1.5rem )

Color

bg-primary3
bg-secondary1
bg-secondary2
bg-secondary3

Font Family

The quick brown fox jumps over the lazy dog - font-sofiaPro

The quick brown fox jumps over the lazy dog - font-canelaDeck

Font Weight

The quick brown fox jumps over the lazy dog - font-regular

The quick brown fox jumps over the lazy dog - font-medium

The quick brown fox jumps over the lazy dog - font-semibold

HEADLINE - CANELA DECK

The quick brown fox jumps
over the lazy dog - font-4xl

The quick brown fox jumps
over the lazy dog - font-3xl

The quick brown fox jumps
over the lazy dog - font-2xl

The quick brown fox jumps
over the lazy dog - font-xl

The quick brown fox jumps
over the lazy dog - font-lg

The quick brown fox jumps
over the lazy dog - font-md

The quick brown fox jumps
over the lazy dog - font-sm

The quick brown fox jumps
over the lazy dog - font-base

The quick brown fox jumps
over the lazy dog - font-xs

TITLE - SOFIA PRO

The quick brown fox jumps
over the lazy dog - font-4xl

The quick brown fox jumps
over the lazy dog - font-3xl

The quick brown fox jumps
over the lazy dog - font-2xl

The quick brown fox jumps
over the lazy dog - font-xl

The quick brown fox jumps
over the lazy dog - font-lg

The quick brown fox jumps
over the lazy dog - font-md

The quick brown fox jumps
over the lazy dog - font-sm

The quick brown fox jumps
over the lazy dog - font-base

The quick brown fox jumps
over the lazy dog - font-xs

TEXT - SOFIA PRO

The quick brown fox jumps
over the lazy dog - font-4xl

The quick brown fox jumps
over the lazy dog - font-3xl

The quick brown fox jumps
over the lazy dog - font-2xl

The quick brown fox jumps
over the lazy dog - font-xl

The quick brown fox jumps
over the lazy dog - font-lg

The quick brown fox jumps
over the lazy dog - font-md

The quick brown fox jumps
over the lazy dog - font-sm

The quick brown fox jumps
over the lazy dog - font-base

The quick brown fox jumps
over the lazy dog - font-xs

Buttons Filled Opacity

Link Disabled Link Link Light Disabled Link Light
Link Icon
Link Icon

Buttons Swipe

Buttons Scale

Grid Columns ( .grid-columns .grid-gutter )

1
2
3
4
5
6
7
8
9
10
11
12

Vertical Rhythm Margin

1
2

Corner Radius

rounded-general
rounded-block
rounded-button

Input Fields

Error message

Radio

Checkbox

Accordion

This is a long content example.

  • Item 1
  • Item 2
  • Item 3

More details about the content...

This is a long content example.

  • Item 1
  • Item 2
  • Item 3

More details about the content...

This is a long content example.

  • Item 1
  • Item 2
  • Item 3

More details about the content...

This is a long content example.

  • Item 1
  • Item 2
  • Item 3

More details about the content...

Drawer

Sidebar Content 1

Add your sidebar content here.

Sidebar Content 2

Add your sidebar content here.