Starting with basic typography:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Body text Lorem Ipsum
And small text

The default font size switches between 14px, 16px and 18px based on breakpoints. The rest scales along with these.

The pages are divided into discrete sections: Teal

The pages are divided into discrete sections: Blue2

The pages are divided into discrete sections: Blue3

The pages are divided into discrete sections: Grey

The pages are divided into discrete sections: Yellow

The pages are divided into discrete sections: White

Containers

In sections control the width of the text. This one is a medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et nunc ipsum. Aenean magna felis, lobortis a tortor a, scelerisque finibus purus. Morbi ante purus, tincidunt a arcu a, commodo vulputate justo. Proin sed tristique diam, condimentum interdum tortor. Curabitur non nibh et mi molestie rutrum. In faucibus laoreet nunc sed malesuada. Phasellus eu eleifend metus. Suspendisse sed ultrices leo. Phasellus nunc lorem, lobortis a orci a, dapibus rhoncus mauris.

Button CTA Button Secondary Button Light

Here we have some prose, formatted left aligned and stuff (in a Small container).

  • UL works as you'd expect;
  • Like this