Header Size 1: Also can use class: h1

Header Size 2: Also can use class: h2

Header Size 3: Also can use class: h3

Header Size 4: Also can use class: h4

Header Size 5: Also can use class: h5

Header Size 6: Also can use class: h6

Paragraph text: Lorem as a link sit amet, consectetur adipiscing elit. Pellentesque eget sapien eu sem imperdiet sagittis eu eu massa. Cras id eros ut arcu dapibus fringilla. Aliquam luctus orci vitae nunc ultrices pretium. Aliquam vitae malesuada velit. Fusce ligula diam, varius ut vehicula ut, vulputate et justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet ex venenatis, ornare diam in, vestibulum neque. Etiam vel tristique turpis. Vivamus sit amet sem tellus. Sed at ipsum libero. Phasellus consectetur erat non sapien semper, ac ornare nisl commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sed odio sit amet tellus vehicula vehicula. Phasellus sapien tortor, egestas et odio id, sollicitudin fermentum risus. Quisque pulvinar ipsum nulla, vitae maximus velit aliquet facilisis.

h1 tag using h3 class

h2 tag using h4 class

h3 tag using h5 class

h4 tag using h6 class

h5 tag using h2 class

h6 tag using h1 class

CLASSES: Primary Color Backgrounds

• bg-primary-lightest
• bg-primary-light
• bg-primary
• bg-primary-dark
• bg-primary-darkest

CLASSES: Secondary Color Backgrounds

• bg-secondary-lightest
• bg-secondary-light
• bg-secondary

CLASSES: Grey/Gray Color Backgrounds

• bg-grey-lightest
• bg-grey-light
• bg-grey
• bg-grey-dark
• bg-grey-darkest

CLASSES: Primary Font Color

• color-primary-lightest

• color-primary-light

• color-primary

• color-primary-dark

• color-primary-darkest

CLASSES: Secondary Font Color

• color-secondary-lightest

• color-secondary-light

• color-secondary

CLASSES: Grey/Gray Font Color

• color-grey-lightest

• color-grey-light

• color-grey

• color-grey-dark

• color-grey-darkest

Sizes

Bear in mind that there are no specific mobile or tablet sizes unless you merely want to do IOS devices. Breakpoints are exactly what they say, Break Points. Most components could have their own bespoke breakpoints which are not globally required.

The naming of the breakpoints is irrelevent, they could have been named Smallest, Small, Medium and Large.

The following are the global break points.

• 450px : Smallest
• 600px : Mobile
• 768px : Tablet
• 950px : Desktop

Resize the page to see the blocks hide based on the page size using hide classes

The site also aims at Mobile first, meaning styling goes upward in value using min-width in media queries. There are only a few instances where the smallest requires a lot of styling not needed for desktop and so if you need to do this then use max-width instead of min-width

As seen in the Break points example, there is some content you want to show or hide based on the size of the page.

For example, the following items show when it reaches it's breakpoint name: Resize the page to find out.

You can also change the direction.

For example, the following items hide when it reaches it's breakpoint name: Resize the page to find out.