# Accentuation

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div>
        <header>
            <h2>Inline elements</h2>
        </header>

        <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><code>Code Tag for inline code</code></p>
        <p><small>This small text is small for for fine print, etc.</small></p>
        <p>Abbreviation: The <abbr title="A Company that Manufactures Everything">ACME</abbr> Corporation is a fictional corporation that features prominently in the Road Runner/Wile E. Coyote cartoons as a running gag featuring outlandish products that fail
            or backfire catastrophically at the worst possible times. The name is also used as a generic title in many cartoons, films, TV series, commercials and comic strips.</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>
    </div>

`
`

    <div>
        <header>
            <h2>Inline elements</h2>
        </header>

        <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><code>Code Tag for inline code</code></p>
        <p><small>This small text is small for for fine print, etc.</small></p>
        <p>Abbreviation: The <abbr title="A Company that Manufactures Everything">ACME</abbr> Corporation is a fictional corporation that features prominently in the Road Runner/Wile E. Coyote cartoons as a running gag featuring outlandish products that fail
            or backfire catastrophically at the worst possible times. The name is also used as a generic title in many cartoons, films, TV series, commercials and comic strips.</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>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      code {
        @extend %monospace-font-regular;

        display: inline-block;
        padding: 2px $spacer-xxs;
        font-size: $font-size-xxs;
        background-color: $code-background-color;
      }

      mark {
        display: inline-block;
        background-color: $mark-color;
      }

  `
- URL: /components/raw/accentuation/_accentuation.scss
- Filesystem Path: components/05-atoms/text/accentuation/_accentuation.scss
- Size: 239 Bytes

- Handle: @accentuation
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/text/accentuation/accentuation.html

No notes defined.