Styleguide

Class Names

All class names include two parts:

Atomic

  1. 1-letter prefix based on the type of component:
    • a- for atoms
    • m- for molecules
    • o- for organisms
  2. the rest of the class name based on the Block Element Modifier convention, where the block and element are separated by a double underscore, and the element and modifier are separated by a double dash

Example

Atomic

.a-button--white

stands for atom, “button” (actual name of the atom), white variant/modifier.

⤺ back to docs homepage