Style Guide
Headings
H1 Headline
H2 Headline
H3 Headline
H4 Headline
H5 Headline
H6 Headline
Headings (Responsive)
H1 Headline
H2 Headline
H3 Headline
H4 Headline
H5 Headline
H6 Headline
Body (responsive)
Body
(size:16px weight:600 style:normal)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
Font Weights
.font-light (weight:400)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.font-normal (weight:600)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.font-bold (weight:800)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
Font Sizes
.text-12 (size:12px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.text-14 (size:14px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.text-16 (size:16px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.text-18 (size:18px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.text-22 (size:22px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.text-24 (size:24px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.text-26 (size:26px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.text-32 (size:32px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
Font Sizes (Medium 750px & up)
.md-text-12 (size:12px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.md-text-14 (size:14px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.md-text-16 (size:16px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.md-text-18 (size:18px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.md-text-22 (size:22px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.md-text-24 (size:24px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.md-text-26 (size:26px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.md-text-32 (size:32px)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
Font Styles
.italic (style:italic)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
.not-italic (style:normal)
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam lacinia, odio nunc aliquet nunc, quis aliquam nisl
Colors
--color-black
.bg-black
.font-black
--color-black-light
.bg-black-light
.font-black-light
--color-white
.bg-white
.font-white
--color-red
.bg-red
.font-red
--color-dark-red
.bg-dark-red
.font-dark-red
--color-light-red
.bg-light-red
.font-light-red
--color-off-white
.bg-off-white
.font-off-white
--color-off-white-light
.bg-off-white-light
.font-off-white-light
--color-yellow
.bg-yellow
.font-yellow
--color-dark-grey
.bg-dark-grey
.font-dark-grey
--color-grey
.bg-grey
.font-grey
--color-light-grey
.bg-light-grey
.font-light-grey
Icons
Dawn Icons
Icons in snippets/icon-accordion.liquid
Added Icons
Grilles (flex)
grid grid--3-col grid--4-col-tablet grid--6-col-desktop
grid grid--2-col grid--3-col-tablet grid--5-col-desktop
grid grid--1-col grid--2-col-tablet grid--4-col-desktop
grid grid--1-col grid--1-col-tablet grid--3-col-desktop
grid grid--1-col grid--1-col-tablet grid--2-col-desktop
grid grid--1-col grid--1-col-tablet grid--1-col-desktop
Buttons
.button
.button.button--primary
.button.button--secondary
.button.button--tertiary
.button.button--small
.button.button--full-width
.button.button--small.button--full-width.font-red.bg-yellow
Links
link link primary link secondary link tertiary
.button
.button.button--primary
.button.button--secondary
.button.button--tertiary
.button.button--small
link full width.button.button--full-width
link small.button.button--small.button--full-width.font-red.bg-yellow