CMS Style Guide

Heading H1

Heading Level 1

<h1>Heading Level 1</h1>
Heading H2

Heading Level 2

<h2>Heading Level 2</h2>
Heading H3

Heading Level 3

<h3>Heading Level 3</h3>
Heading H4

Heading Level 4

<h4>Heading Level 4</h4>
Heading H5
Heading Level 5
<h5>Heading Level 5</h5>
Heading H6
Heading Level 6
<h6>Heading Level 6</h6>
Paragraph

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit
of a discourse in writing dealing with a particular <em>point or idea</em>. A paragraph consists of one
or more sentences. Though not required by the <strong>syntax of any language</strong>, paragraphs are
<a href="#">usually an expected</a> part of formal writing, used to organize longer prose.</p>
Inline Text Elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
Unordered List
  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item
<ul>
    <li>This is a list item in an unordered list</li>
    <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
    <li>
        Lists can be nested inside of each other
        <ul>
            <li>This is a nested list item</li>
            <li>This is another nested list item in an unordered list</li>
        </ul>
    </li>
    <li>This is the last list item</li>
</ul>
Ordered List
  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item
<ol>
    <li>This is a list item in an ordered list</li>
    <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
    <li>
        Lists can be nested inside of each other
        <ol>
            <li>This is a nested list item</li>
            <li>This is another nested list item in an ordered list</li>
        </ol>
    </li>
    <li>This is the last list item</li>
</ol>
Primary Anchor Button
<a class="a-btn a-btn--primary" href="#">Primary Anchor Button</a>
Secondary Anchor Button
<a class="a-btn a-btn--secondary" href="#">Secondary Anchor Button</a>
Primary Anchor White Button
<a class="a-btn a-btn--primary-white" href="#">Primary Anchor White Button</a>
Primary Anchor Beige Button
<a class="a-btn a-btn--primary-beige" href="#">Primary Anchor Beige Button</a>
Icon Text Anchor Button
<a class="a-icon-text-btn" href="#">
    <span class="icon-support a-icon-text-btn__icon" aria-hidden="true"></span>
    <span class="a-icon-text-btn__label">Link</span>
</a>
Table
Order NumberCol 2Col 3Col 4Col 5
1Snider BeckerSnider Beckersniderbecker@nutralab.com+1 (903) 471-3539
2Snider BeckerSnider Beckersniderbecker@nutralab.com+1 (903) 471-3539
3Snider BeckerSnider Beckersniderbecker@nutralab.com+1 (903) 471-3539
4Snider BeckerSnider Beckersniderbecker@nutralab.com+1 (903) 471-3539
<table class="m-table m-table--striped m-table--stack m-table--stack-align">
    <caption class="m-table__caption"></caption>
    <thead class="m-table__head">
        <tr>
            <th scope="col">Order Number</th>
            <th scope="col">Col 2</th>
            <th scope="col">Col 3</th>
            <th scope="col">Col 4</th>
            <th scope="col">Col 5</th>
        </tr>
    </thead>
    <tbody class="m-table__body">
        <tr>
            <td data-th="Order Number">1</td>
            <td data-th="Col 2">Snider Becker</td>
            <td data-th="Col 3">Snider Becker</td>
            <td data-th="Col 4">sniderbecker@nutralab.com</td>
            <td data-th="Col 5">+1 (903) 471-3539</td>
        </tr>
        <tr>
            <td data-th="Order Number">2</td>
            <td data-th="Col 2">Snider Becker</td>
            <td data-th="Col 3">Snider Becker</td>
            <td data-th="Col 4">sniderbecker@nutralab.com</td>
            <td data-th="Col 5">+1 (903) 471-3539</td>
        </tr>
        <tr>
            <td data-th="Order Number">3</td>
            <td data-th="Col 2">Snider Becker</td>
            <td data-th="Col 3">Snider Becker</td>
            <td data-th="Col 4">sniderbecker@nutralab.com</td>
            <td data-th="Col 5">+1 (903) 471-3539</td>
        </tr>
        <tr>
            <td data-th="Order Number">4</td>
            <td data-th="Col 2">Snider Becker</td>
            <td data-th="Col 3">Snider Becker</td>
            <td data-th="Col 4">sniderbecker@nutralab.com</td>
            <td data-th="Col 5">+1 (903) 471-3539</td>
        </tr>
    </tbody>
</table>
CMS Narrow Container (Desktop Indented)

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

<div class="cms-narrow-container">
    <p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit
        of a discourse in writing dealing with a particular <em>point or idea</em>. A paragraph consists of one
        or more sentences. Though not required by the <strong>syntax of any language</strong>, paragraphs are
        <a href="#">usually an expected</a> part of formal writing, used to organize longer prose.</p>
    <p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit
        of a discourse in writing dealing with a particular <em>point or idea</em>. A paragraph consists of one
        or more sentences. Though not required by the <strong>syntax of any language</strong>, paragraphs are
        <a href="#">usually an expected</a> part of formal writing, used to organize longer prose.</p>
</div>
CMS Large Container (Desktop Indented)

Large images could be added in this container.

This container has horizontal scroll if images overflow.

<div class="cms-narrow-container">
    <p>Large images could be added in this container.</p>
    <p>This container has horizontal scroll if images overflow.</p>
</div>

<div class="cms-large-container">
    <img src="..." alt="" />
</div>