También style guide

Heading 1

Heading

Heading 2

Heading

Heading 3

Heading

Heading 4

Heading

Heading 5

Heading

Heading 6

Heading

Paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Unordered list

  • This is a list item
  • This is a list item
  • This is a list item

Ordered list

  1. This is a list item
  2. This is a list item
  3. This is a list item

Paragraphe large

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

Rich text

This is an h2 heading inside rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is an h3 heading inside rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is an h4 heading inside rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

  • This is a list inside a rich text
  • This is a list inside a rich text
  • This is a list inside a rich text
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

bg-black

bg-white

bg-orange

bg-yellow

Color

text-black

text-white

text-grey

Alignement

text-left

text-center

text-right

Links

Text Link

Primary button

Primary button

Secondary button

Secondary button

grid

col
col
col
col
col
col
col
col
col
col

grid desktop

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

grid Tablet

col-md-1
col-md-11
col-md-2
col-md-10
col-md-3
col-md-9
col-md-4
col-md-8
col-md-5
col-md-7
col-md-6
col-md-6
col-md-12
md-hide
md-no-margin

grid Landscape

col-sm-1
col-sm-11
col-sm-2
col-sm-10
col-sm-3
col-sm-9
col-sm-4
col-sm-8
col-sm-5
col-sm-7
col-sm-6
col-sm-6
col-sm-12
sm-hide
sm-no-margin

grid Mobile

col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6
col-xs-12
xs-hide
xs-no-margin

Col left - Col right / row full width

col left
col right

Display : Flex horizontal

flex-horizontal

Display : Flex vertical

flex-vertical

Align start

align-start
align-start
align-start

Align center

align-center
align-center
align-center

Align end

align-end
align-end
align-end

Align stretch

align-stretch
align-stretch
align-stretch

Justify start

justify-start
justify-start

Justify center

justify-center
justify-center

Justify end

justify-end
end

Justify between

justify-between
justify-between

Justify around

justify-around
justify-around

Self align columns

self-start
self-center
self-end

Margin

margin bottom 8

margin bottom 4

margin bottom 3

margin bottom 2

margin bottom 1

margin bottom 0.5

margin bottom 0.2

margin 0

margin top 0.2

margin top 0.5

margin top 1

margin top 2

margin top 3

margin top 4

margin top 8

Padding

padding bottom 8

padding bottom 4

padding bottom 3

padding bottom 2

padding bottom 1

padding bottom 0.5

padding bottom 0.2

padding 0

padding top 0.2

padding top 0.5

padding top 1

padding top 2

padding top 3

padding top 4

padding top 8

Margin

margin left 0.2

margin left 0.5

margin left 1

margin left 2

margin left 4

margin left 8

margin right 0.2

margin right 0.5

margin right 1

margin right 2

margin right 4

margin right 8

Padding

padding left 0.2

padding left 0.5

padding left 1

padding left 2

padding left 4

padding left 8

padding right 0.2

padding right 0.5

padding right 1

padding right 2

padding right 4

padding right 8

margin 1 / 2 / 3 / 4 col

ml-1-col
ml-2-col
ml-3-col
ml-4-col
mr-1-col
mr-2-col
mr-3-col
mr-4-col
ml-1-col

overflow

Overflow-auto

Overflow-hidden

Overflow-scroll

Alex Class's

align-start

align-center

align-end

align-stretch

justify-start

justify-center

justify-end

justify-between

justify-space-around