🧱 Modules

Modules are layout blocks used to organize content on a page.
They can include one or more components — like CTAs, image blocks, or card grids — and are named exactly as they appear in Figma (e.g. Hero with image + rectangles, Text left + accordion right, Industries slider…).

🧩 How do we use them?

Unlike components, modules don’t have their own SCSS file or custom class.
They are styled directly in the HTML using:

✅ Foundation classes (e.g. .f--sp-b, .f--background-a)
✅ Utility classes (e.g. .u--text-align-center, .u--width-100)
🚫 No .c--* class, and no SCSS styling is required

This keeps the system clean and consistent — modules only define layout and structure, while components take care of the styling.

🏷️ Naming

Each module should be named:

Using the same label as in Figma
In plain text (e.g. hero-with-image-rectangles, text-left-accordion-right, industries-slider)
Without requiring any special class naming convention

📦 What a module can include

A module can:

Be a wrapper for a global component (e.g. a simple CTA block that imports g--cta-01)
Contain multiple nested components and layout logic (e.g. a Features module with 3 cards)
Use .f--container, .f--row, .f--col-* and spacing utilities to structure its layout
Be styled directly in the HTML module file, without needing a specific class name

💡 Examples

Module: Small heading + paragraph + button

This is useful when the layout already comes defined inside the component (like g--layout-02).

 <?php include(locate_template('components/layout/layout-02.php', false, false)); ?>

Module: Row of clickable cards

In this case, the module builds its layout using .f—container, .f—row, and .f—col-*, and includes one or more components (e.g. a card) inside.

<section class="f--background-b">
    <div class="f--container">
        <div class="f--row">
            <div class="f--col-3">
                <?php include(locate_template('components/card/card-a.php', false, false)); ?>
            </div>
        </div>
    </div>
</section>