HTML Structure

At Terra, we build clean, semantic HTML using a 12-column grid system and BEM naming conventions. This section covers the essentials you need to create well-structured, maintainable markup.

---

The 12-Column Grid

Every layout at Terra is built on a flexible 12-column grid that adapts to different screen sizes. The grid has three main components:

Container → Row → Column

<section class="u--pt-10 u--pb-10">
    <div class="f--container">
        <div class="f--row">
            <div class="f--col-12">
                <!-- Your content here -->
            </div>
        </div>
    </div>
</section>

Breakdown:

• .f--container - Centers content and sets maximum width
• .f--row - Creates a flex container for columns
• .f--col-12 - Defines column width (12 = full width)

Column Sizes

Columns are based on 12 divisions. Common patterns:

<!-- Full width -->
<div class="f--row">
    <div class="f--col-12">
        <p>Full width content (100%)</p>
    </div>
</div>

<!-- Two equal columns -->
<div class="f--row">
    <div class="f--col-6">
        <p>Left column (50%)</p>
    </div>
    <div class="f--col-6">
        <p>Right column (50%)</p>
    </div>
</div>

<!-- Three equal columns -->
<div class="f--row">
    <div class="f--col-4">Column 1 (33%)</div>
    <div class="f--col-4">Column 2 (33%)</div>
    <div class="f--col-4">Column 3 (33%)</div>
</div>

<!-- Asymmetric layout (66% / 33%) -->
<div class="f--row">
    <div class="f--col-8">
        <p>Main content (66.66%)</p>
    </div>
    <div class="f--col-4">
        <p>Sidebar (33.33%)</p>
    </div>
</div>

Responsive Columns

Columns adapt to different screen sizes using responsive classes:

<!-- Desktop: 3 columns, Tablets: 2 columns, Mobile: 1 column -->
<div class="f--row">
    <div class="f--col-4 f--col-tablets-6 f--col-mobile-12">
        <p>Card 1</p>
    </div>
    <div class="f--col-4 f--col-tablets-6 f--col-mobile-12">
        <p>Card 2</p>
    </div>
    <div class="f--col-4 f--col-tablets-12 f--col-mobile-12">
        <p>Card 3</p>
    </div>
</div>

Breakpoints example:

• .f--col-{n} - Default (desktop)
• .f--col-tablets-{n} - Tablets (≤810px)
• .f--col-mobile-{n} - Mobile (≤580px)

Centered Content with Offset

You can also use offsets to center or create asymmetric layouts:

<!-- 8-column content with 2-column margins -->
<div class="f--row">
    <div class="f--col-8 f--offset-2 f--col-tablets-12 f--offset-tablets-0">
        <h2>Centered content on desktop, full width on tablets</h2>
    </div>
</div>

Complete Grid Example

Here’s a real-world component using the grid:

<section class="u--pt-10 u--pt-tablets-7 u--pb-10 u--pb-tablets-7 f--background-a">
    <div class="f--container">
        <div class="f--row u--justify-content-center">
            <div class="f--col-10 f--col-tablets-12">
                <h2 class="f--font-b f--color-a f--sp-b">
                    Ready to Get Started?
                </h2>
                <p class="f--font-f f--color-a f--sp-a">
                    Join thousands of companies securing their data with our platform.
                </p>
                <a href="/contact" class="c--btn-a">
                    Contact Sales
                </a>
            </div>
        </div>
    </div>
</section>

Key features:

• Section with responsive padding (u--pt-10, u--pt-tablets-7)
• 10-column centered content (.f--col-10 + .u--justify-content-center)
• Typography utilities (.f--font-b, .f--font-f)
• Color utilities (.f--color-a)
• Spacing utilities (.f--sp-a, .f--sp-b)

---

BEM Naming Convention

BEM (Block Element Modifier) is our naming methodology for CSS classes. It creates clear, predictable class names that avoid conflicts.

Structure

.block__element--modifier

• Block - The component (e.g., c--card-a)
• Element - A part of the block (e.g., c--card-a__title)
• Modifier - A variation (e.g., c--card-a--featured)

Reserved Words

At Terra, we use standardized naming conventions for common elements and modifiers to ensure consistency across all projects. These include reserved words like __title, __subtitle, __content, __btn, __wrapper, and modifiers like --is-active, --is-hidden, --second, --third, etc.

📄 Download Reserved Words Reference (PDF)

BEM in Practice

<!-- Block: c--card-a -->
<div class="c--card-a">
    <!-- Element: __media -->
    <div class="c--card-a__bg-items">
        <img src="image.jpg" alt="Card Image" class="c--card-a__bg-items__media">
    </div>

    <!-- Element: __wrapper -->
    <div class="c--card-a__wrapper">
        <!-- Element: __title -->
        <h3 class="c--card-a__wrapper__title">Card Title</h3>

        <!-- Element: __text -->
        <p class="c--card-a__wrapper__text">Card description goes here.</p>

        <!-- Element: __button -->
        <a href="#" class="c--card-a__wrapper__button">Read More</a>
    </div>
</div>

<!-- Same block with modifier: --second -->
<div class="c--card-a c--card-a--second">
    <!-- Same structure, different styling -->
</div>

Class Prefixes

We use prefixes to identify the purpose of a class:

Prefix	Purpose	Example
c--	Component	c--card-a, c--hero-b
f--	Foundation (grid, typography)	f--container, f--font-d
u--	Utility (margins, paddings, alignment)	u--mt-5, u--pb-10, u--text-center
js--	JavaScript target	js--slider, js--modal-trigger

Example:

<div class="c--cta-a js--cta">
    <div class="f--container">
        <div class="f--row">
            <div class="f--col-12">
                <h2 class="c--cta-a__title">Title</h2>
            </div>
        </div>
    </div>
</div>

Why separate js-- classes?

• Prevents accidental removal during styling updates
• Clearly identifies interactive elements
• Decouples JavaScript from CSS

BEM Best Practices

✅ Do:

<!-- Clear hierarchy -->
<div class="c--card-a">
    <h3 class="c--card-a__title">Title</h3>
    <p class="c--card-a__text">Text</p>
</div>

<!-- Modifiers for variations -->
<div class="c--card-a c--card-a--second">
    <!-- Second for a dark variant -->
</div>

❌ Don’t:

<!-- Don't mix naming conventions -->
<div class="card-a">
    <h3 class="cardTitle">Title</h3>
</div>

<!-- Don't create overly nested chains -->
<div class="c--card-a__item__wrapper__content__title__artwork__author">
    <!-- Too deep! -->
</div>

<!-- Don't use styling classes for JS -->
<div class="c--modal-a" id="modal-trigger">
    <!-- Use js-- prefix instead -->
</div>

---

Semantic HTML

Use the right HTML tag for the right job. Semantic HTML improves accessibility, SEO, and code clarity.

Proper Tag Usage

<!-- Header -->
<div class="c--header-a">
    <!-- Logo -->
    <a class="c--header-a__logo" href="/">
        <img class="c--header-a__logo__media" src="logo.svg" alt="Logo">
    </a>
    <!-- Navigation -->
    <nav class="c--header-a__nav">
        <ul class="c--header-a__nav__wrapper">
            <li class="c--header-a__nav__wrapper__item">
                <a class="c--header-a__nav__wrapper__item__link" href="/">Home</a>
            </li>
            <li class="c--header-a__nav__wrapper__item">
                <a class="c--header-a__nav__wrapper__item__link" href="/about">About</a>
            </li>
        </ul>
    </nav>
</div>

Headings Hierarchy

Always follow a logical heading structure:

<!-- ✅ Correct: Logical hierarchy -->
<section>
    <div class="f--container">
        <div class="f--row">
            <div class="f--col-12">
                <h2 class="f--font-b">Section Title</h2>
            </div>
            <div class="f--col-6">
                <h3 class="f--font-b">Subsection Title</h3>
                <p class="f--font-f">Content here</p>
            </div>
            <div class="f--col-6">
                <h3 class="f--font-b">Another Subsection</h3>
                <p class="f--font-f">Content here</p>
            </div>
        </div>
    </div>
</section>

<!-- ❌ Wrong: Skipping levels -->
<section>
    <h2>Section Title</h2>
    <h5>Subsection</h5> <!-- Don't skip from h2 to h5 -->
</section>

Lists and Links

<!-- Unordered list -->
<ul class="c--list-a">
    <li class="c--list-a__item">Real-time monitoring</li>
    <li class="c--list-a__item">Advanced analytics</li>
    <li class="c--list-a__item">24/7 support</li>
</ul>

<!-- Navigation list -->
<nav class="c--nav-a">
    <ul class="c--nav-a__wrapper">
        <li class="c--nav-a__wrapper__item">
            <a href="/products" class="c--nav-a__wrapper__link">Products</a>
        </li>
        <li class="c--nav-a__wrapper__item">
            <a href="/pricing" class="c--nav-a__wrapper__link">Pricing</a>
        </li>
    </ul>
</nav>

<!-- External links -->
<a class="c--link-a" href="https://example.com" target="_blank" rel="noopener noreferrer">
    External Link
</a>

Buttons vs Links

Use <button> for actions:

<!-- Opens a modal -->
<button type="button" class="c--btn-a js--modal-trigger">
    Open Modal
</button>

<!-- Submits a form -->
<button type="submit" class="c--btn-a">
    Submit Form
</button>

Use <a> for navigation:

<!-- Goes to another page -->
<a href="/contact" class="c--link-a">
    Contact Us
</a>

<!-- Downloads a file -->
<a href="/brochure.pdf" class="c--link-a">
    Download Brochure
</a>

---

Complete Component Example

Here’s a complete CTA component showing everything together:

<section class="c--cta-a u--pt-10 u--pb-10">
    <div class="f--container">
        <div class="f--row u--justify-content-center">
            <div class="f--col-10 f--col-tablets-12">
                <div class="c--cta-a__wrapper">
                    <!-- Title -->
                    <h2 class="c--cta-a__wrapper__title">
                        Transform Your Security Today
                    </h2>

                    <!-- Subtitle -->
                    <p class="c--cta-a__wrapper__subtitle">
                        Join industry leaders protecting their infrastructure with Terra solutions.
                    </p>

                    <!-- Button -->
                    <a href="/demo" class="c--cta-a__wrapper__button">
                        Schedule a Demo
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

This example includes:

• ✅ Semantic <section> tag
• ✅ Grid structure (container → row → column)
• ✅ Responsive columns (.f--col-10 f--col-tablets-12)
• ✅ BEM naming (.c--cta-a__wrapper__title)
• ✅ Foundation classes (.f--font-b)
• ✅ Utility classes (.u--mb-3, .u--justify-content-center)
• ✅ Proper heading hierarchy (<h2>)
• ✅ Semantic link with proper class

---

Quick Reference

Grid Structure:

Section → Container → Row → Column

BEM Pattern:

.c--block-x__element--modifier

Prefixes:

c-- = Component
f-- = Foundation
u-- = Utility
js-- = JavaScript target

Responsive Columns:

.f--col-{n} .f--col-tablets-{n} .f--col-mobile-{n}

---

Next Steps

Now that you understand HTML structure, let’s learn how to style these components with SCSS.

→ Continue to SCSS & Styles