Prose

The column an author's content lives in — reading text on a measure, photographs and tables allowed to use the whole page.

Cabot Cove is home to about 3,560 neighbors, a busy waterfront, and more than a few good storytellers. Whether you have lived here all your life or have just arrived for the weekend, welcome to our corner of the Maine coast.

How can we help?

Town Hall is open Monday through Thursday. Staff can point you to the right office if you are not sure where to start.

Show the markup

<div class="cc-prose">
  <p class="cc-paragraph">Cabot Cove is home to about 3,560 neighbors, a busy waterfront, and more than a few good storytellers. Whether you have lived here all your life or have just arrived for the weekend, welcome to our corner of the Maine coast.</p>
  <h3 class="cc-heading cc-heading--md">How can we help?</h3>
  <ul class="cc-linkgrid">
    <li><a href="#">Pay property taxes</a></li>
    <li><a href="#">License your dog</a></li>
    <li><a href="#">Request a vital record</a></li>
    <li><a href="#">Apply for a mooring</a></li>
    <li><a href="#">Report a problem</a></li>
    <li><a href="#">Explore all services</a></li>
  </ul>
  <p class="cc-paragraph">Town Hall is open Monday through Thursday. Staff can point you to the right office if you are not sure where to start.</p>
</div>

What it fixes

Rendered content used to be a flat stream of siblings, so each component's own max-width was the only layout there was: paragraphs stopped at 40em, figures at 46rem, headings ran the full container. Four different right edges, all flush left, with a third of the page empty beside them.
One grid owns the column now. Text sits on the measure; figures, tables, card grids and link grids opt into the full width instead of being capped at a measure that was never meant for them.
The left edge is shared with .cc-container, the page head and the card grids, so a heading lines up with the band above it.

Accessibility

Reading text stays at max-width: 40em — about 80 characters at any font size, which is what 1.4.8 asks for. Widening prose to fill the page would fail it.
Below 64rem the grid collapses to one column, so nothing is squeezed on a phone (1.4.10).
Grid placement never changes DOM order, so the reading order and the visual order stay the same (1.3.2).