Component Page - Sanderson Plc

Buttons

.btn-primary
.btn-primary .btn-primary--outline
.btn-arrow
.btn-tag
.btn-social

Colours

.border-yellow

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus architecto non quas, officia sequi sed modi minima optio animi et harum odio voluptatibus perferendis unde quam magni, laudantium vero illo.

.bg-yellow
.text-secondary

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus architecto non quas, officia sequi sed modi minima optio animi et harum odio voluptatibus perferendis unde quam magni, laudantium vero illo.

.bg-teal-200
.text-teal-600

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus architecto non quas, officia sequi sed modi minima optio animi et harum odio voluptatibus perferendis unde quam magni, laudantium vero illo.

.bg-teal-600
.text-secondary-medium

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus architecto non quas, officia sequi sed modi minima optio animi et harum odio voluptatibus perferendis unde quam magni, laudantium vero illo.

.bg-teal-200-medium
.text-brand-red

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus architecto non quas, officia sequi sed modi minima optio animi et harum odio voluptatibus perferendis unde quam magni, laudantium vero illo.

.bg-brand-red
.text-brand-purple

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus architecto non quas, officia sequi sed modi minima optio animi et harum odio voluptatibus perferendis unde quam magni, laudantium vero illo.

.bg-brand-purple

forms

.form-contact

Fonts

.font-primary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, sit reprehenderit rerum ullam saepe fugiat ipsam cum et nulla.

.font-secondary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, sit reprehenderit rerum ullam saepe fugiat ipsam cum et nulla.

Components

.text-9xl

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-9xl .font-secondary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-8xl

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-8xl .font-secondary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-7xl

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-7xl .font-secondary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-6xl

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-6xl .font-secondary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-5xl

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-5xl .font-secondary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-4xl

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-4xl .font-secondary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-3xl

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-3xl .font-secondary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-2xl

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-2xl .font-secondary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-xl

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-xl .font-secondary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-lg

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-ml

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-base

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-s

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

.text-xs

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolores deserunt incidunt odit voluptates possimus, ab nam, numquam unde iure at! Excepturi, veritatis? Est harum obcaecati tempore, numquam iusto aut!

Weights

.font-extrabold

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, sit reprehenderit rerum ullam saepe fugiat ipsam cum et nulla.

.font-bold

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, sit reprehenderit rerum ullam saepe fugiat ipsam cum et nulla.

.font-normal

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, sit reprehenderit rerum ullam saepe fugiat ipsam cum et nulla.

Wsysiwyg containers

Lorem ipsum dolor sit amet consectetur, this is a link dolorum this is bold molestiae inventore! this is italic sint iusto repellendus, nihil consequuntur voluptatum amet repudiandae quidem commodi? Maxime, vitae?

unordered list
  • lorem ipsum dolar amet
  • lorem ipsum dolar amet
  • lorem ipsum dolar amet
  • lorem ipsum dolar amet
  • lorem ipsum dolar amet
  • lorem ipsum dolar amet
ordered listed
  1. lorem ipsum dolar amet
  2. lorem ipsum dolar amet
  3. lorem ipsum dolar amet
  4. lorem ipsum dolar amet
  5. lorem ipsum dolar amet
  6. lorem ipsum dolar amet

lorem ipsum dolar sit

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed aperiam, alias hic facilis corrupti, architecto officia excepturi repellendus id pariatur provident facere sequi reiciendis recusandae accusantium adipisci consequuntur officiis iusto!

lorem ipsum dolar sit

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed aperiam, alias hic facilis corrupti, architecto officia excepturi repellendus id pariatur provident facere sequi reiciendis recusandae accusantium adipisci consequuntur officiis iusto!

lorem ipsum dolar sit

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed aperiam, alias hic facilis corrupti, architecto officia excepturi repellendus id pariatur provident facere sequi reiciendis recusandae accusantium adipisci consequuntur officiis iusto!

lorem ipsum dolar sit

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed aperiam, alias hic facilis corrupti, architecto officia excepturi repellendus id pariatur provident facere sequi reiciendis recusandae accusantium adipisci consequuntur officiis iusto!

“This is a Blockquote"
lorem ipsum dolar sit

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed aperiam, alias hic facilis corrupti, architecto officia excepturi repellendus id pariatur provident facere sequi reiciendis recusandae accusantium adipisci consequuntur officiis iusto!

lorem ipsum dolar sit

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed aperiam, alias hic facilis corrupti, architecto officia excepturi repellendus id pariatur provident facere sequi reiciendis recusandae accusantium adipisci consequuntur officiis iusto!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed aperiam, alias hic facilis corrupti, architecto officia excepturi repellendus id pariatur provident facere sequi reiciendis recusandae accusantium adipisci consequuntur officiis iusto!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed aperiam, alias hic facilis corrupti, architecto officia excepturi repellendus id pariatur provident facere sequi reiciendis recusandae accusantium adipisci consequuntur officiis iusto!