Color Class: .color-x, .color-x-light
Background Color Class: .bg-color-x, .bg-color-x-light
Colors: black, white, gray, gray-light, gray-dark, gray-darkest, beige, beige-dark, red, orange,
yellow, brown, green, blue
Spacing Base: 4px
Variables: $spacing-sm-x
Values: 1 (4px), 2 (8px), 3 (12px)
Variables: $spacing-md-x
Values: 1 (16px), 2 (20px), 3 (24px), 4 (32px), 5 (40px), 5 (60px)
Variables: $spacing-lg-x
Values: 1 (80px), 2 (120px)
Variable: $corner-x
Extend: %corner-x
Class: .corner-x
Values: sm (112px), md (152px), lg (304px)
Heading 1
Extend: %heading-1
Class: .heading-1, .heading-1-mobile
Desktop: 66px / 110% / semi-bold
Mobile: 28px / 110% / semi-bold
Heading 2
Extend: %heading-2
Class: .heading-2
Desktop: 56px / 110% / semi-bold
Mobile: 28px / 110% / semi-bold
Heading 3
Extend: %heading-3
Class: .heading-3, .heading-3-mobile
Desktop: 40px / 110% / medium
Mobile: 22px / 125% / semi-bold
Heading 4
Extend: %heading-4
Class: .heading-4
Desktop: 24px / 120% / semi-bold
Mobile: 22px / 125% / semi-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: 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: 18px / 150% / medium
Mobile: 18px / 150% / regular
pretitle: 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.
Class: .text-pretitle
Desktop: 16px / 120% / regular
Mobile: 14px / 120% / regular
category: 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-category
Class: .text-category
Desktop: 14px / 120% / regular
caption: 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-caption
Class: .text-caption
Desktop: 14px / 130% / light
Mobile: 16px / 130% / light
Extend: %text-menu
Class: .text-menu
Desktop: 16px / 130% / bold
Extend: %text-submenu
Class: .text-submenu
Desktop: 28px / 120% / bold
Extend: %text-button
Class: .text-button
Desktop: 16px / 100% / medium
Mobile: 14px / 100% / medium
number-lg: 0123456789
Extend: %text-number-lg
Class: .text-number-lg
Desktop: 80px / 140% / bold
Mobile: 60px / 140% / bold
number-md: 0123456789
Extend: %text-number-md
Class: .text-number-md
Desktop: 24px / 120% / regular
Mobile: 48px / 120% / bold
number-sm: 0123456789
Extend: %text-number-sm
Class: .text-number-sm
Desktop: 18px / 100% / regular
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