📝 Content

WYSIWYG (What You See Is What You Get) refers to content edited visually — like in Gutenberg, Sanity, or even custom textarea fields — and later rendered as HTML on the frontend.

The .c--content module provides a consistent and customizable styling system for rich text content.

This is especially useful when you’re working with WYSIWYG content. It ensures that headings, lists, images, links, and other elements display with clean, coherent, and accessible styles on the frontend.

NOTE!

💡 This module does not style the editor interface itself — it styles the rendered HTML output that editors like Gutenberg, Sanity, or custom modules produce.

---

📦 Terra Package

This module is part of an internal Terra Package: terrahq-wysiwyg

You’ll find there:

• The source code and SCSS mixins
• The list of available content blocks
• Instructions for installation and integration

---

✍️ How it works

The .c--content class is powered by two SCSS mixins:

• make-content() – Applies the default structure and baseline styles
• make-content-modifier() – Lets you customize individual blocks (e.g. paragraphs, quotes, buttons) per project

You can use this module in any context where user-generated content is inserted into your layout and needs to look polished and consistent.

🧱 HTML usage

<div class="c--content-a">
  <!-- Editor content goes here -->
  <p> Hello World </p>
  <a href="https://terrahq.com/">Terra Web</a>
</div>

🎨 SCSS structure

.c--content-a {
  @include make-content();
  @include make-content-modifier(
    $headings-options: (...),
    $image-options: (...),
    ...
  );
}

All blocks are optional and fully customizable. You only uncomment the styles you need.

🔧 Example: Customize Headings

.c--content-a {
    @include make-content();
    @include make-content-modifier(
    $headings-options: (
        "h2": (
        "margin-bottom": $measure * 3,
        "padding-top": $measure * 5,
        "className": f--font-a f--color-b,
        ),
        "h3": (
        "margin-bottom": $measure * 2,
        "padding-top": $measure * 5,
        "className": f--font-b f--color-c,
        )
    )
    );
}

💡 Tips

• Use only the blocks your project needs — the mixins are modular.
• You can also customize deeply nested elements (like captions, list artwork, or table cells) via nested option maps.

🧩 Available blocks

Block	Platforms	Notes
Headings	WP & Sanity	Full control over margins, fonts, spacing
Image	WP & Sanity	Includes caption styling
Links	WP & Sanity	Can be extended with g--link-*
Lists	WP & Sanity	Includes artwork and number variants
Paragraphs	WP & Sanity	Includes margin logic before lists
Quote	WP & Sanity	cite only available in WP
Footnote	WP only	Custom block for footnotes
Highlighted	WP only	Highlighted text component
Button	WP only	Uses g--btn-* styling
Columns	WP only	Includes responsive breakpoint control
Separator	WP only	Supports width, color, and spacing
Table	WP only	Full header/body/caption styling
Video	WP only	Includes caption and spacing
Utilities	WP only	Utility options like spacing between aligned media & text
Custom	WP & Sanity	Add your own selector as needed