Content 

<div class="content">
    <p>Rendered body copy sets its own vertical rhythm, so every block below is
        separated by the same spacing regardless of the page layout around it.</p>

    <h3>A heading between two paragraphs</h3>

    <p>Paragraphs, headings, lists and figures are direct children of
        <code>.content</code> and are spaced by <code>row-gap</code> rather than by
        margins on the elements themselves.
    </p>

    <ul>
        <li>Blog posts use it inside the article layout</li>
        <li>Case studies use it inside the case study layout</li>
        <li>Topic pages use it outside any page layout</li>
    </ul>

    <p>Because the spacing lives here, body copy reads the same in all three.</p>
</div>
 
<div class="content">
    <p>Rendered body copy sets its own vertical rhythm, so every block below is
        separated by the same spacing regardless of the page layout around it.</p>

    <h3>A heading between two paragraphs</h3>

    <p>Paragraphs, headings, lists and figures are direct children of
        <code>.content</code> and are spaced by <code>row-gap</code> rather than by
        margins on the elements themselves.</p>

    <ul>
        <li>Blog posts use it inside the article layout</li>
        <li>Case studies use it inside the case study layout</li>
        <li>Topic pages use it outside any page layout</li>
    </ul>

    <p>Because the spacing lives here, body copy reads the same in all three.</p>
</div>
 
/* No context defined. */
  • Content: 
    // Container for rendered body copy (markdown from the CMS: blog posts, case
// studies, topic pages). The vertical rhythm belongs to the body copy itself,
// not to the page layout it happens to sit in — page layouts only place
// `.content`, they do not space it.
//
// Layouts that need the children to become grid items of their own (see
// `.story-detail-page`) override `display` and win on specificity.
.content,
%content {
  display: flex;
  flex-direction: column;
  row-gap: $spacer-base;
}
  • URL: /components/raw/content/_content.scss
  • Filesystem Path: components/02-layouts/component-layouts/content/_content.scss
  • Size: 503 Bytes

No notes defined.