TYPOGRAPHY

Heading Classes

heading-style-h1

The quick brown fox jumps over the lazy dog

heading-style-h2

The quick brown fox jumps over the lazy dog

heading-style-h3

The quick brown fox jumps over the lazy dog

heading-style-h4

The quick brown fox jumps over the lazy dog

heading-style-h5
The quick brown fox jumps over the lazy dog
heading-style-h6
The quick brown fox jumps over the lazy dog
TYPOGRAPHY

Text Sizes

text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

text-size-xsmall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

TYPOGRAPHY

Labels

label-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

label-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

label-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

label-xsmall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

TYPOGRAPHY

Text Colors

text-color-white

text-color-white

text-color-black

text-color-black

text-color-secondary

text-color-secondary

TYPOGRAPHY

Text Alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
TYPOGRAPHY

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-italic

text-style-italic

text-style-link

text-style-link

text-style-muted

text-style-muted

text-style-allcapps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-quote

Sample text is being used as a placeholder.

text-style-2lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines

text-style-3lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

utility

Buttons

Sizes
button
Saznaj više
button
is-small
Button
Variants
button
is-secondary
Button Text
Icon Left
button
is-xlarge
is-icon-left
Button
button
is-large
is-icon-left
Button
button
is-icon-left
Button Text
button
is-small
is-icon-left
Button Text
button
is-secondary
is-small
is-icon-left
Button Text
button
is-secondary
is-small
is-icon-left
Button Text
Icon Right
button
is-xlarge
is-icon-right
Button
button
is-large
is-icon-right
Button
button
is-icon-right
Button
button
is-small
is-icon-right
Button
Icon Only
button
is-icon-only
button
is-small
is-icon-only
utility

Forms

form_field-label
form_input
form_input
is-icon-left
form_input
is-icon-right
form_input
is-large
is-icon-left
form_input
is-text-area
is-short
form_input
is-text-area
form_input
is-text-area
is-tall
form_checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
utility

Icons

icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large
utility

Badges

badge
Badge
badge
is-xsmall
Badge
badge
is-small
Badge
badge
is-large
Badge
utility

Utility System

hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
div-square
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
image-cover
utility

Background Colors

background-color-white
background-color-primary
LAYOUT

Structure Classes

page-wrapper
main-wrapper
padding-global
padding-section-small
padding-section-medium
padding-section-large
padding-section-xlarge
button-group
LAYOUT

Containers

container-xsmall
container-small
container-medium
container-large
LAYOUT

Max Widths

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

Margins

Direction Classes
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Size Classes
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-custom1
margin-custom2
margin-custom3
LAYOUT

Paddings

Direction Classes
padding-top
padding-bottom
padding-left
padding-right
padding-vertical
padding-horizontal
Size Classes
margin-xhuge
padding-tiny
paddng-xxsmall
paddng-small
paddng-medium
paddng-large
paddng-xlarge
paddng-
paddng-huge
paddng-xhuge
paddng-xxhuge
paddng-
paddng-
paddng-
paddng-xsmall