Global Components

Terra Global Components is a comprehensive library of reusable and customizable layout components.
Designed for scalability and error-free integration, it offers a robust collection of prebuilt HTML + SCSS, thoroughly tested styles, and helpful mixins — all ready to be adapted to any project.

Useful links

• Full Global Components List, where you’ll also find detailed instructions on how to install and integrate the library into your project.
• Visual Global Components Reference.

---

Global Components

Global components are pre-built, reusable components designed to:

• be reused across multiple projects
• follow Terra’s design and development standards
• reduce duplication and inconsistencies
• speed up development

---

How to use them

Info

When using Global Components, you do not decide the structure or design; instead, you follow the established rules defined in the library.

01. Install the library

Follow these instructions on how to install and integrate the library into your project.

02. Find the GC you want to use

Browse the README folder inside the package to find the component you want to use.

You’ll see that each global component is composed of two essential parts:

• Its HTML structure
• Its SCSS file

03. Copy-paste the HTML

Copy and paste the HTML tags used within .g--name-number__list-group elements (like p, span, or li) into your project.

Keep the class names

This elements can be changed as needed (for example, a h3 for a h2) —just make sure to keep the class names unchanged so styles are correctly applied.

04. Import SCSS

Import the component’s SCSS file into your project’s global styles.

05. Uncomment the SCSS you need

You’ll find all the editable SCSS class in here. This doesn’t mean you need to use every one of them, just uncomment the SCSS styles you need, and apply any additional custom styles.

06. Clean your SCSS

Once you’re done, remove any unused classes or commented blocks to keep your CSS clean and maintainable.

This approach ensures you only include the code your project actually needs, keeping the output clean, fast, and consistent.

---

Example of a global component

<a href="#" target="_blank" rel="noopener noreferrer" class="g--card-07">
    <div class="g--card-07__ft-items">
        <h3 class="g--card-07__ft-items__item-primary">Smart CRE</h3>
        <div class="g--card-07__ft-items__list-group">
            <p class="g--card-07__ft-items__list-group__item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
    </div>
</a>

.g--card-07 {
    @include make-card-07();
    @include make-card-07-modifier(
        $card-options: (
            "back-items": no
        ),
        $background-options: (
            "background-color": #fff,
        ),
        $border-options: (
            "border-color": rgba(map-get($color-options, a), 0.2) rgba(map-get($color-options, a), 0.2) map-get($color-options, d)
                rgba(map-get($color-options, a), 0.2),
            "border-width": 2px,
            "border-style": solid,
            "border-radius": 4px,
        ),
        $item-primary-options: (
            "className": f--font-c f--color-a,
        ),
        $list-group-item-options: (
            "className": f--font-d f--color-a,
            "text-decoration": underline,
            "text-decoration-color": transparent,
        ),
        $list-group-item-hover-options: (
            "text-decoration-color": map-get($color-options, b),
        ),
        $hover-options: (
            "transform": translateY(0),
            "border-color": map-get($color-options, d),
            "box-shadow": none,
        )
    );
}