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

---

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.