Colors
Jade Dark
Jade
Black
Grey Darker
Grey Dark
Grey Medium
Grey light
White
Error
              Color Class: .color-x
            
              Background Color Class: .bg-color-x
            
              Colors: black, white, grey-darker, grey-dark, grey-medium, grey-light, jade, jade-dark, error
            
Headings

Heading 1

              Extend: %heading-1
            
              Class: .heading-1
            
              Desktop: 70px / 110% / bold
            
              Mobile: 34px / 120% / bold
            

Heading 2

              Extend: %heading-2
            
              Class: .heading-2
            
              Desktop: 58px / 120% / bold
            
              Mobile: 34px / 120% / bold
            

Heading 3

              Extend: %heading-3
            
              Class: .heading-3
            
              Desktop: 46px / 120% / bold
            
              Mobile: 34px / 120% / bold
            

Heading 4

                Extend: %heading-4
              
                Class: .heading-4
              
                Desktop: 38px / 130% / bold
              
                Mobile: 26px / 130% / bold
              
Heading 5
                Extend: %heading-5
              
                Class: .heading-5
              
                Desktop: 32px / 150% / bold
              
                Mobile: 19px / 140% / bold
              
Heading 6
                Extend: %heading-6
              
                Class: .heading-6
              
                Desktop: 21px / 140% / bold
              
                Mobile: 19px / 130% / bold
              
Texts

default: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro aliquid labore numquam? Maxime ex vel, quo velit ipsa, iusto quaerat tempore, voluptatum enim voluptatibus explicabo. Laborum eius officiis tempore! Voluptate.

              Extend: %text
            
              Class: .text
            
              Desktop: 17px / 145% / regular
            
              Mobile: 16px / 150% / regular
            

lg: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro aliquid labore numquam? Maxime ex vel, quo velit ipsa, iusto quaerat tempore, voluptatum enim voluptatibus explicabo. Laborum eius officiis tempore! Voluptate.

              Extend: %text-lg
            
              Class: .text-lg
            
              Desktop: 19px / 160% / regular
            
              Mobile: 16px / 145% / regular
            

sm: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro aliquid labore numquam? Maxime ex vel, quo velit ipsa, iusto quaerat tempore, voluptatum enim voluptatibus explicabo. Laborum eius officiis tempore! Voluptate.

              Extend: %text-sm
            
              Class: .text-sm
            
              Desktop: 14px / 150% / regular
            

label: Lorem ipsum dolor sit.

              Extend: %text-label
            
              Class: .text-label
            
              Desktop: 16px / 140% / bold
            

label-sm: Lorem ipsum dolor sit.

              Extend: %text-label-sm
            
              Class: .text-label-sm
            
              Desktop: 12px / 116.6% / bold
            
              Mobile: 16px / 140% / bold
            

button: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro aliquid labore numquam? Maxime ex vel, quo velit ipsa, iusto quaerat tempore, voluptatum enim voluptatibus explicabo. Laborum eius officiis tempore! Voluptate.

              Extend: %text-button
            
              Class: .text-button
            
              Desktop: 14px / 120% / bold
            

hyphenate: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

              Class: .hyphenate
            
              Use with lang="" attribute
            

line-clamp: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

              Usage with include: line-clamp(2)
            
              Pass x lines as argument
            
              Default lines: 3
            

ellipsis: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro aliquid labore numquam?

              Class: .ellipsis
            
              Needs to define width
            
Buttons
              Extend: %button-dark
            
              Class: .button-dark
            
              Extend: %button-light
            
              Class: .button-light
            
              Extend: %button-x-icon-left / %button-x-icon-right
            
              Class: .button-x-icon-left / .button-x-icon-right
            
              Icon List Class: .arrow-right, .arrow-left, .arrow-down, .arrow-up, .share, .download, .external,
              .minus, .plus
            
              Default Icon: .arrow-right
            
              Extend: %button-x-icon-small / %button-x-icon-big
            
              Class: .button-x-icon-small / .button-x-icon-big
            
              Icon List Class: .arrow-right, .arrow-left, .arrow-down, .arrow-up, .share, .download, .external,
              .minus, .plus
            
              Default Icon: .arrow-right
            
Corners
Sm
Md
Lg
            Variable: $corner-x
          
            Extend: %corner-x
          
            Class: .corner-x
          
            Values: sm (6px), md (12px), lg (20px)
          
Spacing
              Variable: $spacing-x
            
              Sizes: xl (120px), lg (80px), md (32px), sm (16px), xs(8px)
            
              Variable: $spacing-mobile-x
            
              Sizes: xl (64px), lg (40px), md (20px), sm (12px), xs(4px)
            
Grid Container
I am an element inside grid-container.
            Class: .grid-container
          
            Usage: use to wrap element inside a limited box size.
          
Grid Container Column
I am a .grid-column-container, inside a .grid-container.
            Class: .grid-column-container
          
            Usage: use to wrap elements which should play as columns. Should be inside a .grid-container.
          
Grid Column
6 columns
            Include: @include grid-column(x);
          
            Usage: use to set a number of columns for an element. Elements should be wrapper around a
            .grid-column-container element.
          
desktop: 6 columns
tablet: 4 columns
mobile: 2 columns
            Usage: For each breakpoint, a new breakpoint and @include grid-column(x); can be set manually.
          
desktop: 4 columns
tablet: 5 columns
mobile: 1 columns
desktop: 7 columns
tablet: 2 columns
mobile: 2 columns
Grid Column Offset
desktop: 6 columns
tablet: 4 columns
mobile: 2 columns
left offset: 2 columns
            Include: @include grid-offset-left(x);
          
            Include: @include grid-offset-right(x);
          
            Usage: use to add an offset to an element, based in a column number. Can be used to left or right
            offset. Can have manual breakpoints.
          
desktop: 6 columns
tablet: 4 columns
mobile: 2 columns
right offset: 2 columns
Cookie Consent with Real Cookie Banner