Content

Bla bla

Examples

<div class="content">
  <h1>Example heading H1</h1>
  <h2>Example heading H2</h2>
  <h3>Example heading H3</h3>
  <h4>Example heading H4</h4>
  <h5>Example heading H5</h5>
  <h6>Example heading H6</h6>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>

  <blockquote>
    <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
    <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
    <cite><a href="#">Said no one, ever.</a></cite>
  </blockquote>

  <dl>
    <dt>Definition List Title</dt>
    <dd>This is a definition list division.</dd>
  </dl>

  <ol type="1">
    <li>List Item 1</li>
    <li>
      List Item 2
      <ol type="A">
        <li>List Item 1</li>
        <li>
          List Item 2
          <ol type="a">
            <li>List Item 1</li>
            <li>
              List Item 2
              <ol type="I">
                <li>List Item 1</li>
                <li>
                  List Item 2
                  <ol type="i">
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                    <li>List Item 3</li>
                  </ol>
                </li>
                <li>List Item 3</li>
              </ol>
            </li>
            <li>List Item 3</li>
          </ol>
        </li>
        <li>List Item 3</li>
      </ol>
    </li>
    <li>List Item 3</li>
  </ol>

  <p><a href="#!">This is a text link</a>.</p>
  <p><strong>Strong is used to indicate strong importance.</strong></p>
  <p><em>This text has added emphasis.</em></p>
  <p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
  <p>The <i>i element</i> is text that is offset from the normal text.</p>
  <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
  <p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
  <p><s>This text has a strikethrough</s>.</p>
  <p>Superscript<sup>®</sup>.</p>
  <p>Subscript for things like H<sub>2</sub>O.</p>
  <p><small>This small text is small for fine print, etc.</small></p>
  <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
  <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
  <p><cite>This is a citation.</cite></p>
  <p>The <dfn>dfn element</dfn> indicates a definition.</p>
  <p>The <mark>mark element</mark> indicates a highlight.</p>
  <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
  <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>

  <details>
    <summary>Expand for details</summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.</p>
  </details>

  <address>
    Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br />
    Visit us at:<br />
    Example.com<br />
    Box 564, Disneyland<br />
    USA
  </address>

  <hr />

  <p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
  <p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
  <p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>

  <h2>Pre-formatted text</h2>
  <pre>P R E F O R M A T T E D T E X T
! " # $ % &amp; * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z | ~ </pre>
</div>
@use '~/styles/app.scss' as app;

// ↓ Amazing content
// Special class `.content` to allow formatting of the default html tags
@use '@nulllogic/scssleon/scss/content' with (
  $config: app.$config,
  $theme: app.$theme
);