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
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
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
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
Extend: %link-x-icon-left / %link-x-icon-right / %link-x-icon-round-left / %link-x-icon-round-right
Class: .link-x-icon-left / .link-x-icon-right / .link-x-icon-round-left / .link-x-icon-round-right
Icon List Class: .arrow-right, .arrow-left, .arrow-down, .arrow-up, .share, .download, .external,
.minus, .plus
Default Icon: .arrow-right
Variable: $corner-x
Extend: %corner-x
Class: .corner-x
Values: sm (6px), md (12px), lg (20px)
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)
Class: .grid-container
Usage: use to wrap element inside a limited box size.
Class: .grid-column-container
Usage: use to wrap elements which should play as columns. Should be inside a .grid-container.
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.
tablet: 4 columns
mobile: 2 columns
Usage: For each breakpoint, a new breakpoint and @include grid-column(x); can be set manually.
tablet: 5 columns
mobile: 1 columns
tablet: 2 columns
mobile: 2 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.
tablet: 4 columns
mobile: 2 columns
right offset: 2 columns