🧩 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.

---

✅ Best practices

🔒 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;
  }
}

Example:

Let’s see an example with media queries.

<section>
    <div class="f--container">
        <div class="f--row f--gap-c">
            <div class="f--col-4 f--col-tablets-12">
            <p>Item 1</p>
            </div>
            <div class="f--col-4 f--col-tablets-12">
            <p>Item 2</p>
            </div>
            <div class="f--col-4 f--col-tablets-12">
            <p>Item 3</p>
            </div>
        </div>
    </div>
</section>