<div class="grid-container usa-prose">
    <div class="grid-row grid-gap">
        <div class="mobile-lg:grid-col usa-prose">
            <h1>Heading 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie. Quisque tincidunt posuere ligula, ut dictum quam.</p>
            <div class="height-5 width-auto bg-secondary-lighter"></div>
        </div>
        <div class="mobile-lg:grid-col usa-prose">
            <h2>Heading 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie. Quisque tincidunt posuere ligula, ut dictum quam.</p>
            <h3>Heading 3</h3>
        </div>
    </div>
    <div class="grid-row grid-gap bg-base-lighter">
        <div class="mobile-lg:grid-col usa-prose">
            <h3>Heading 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie.</p>
            <p>Quisque tincidunt posuere ligula, ut dictum quam.</p>
        </div>
        <div class="mobile-lg:grid-col">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie. Quisque tincidunt posuere ligula, ut dictum quam.</p>
        </div>
    </div>
    <div class="grid-row grid-gap">
        <div class="mobile-lg:grid-col usa-prose">
            <p><b>Paragraph text inside a grid column (mobile-lg:grid-col):</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie. Quisque tincidunt
                posuere ligula, ut dictum quam.</p>
            <p>Another paragraph within the same section</p>
        </div>
    </div>
    <div class="bg-base-lighter usa-prose">
        <p><b>Paragraph text inside a grid:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie. Quisque tincidunt posuere ligula, ut dictum
            quam.</p>
        <ul>
            <li>Unordered list item</li>
            <li>Unordered list item</li>
            <li>Unordered list item</li>
        </ul>
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="usa-section usa-section--dark">
        <div class="grid-container usa-prose">
            <h2>Heading 2 in a dark section</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie. Quisque tincidunt posuere ligula, ut dictum quam.</p>
        </div>
    </div>
    <div class="usa-section">
        <div class="grid-container usa-prose">
            <h2>Heading 2 in a section</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie. Quisque tincidunt posuere ligula, ut dictum quam.</p>
        </div>
    </div>
</div>

There are no notes for this item.

<div class="grid-container usa-prose">
  <div class="grid-row grid-gap">
    <div class="mobile-lg:grid-col usa-prose">
      <h1>Heading 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie. Quisque tincidunt posuere ligula, ut dictum quam.</p>
      <div class="height-5 width-auto bg-secondary-lighter"></div>
    </div>
    <div class="mobile-lg:grid-col usa-prose">
      <h2>Heading 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie. Quisque tincidunt posuere ligula, ut dictum quam.</p>
      <h3>Heading 3</h3>
    </div>
  </div>
  <div class="grid-row grid-gap bg-base-lighter">
    <div class="mobile-lg:grid-col usa-prose">
      <h3>Heading 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie.</p>
      <p>Quisque tincidunt posuere ligula, ut dictum quam.</p>
    </div>
    <div class="mobile-lg:grid-col">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie. Quisque tincidunt posuere ligula, ut dictum quam.</p>
    </div>
  </div>
  <div class="grid-row grid-gap">
    <div class="mobile-lg:grid-col usa-prose">
      <p><b>Paragraph text inside a grid column (mobile-lg:grid-col):</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie. Quisque tincidunt posuere ligula, ut dictum quam.</p>
      <p>Another paragraph within the same section</p>
    </div>
  </div>
  <div class="bg-base-lighter usa-prose">
    <p><b>Paragraph text inside a grid:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie. Quisque tincidunt posuere ligula, ut dictum quam.</p>
    <ul>
      <li>Unordered list item</li>
      <li>Unordered list item</li>
      <li>Unordered list item</li>
    </ul>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="usa-section usa-section--dark">
    <div class="grid-container usa-prose">
      <h2>Heading 2 in a dark section</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie. Quisque tincidunt posuere ligula, ut dictum quam.</p>
    </div>
  </div>
  <div class="usa-section">
    <div class="grid-container usa-prose">
      <h2>Heading 2 in a section</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales eros a diam fermentum, id pulvinar lacus tincidunt. Ut varius ipsum at ex maximus molestie. Quisque tincidunt posuere ligula, ut dictum quam.</p>
    </div>
  </div>
</div>
package:
  name: uswds
  version: 2.1.0
uswds:
  path: ../../dist