Prose

Structure

One wrapper class on the content region. Everything inside stays classless: the markup a rich-text editor or CMS body field produces is the markup you render.

Component Tree


div.nds-prose   (or article.nds-prose)
├── h2, h3, h4...   (classless headings)
├── p, ul, ol, blockquote, figure, table, hr
└── any NDS component   (keeps its own look untouched)

Flowing Content

A complete classless article: every element below is styled by the system with no classes in the markup.

Classless Article

Service Overview

This paragraph carries a regular link, strong text, and emphasized text, all styled without a single class attribute.

A second paragraph demonstrates the vertical rhythm between consecutive blocks of flowing text.

Eligibility

First requirement
Second requirement
- Nested detail
- Another nested detail
Third requirement

Submit the application
Track the request

A flowing citation renders with a side bar and secondary tone; for a featured pull-quote card, use the Quote component instead.

A caption in smaller, secondary type below the image

Stage	Duration
Review	3 days
Approval	1 day

A closing paragraph after the divider ends the article with no trailing margin.


<div class="nds-prose">
    <h2>Service Overview</h2>
    <p>This paragraph carries a <a href="#">regular link</a>, <strong>strong text</strong>, and <em>emphasized text</em>, all styled without a single class attribute.</p>
    <p>A second paragraph demonstrates the vertical rhythm between consecutive blocks of flowing text.</p>
    <h3>Eligibility</h3>
    <ul>
        <li>First requirement</li>
        <li>Second requirement
            <ul>
                <li>Nested detail</li>
                <li>Another nested detail</li>
            </ul>
        </li>
        <li>Third requirement</li>
    </ul>
    <ol>
        <li>Submit the application</li>
        <li>Track the request</li>
    </ol>
    <blockquote>A flowing citation renders with a side bar and secondary tone; for a featured pull-quote card, use the Quote component instead.</blockquote>
    <figure>
        <img src="path/to/image.jpg" alt="Flag of Saudi Arabia" width="120" height="84">
        <figcaption>A caption in smaller, secondary type below the image</figcaption>
    </figure>
    <table>
        <thead><tr><th>Stage</th><th>Duration</th></tr></thead>
        <tbody>
            <tr><td>Review</td><td>3 days</td></tr>
            <tr><td>Approval</td><td>1 day</td></tr>
        </tbody>
    </table>
    <hr>
    <p>A closing paragraph after the divider ends the article with no trailing margin.</p>
</div>

Where Each Default Lives

Classless styling is layered: some elements are styled everywhere, some only inside the wrapper, and richer treatments stay opt-in components.

Elements	Scope	Richer tier
`h1` to `h6`, list indent, `img`	Global: styled everywhere	Section and Block titles for composed layouts
`a`	Global: every bare link	`.nds-link` variants
`hr`	Global: renders as the system divider	`.nds-divider` with text content
`table`	Global: renders as the system table	`.nds-table` with sorting, sub-rows, responsive modes
`p`, list rhythm, `blockquote`, `figcaption`	Prose only: inside the wrapper	Quote component for featured pull-quotes

Built-in Features

What the wrapper provides before you write any CSS.

Classless by Default

Editor and CMS output renders correctly as-is, with no classes added to the markup.

Components Keep Their Look

Any NDS component dropped inside the region renders untouched; prose rules never outrank component styling.

Editor Preview Parity

The NDS editor's typing surface shares the same rhythm, so drafts preview the way published content renders.

Strictly Scoped

Everything applies inside the wrapper only: pages and markup outside a prose region render exactly as they did before.

Edge-Trimmed Rhythm

Consistent spacing between blocks, with first and last margins trimmed so the region sits flush inside cards, section bodies, and the editor.

Linked Rich Tiers

Quotes, tables, and dividers share tokens with their full components, so upgrading an element to its component keeps the design consistent.

Usage Guidelines

When to reach for prose, and how to combine it with the rest of the layout system.

Best Practices

Use prose for content you do not author element by element: CMS body fields, rich-text editor output, long-form articles, and help or policy text.
Wrap once at the region root (the article or the container your CMS renders into), not around individual elements.
Sections structure the page; prose fills a section body with flowing text. Keep composed layouts (cards, grids, forms) outside the wrapper or accept that they simply keep their own styling inside it.
Do not add .nds-section-title or .nds-block-title to headings inside flowing content: bare headings are already styled, and the component classes override the content hierarchy with page-structure sizing.
Bare table and hr elements render as the system table and divider everywhere, prose or not; inside prose they also pick up editorial spacing.
For a featured quotation with attribution, use the Quote component; the classless blockquote is the in-text citation tier.
For sortable, paginated, or responsive data, upgrade the bare table to the Table component; the classless table is a readable static default.
Content headings start at h2: the page title is the hero's h1, and in-content headings sit one visual rung below section titles by design.