Content

WYSIWYG and .c--content

WYSIWYG ((What You See Is What You Get)) refers to content created visually in editors like Gutenberg (Wordpress), Sanity Portable Text, or custom text fields, and later rendered as HTML on the frontend.

Although the structure of this content is similar across projects (headings, paragraphs, lists, images, links), its visual appearance can easily become inconsistent without a shared styling system.

The .c--content solves this by providing a controlled and reusable styling layer for rendered WYSIWYG content, ensuring that rich text is clean, consistent, and accessible across the site.

Caution

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

---

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.

---

How to use it

Installation

Follow these instructions on how to install and integrate this package into your project.

You’ll find there:

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

In HTML

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

In SCSS

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

Tip

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

---

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

---

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

---

Best Practices

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