Components

As you already read in Quick Project Tour, 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.

---

Component Types in Terra

In Terra, you’ll find two different kind of components:

• Custom components → project-specific components fully controlled by the developer.
  • they use the c— prefix and are labeled with letters
  • example: .c--card-b, .c--cta-a
• Global components → pre-built components that fit and can be reused in multiple projects
  • they use the g-- prefix and are labeled with numbers
  • example: .g--card-01, .g--layout-05

Info

The decision to use a global or custom component starts in Figma and is evaluated collaboratively between UX/UI and Development. Design consistency, reusability, and project needs are considered when choosing the best approach.

If you believe a different solution would work better (for example, turning a custom component into a global one, or vice versa) suggestions and discussions are always welcome.

---

Custom Components

When to create them?:

• when the component does not exist in the global library
• when the design or behavior is too specific
• when adapting a global component would add unnecessary complexity

---

Extend a component

In Terra, components can extend other components — whether they are global(g--) or custom (c--).

There are two common ways to extend a component:

01. Extending directly in the HTML

The simplest way to extend a global component is by adding its class directly in the markup.

This is very common when you want a specific element (for example, a button inside a CTA) to inherit the appearance of a global button component.

<section class="g--cta-01">
  <div class="g--cta-01__ft-items">
      <div class="g--cta-01__ft-items__content">
          <h2 class="g--cta-01__ft-items__content__item-primary">
              CTA-01 This is the Contact call to action
          </h2>
          <div class="g--cta-01__ft-items__content__list-group">
              <a
                href="#"
                class="g--cta-01__ft-items__content__list-group__item
                g--btn-01--fifth"
                target="_blank"
                rel="noopener noreferrer">
                contact
              </a>
          </div>
      </div>
  </div>
</section>

What is happening here?

• The component itself is g--cta-01.
• The <a> element includes an additional class: g--btn-01--fifth.
• Because of this, the <a> inherits the styles of the global button component (g--btn-01) with its fifth modifier.

This approach is clean and explicit. You are not modifying the CTA component — you are simply composing it with a global button style.

02. Extending from CSS using @extend

<div class="c--card-w__media-wrapper__ft-items">
      <p class="c--card-w__media-wrapper__ft-items__title"><?php echo $text ?></p>
      <div class="c--card-w__media-wrapper__ft-items__wrapper">
        <div class="c--card-w__media-wrapper__ft-items__wrapper__content">
          <p class="c--card-w__media-wrapper__ft-items__wrapper__content__author">
          <?php echo $name ?>
          </p>
          <p class="c--card-w__media-wrapper__ft-items__wrapper__content__subtitle">
          <?php echo $position ?>
          </p>
        </div>
        <img class="c--card-w__media-wrapper__ft-items__wrapper__media" src="<?php echo $image['url'] ?>" alt="logo" />
      </div>
      <button class="c--card-w__media-wrapper__ft-items__btn">
        This button has global components stylying
      </button>
    </div>

and its scss:

c--card-w__media-wrapper__ft-items__btn {
    @extend .g--btn-03; // here
    @extend .u--position-absolute;
    bottom: $measure * 3;
    right: $measure * 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity $time-b $ease-standard-a;
    z-index: 3;
    @media all and ($viewport-type: $mobile) {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: calc(100% - #{$measure * 5});
    }
}

---

Best practices

Here are some tips when building custom components

• If a component has 2 layers, you should use ft_items and bg_items.
• If a component uses more than 4 or 5 nested levels, consider creating a sub-component for better organization and maintainability.
• Strive for consistency in naming, formatting, and structure across all components to keep the codebase clean and easy to understand.

SCSS Tips:

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