Grid System

The table of grid system sizes

Device Width

≥ 992px

< 992px

< 767px

< 479px

Max Container Width

1320px

100%

100%

100%

Spacing System

Spacing - Desktop

screenshot

130 px

60 px

130 px

- Paddings Tops and Bottom for blocks - 130 px
- Inside of Blocks (between headlines and inside a content block) - 60px

Spacing - Tablet

screenshot

80 px

60 px

80 px

- Paddings Tops and Bottom for blocks - 80 px
- Inside of Blocks (between headlines and inside a content block) - 60px

Spacing - Mobile

screenshot

60 px

40 px

80 px

- Paddings Tops and Bottom for blocks - 60 px
- Inside of Blocks (between headlines and inside a content block) - 40px

Color Palette

Primary

#FF4C00

#ffffff

#333333

#6e6e6e

Secondary

#222222

#e5e5e5

#ffffff

#1e263b

Typography

Headers - Desktop

Heading 1

Heading 1

Heading 1

Heading 1

Heading 1
Heading 1

Headers - Desktop

Heading 1

Heading 1

Heading 1

Heading 1

Heading 1
Heading 1

Headers - Mobail

Heading 1

Heading 1

Heading 1

Heading 1

Heading 1
Heading 1

Body

Paragraph

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.

Paragraph Large

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.

Links

Link With Arrow

Links

  • List item
  • List item
  • List item
  • List item
  • List item

Rich Text

Aliquam vulputate velit a dignissim mattis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta, sem quis consequat scelerisque, velit urna pellentesque velit, ut posuere diam sapien in purus. Morbi id lacinia ex. Suspendisse ante libero, feugiat vel nisl semper, euismod iaculis nunc. Donec feugiat pulvinar magna, a luctus elit consectetur tempor. Phasellus molestie bibendum lectus, et aliquam neque iaculis nec. Sed non porttitor nulla.

Pellentesque non cursus leo, eu vestibulum ipsum. Aliquam in elit lorem. Aliquam vulputate velit a dignissim mattis. Mauris ac semper nisi, vitae gravida tortor. Maecenas vestibulum massa a ultricies.

Sed non metus tincidunt.

Cras placerat malesuada mi, sed suscipit arcu posuere a. Etiam sed dui ac justo pharetra finibus vel at dolor. Cras eget risus rhoncus, euismod dui non, dapibus mauris. Praesent porta dolor turpis, non blandit velit placerat a. Nunc auctor facilisis est, sed faucibus nulla consequat porta. Nunc fringilla sem in dolor dictum eleifend.

Rich Image

Nulla mollis orci magna.

Sed non metus tincidunt, egestas felis a, imperdiet sapien. Mauris rutrum tortor et massa hendrerit imperdiet. Nulla mollis orci magna, in consectetur leo consectetur non. Aliquam ut imperdiet felis, vel pharetra mauris.

  • The rich text element allows you to create and format headings
  • Headings, paragraphs, blockquotes, figures, images, and figure captions
  • A rich text element can be used with static or dynamic content.

Quote

Pellentesque non cursus leo, eu vestibulum ipsum. Aliquam in elit lorem. Aliquam vulputate velit a dignissim mattis. Mauris ac semper nisi, vitae gravida tortor. Maecenas vestibulum massa a ultricies.

Buttons

Primary Button

Margins

Helper margin classes are available to add a margin between elements and keep spacing values consistent and unified throughout the site.

Margin bottom 10px
Margin Bottom 10
Margin bottom 15px
Margin Bottom 15
Margin bottom 20px
Margin Bottom 20
Margin bottom 30px
Margin Bottom 30
Margin bottom 40px
Margin Bottom 40
Margin bottom 50px
Margin Bottom 50
Margin bottom 110px
Margin Bottom 110