A component is a group of page elements (buttons, text, imagery etc) that create a complete ui element.

When naming each component we first declare the component type (Card, Navigation etc) followed by a dash and number prefix. By including a number prefix it allows us to have multiple component variants.

Our component names are inspired by untitled UI. You can learn more about this here.

Semantic Approach

To make components more flexbile avoid naming based on the content inside. Fox example a card may house product information. If we name it .product card-1 it means we can no longer use the same component if there's different content inside. If we call it .card-1 we are able to use the same component for product content, faq content, article content etc.

Below is an example of how to structure each component using some common ingredients.