Introduction

We classify components as a group of page elements (buttons, text, imagery etc) that create a complete ui element.

For example

‍.navigations,.footers,.headers,.FAQ sections,.testimonial sections,.client lists

Naming

When a class is specific to a component, we use a .[component-name] prefix followed by a space. The space tells us the class is specific to a complete ui element in our build.

This is very similar to the client-first style system by Finsweet. You can learn more about this here.

Structure

Below is an example of how we structure each component.

.component wrapper
— .component header
—— .component image
— .component body
——.component eyebrow
———text block
——.component title
———text block
——.component desc
———text block
——.component author
———text block
—.component footer