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


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.


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