Content

<div class="content">
  <h1>Heading 1</h1>
  <p>This paragraph is styled automatically.</p>
  <h2>Heading 2</h2>
  <p>All standard HTML elements work out of the box.</p>
</div>

<div class="content">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</div>

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida.</p>
  <p>This is another paragraph with <strong>bold text</strong>, <em>italic text</em>, and <u>underlined text</u>.</p>
</div>

<div class="content">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
      <ul>
        <li>Nested item 1</li>
        <li>Nested item 2</li>
      </ul>
    </li>
  </ul>
</div>

<div class="content">
  <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>
</div>

<div class="content">
  <ol class="is-lower-alpha">
    <li>Lower alpha</li>
    <li>Lower alpha</li>
  </ol>
  
  <ol class="is-lower-roman">
    <li>Lower roman</li>
    <li>Lower roman</li>
  </ol>
  
  <ol class="is-upper-alpha">
    <li>Upper alpha</li>
    <li>Upper alpha</li>
  </ol>
  
  <ol class="is-upper-roman">
    <li>Upper roman</li>
    <li>Upper roman</li>
  </ol>
</div>

<div class="content">
  <dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
  </dl>
</div>

<div class="content">
  <blockquote>
    "The only way to do great work is to love what you do."
    <br>
    — Steve Jobs
  </blockquote>
</div>

<div class="content">
  <p>Use the <code>content</code> class to style your HTML.</p>
</div>

<div class="content">
  <pre><code>function hello() {
  console.log('Hello World!');
}</code></pre>
</div>

<div class="content">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>30</td>
        <td>USA</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>25</td>
        <td>UK</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="content">
  <figure>
    <img src="image.jpg" alt="Description">
    <figcaption>Image caption goes here</figcaption>
  </figure>
</div>

<div class="content is-small">
  <h1>Small Content</h1>
  <p>All text in this container is smaller.</p>
</div>

<div class="content is-normal">
  <h1>Normal Content</h1>
  <p>Default size content.</p>
</div>

<div class="content is-medium">
  <h1>Medium Content</h1>
  <p>All text in this container is medium-sized.</p>
</div>

<div class="content is-large">
  <h1>Large Content</h1>
  <p>All text in this container is larger.</p>
</div>

<article class="content">
  <h1>Article Title</h1>
  <p class="subtitle">Published on January 1, 2024</p>
  
  <p>Introduction paragraph...</p>
  
  <h2>Section 1</h2>
  <p>Section content with <strong>emphasis</strong> and <em>style</em>.</p>
  
  <ul>
    <li>Key point 1</li>
    <li>Key point 2</li>
    <li>Key point 3</li>
  </ul>
  
  <blockquote>
    An important quote from the article.
  </blockquote>
  
  <h2>Section 2</h2>
  <p>More content...</p>
</article>