🧩 Components

Components are the building blocks of our web pages.
They are modular, reusable elements that can also nest within each other to create more complex and functional structures.

---

🛠️ How do we use them?

In most projects, components come pre-built from our global components library.
Design uses them to build interfaces, and development implements them according to each project’s design system.

Here you can see a preview of the global components we currently have available.

However, there are always exceptions — components that need to be created from scratch, such as custom cards, links, or buttons that don’t exist in our global components’ library.

For these custom cases, we follow a set of best practices to keep the system consistent and scalable.

👉 Learn more about how global components are structured in the Global Components page.

---

How to build them

🔒 Reserved words and naming conventions

We maintain an internal document that defines the naming conventions for components, modifiers, and elements.
We follow the BEM methodology (Block–Element–Modifier), which improves readability and helps organize large codebases.

• c--card-a → Block (custom component)
• c--card-a__title → Element
• c--card-a--second → Modifier

Feel free to contribute improvements — this doc is always evolving.

🎯 One class per component

Each component should have its own CSS class, typically following these rules:

• Custom components use the c-- prefix and are labeled with letters.

  → Example: .c--card-a, .c--layout-b

• Global components use the g— prefix and are labeled with numbers

  → Example: .g--card-01, .g--layout-05

💡 Foundation classes in HTML

Foundations (.f--*) are meant to be used within the component’s SCSS, not directly in the HTML class attribute.

This keeps the HTML clean and ensures that visual logic is encapsulated in the component itself.

NOTE!

🔔 Important: This does not mean you can’t use foundation classes in HTML at all — It simply means you should not mix them with the main class of a component.

That means we should avoid this:

🚫 Wrong

<div class="c--card-a f--sp-b f--background-a">
  <p class="f--color-c">Text</p>
</div>

🌟 Great!

<div class="c--card-a">
  <p class="c--card-a__title">Text</p>
</div>

.c--card-a {
  @extend .f--background-a;
  @extend .f--sp-b;
  &__title {
    @extend .f--color-c;
    padding: $measure*2;
    @media all and ($viewport-type:$mobile) {
      padding: $measure*5;
    }
  }
}

Tips

• If a component has 2 layers, you should use ft_items and bg_items.
• z-index values should only be positive and always need to have position: relative, absolute, or fixed.
• @extend should only be used with foundation classes and utilities.
• If a component uses more than 4 or 5 nested levels, consider creating a sub-component for better organization and maintainability.
• Components are built for the inside, not the outside. In most cases, you should not use margins on the outer edges of a component.
• All values for margin, padding, width, and height should use the $measure variable. There might be cases where you need 50% or 100%, but if you need to add other values, please reach out to Andres or Amaia for guidance.
• Strive for consistency in naming, formatting, and structure across all components to keep the codebase clean and easy to understand.