Style Guide

This style guide page contains styles and components that are to be used throughout a website.

HTML Headings

Błękitni heading

H1

Błękitni heading

H2

Błękitni heading

H3

Błękitni heading

H4
Błękitni heading
H5
Błękitni heading
H6

Headings Classes

heading-xlarge

heading-xlarge

heading-large

heading-large

heading-medium

heading-medium

heading-small

heading-small
heading-xsmall
heading-xsmall

HTML Classes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

All Paragraphs (HTML Tag)
Block Quote
Block quote (HTML Tag)
Text Link
All Links (HTML Tag)

  • No bullet list

  • No bullet list

  • Unordered list

  • Unordered list

  1. Ordered list

  2. Ordered list

Text Sizes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-size-tiny

Text Weights

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-weight-bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-weight-semibold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-weight-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-weight-normal

Text Styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-style-italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-style-strikethrough

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-style-allcaps

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-style-muted

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-style-nowrap
Block Quote
text-style-quote
Text Link
text-style-link

Text Aligns

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-align-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-align-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-align-right

Text Colors

Phasellus a nulla

text-color-primary

Phasellus a nulla

text-color-primary-56

Phasellus a nulla

text-color-primary-32

Phasellus a nulla

text-color-secondary

Phasellus a nulla

text-color-secondary-56

Phasellus a nulla

text-color-secondary-32

Colors

primary
primary-56
primary-32
secondary
secondary-56
secondary-32
blue
blue-hover

Background Colors

background-primary
background-secondary

Icons classes

finsweet Image 2
icon-small
finsweet Image 2
icon-medium
finsweet Image 2
icon-large
finsweet Image 2
icon-1x1-small
finsweet Image 2
icon-1x1-medium
finsweet Image 2
icon-1x1-large

Icons

menu
close
search-bag
search

Margin

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-top
margin-right
margin-bottom
margin-left
margin-horizontal
margin-vertical
margin-0-all

Padding

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-top
padding-right
padding-bottom
padding-left
padding-horizontal
padding-vertical
padding-0-all

Padding

max-width-xxsmall
max-width-xsmall
max-width-small
max-width-medium
max-width-large
max-width-xlarge
max-width-xxlarge
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait