Modules

As mentioned in Quick Project Tour, Modules are layout blocks used to organize content on a page and 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
• Utility classes

Remember

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.

---

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-* (grid) and spacing to structure its layout
• Be styled directly in the HTML module file, without needing a specific class name

---

Examples

Here are some module examples that are already dynamic with PHP:

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>