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

You can explore the full component list in the Global Components repository, where you’ll also find detailed instructions on how to install and integrate the library into your project.

You can also see a visual reference in the Terra Global Components preview.

---

📦 Installation and usage

You can find detailed instructions on how to install and integrate the library into your project in Global Components repository.

Once installed, you can:

1. Copy the basic HTML structure provided for each component
2. Import the associated SCSS file into your project

---

✍️ How do we use them?

Each global component is composed of two essential parts:

• Its HTML structure
• Its SCSS file

---

✅ Workflow

Working with Terra Global Components follows a simple and efficient flow:

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

   • Each README includes the base HTML structure and the corresponding SCSS.

2. Copy and paste the HTML into your project.

   • The HTML tags used within .g--name-number__list-group elements (like p, span, or li) can be changed as needed — just make sure to keep the class names unchanged so styles are correctly applied.

3. Import the component’s SCSS file into your global styles if you haven’t already.

4. Uncomment only the SCSS styles you need, and apply any additional custom styles.

5. Clean up: Once you’re done, remove any unused classes or commented blocks to keep your CSS lean and maintainable.

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

👇 Example workflow

<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,
        )
    );
}

🔍 Important links

• 📁 Global Components repository
• 🌐 Global Components preview

---