Quorn-hcp Styleguide

Components

Colors

Light

.text--light

.bg--light

Dark

.text--dark

.bg--dark

Grey

.text--grey

.bg--grey

.bg--grey--light

.bg--grey--dark

A

.text--a

.bg--a

B

.text--b

.bg--b

.bg--b--dark

C

.text--c

.bg--c

Typography

Headings

All heading elements from h1-h6 are available via classes .h1-.h6 allowing you to style any element as a heading.

h1 heading (.h1)

h1’s are displayed at 34px on mobile, 50px on tablet and 65px on desktop

h2 heading (.h2)

h2’s are displayed at 24px on mobile, 32px on tablet and 40px on desktop

h3 heading (.h3)

h3’s are displayed at 22px on mobile, 26px on tablet and 30px on desktop

h4 heading (.h4)

h4’s are displayed at 18px on mobile, 22px on tablet and 26px on desktop

Body copy

Consectetur adipisicing elit. Reiciendis placeat. Quos dolore officia minus veritatis ullam cumque quod. Omnis at praesentium, dolores dolor beatae consequatur fugiat explicabo veritatis tempora, ea atque dolorum amet, quos quaerat corporis possimus minima natus laboriosam velit, eveniet nam illum. Quam quasi quis nemo deleniti ullam, in, iusto ut voluptatum nam voluptate hic, possimus nobis. Perspiciatis expedita iste cum dolorum minima porro blanditiis eum ea harum, qui, maxime sint ratione. Exercitationem?

Veniam distinctio autem in voluptas beatae, aspernatur, similique eveniet. Iusto culpa nam, rerum hic vitae tempore voluptas eaque dolorum tempora distinctio dolor quasi quidem aperiam voluptatibus perferendis quas magni blanditiis molestiae vel?

Display Text

Display text utilities can be applied to any element. Typically used for headings where h1 through h6 do not cater.

Display 1

.display-1 is 40px on mobile, 65px on tablet and 90px on desktop

Display 2

.display-2 is 35px on mobile, 58px on tablet and 80px on desktop

Lead body copy `.lead`

Lead body copy is essentially the same as .h3, this should be used for intro paragraphs etc in articles, as opposed to headings. Don't use .h3 for this use case, incase the styles become decoupled in future.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero aspernatur voluptates magnam laudantium ipsa nemo voluptatibus, quos perspiciatis illum. Tenetur.

Text alignment utility classes

.text--left

.text--center

.text--right

Responsive text alignment utility classes

Along with standard text alignment utility classes we also have responsive alignment classes allowing you to align text from breakpoints.

.text--left-tablet-up

.text--center-tablet-up

.text--right-tablet-up

.text--left-desktop-up

.text--center-desktop-up

.text--right-desktop-up

.text--left-wide-up

.text--center-wide-up

.text--right-wide-up

Text transform utility classes

.text-lowercase

.text--uppercase

.text--capitalize

.text--capitalize-first

Lists

Unordered list `ul`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Ordered list `ol`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Unstyled `.list--unstyled`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Definition list `dl`

Lorem ipsum dolor sit amet: Consectetur adipiscing elit
Integer molestie lorem at massa: Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit: Aenean sit amet erat nunc

Definition list horizontal `.list-horizontal`

Lorem ipsum dolor sit amet: Consectetur adipiscing elit
Integer molestie lorem at massa: Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit: Aenean sit amet erat nunc

Back to the top