Text

Paragraph

Paragraph or <p> tags are used to wrap around blocks of text and content.

For readability, a CSS max-width is applied to all paragraphs to maintain an optimal line length of approximately 80 characters according to the WCAG 2.1 success criterion on visual presentation. According to the W3C, by setting an optimal line-length, this allows users with certain reading or vision disabilities that have trouble keeping their place when reading long lines of text to view and interact with the content more efficiently.

Lead

Use the lead class to make a paragraph stand out.

This is an example lead paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi in sunt quod ipsam, quaerat natus sapiente a dignissimos.

Normal

This is an example paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi in sunt quod ipsam, quaerat natus sapiente a dignissimos maxime eveniet autem quae doloremque laudantium numquam facere adipisci perspiciatis facilis rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<p class="lead">{{ Lead paragraph }}</p>
<p>{{ Normal paragraph }}</p>

Blockquote

The HTML blockquote element indicates that the enclosed text is a quotation. A URL for the source of the quotation may be given by filling in the cite attribute. For a text representation of the source, the <cite> element may be used.

Read more information about blockquotes on MDN.

Normal variant

Without visual citation

At ALT meetings the group will consider not just what needs to be done in various departments, but how work processes flow together, how employees can be best empowered to perform their jobs, and how each initiative will deliver on the priorities of Council.

With static visual citation

At ALT meetings the group will consider not just what needs to be done in various departments, but how work processes flow together, how employees can be best empowered to perform their jobs, and how each initiative will deliver on the priorities of Council. Jane Doe

With linked visual citation

At ALT meetings the group will consider not just what needs to be done in various departments, but how work processes flow together, how employees can be best empowered to perform their jobs, and how each initiative will deliver on the priorities of Council. Jane Doe

<!-- Without visual citation -->
<blockquote cite="{{ Source URL of quotation }}">
    {{ Quote }}
</blockquote>

<!-- With static visual citation -->
<blockquote cite="{{ Source URL of quotation }}">
    {{ Quote }}
    <cite>{{ Quote source or author name }}</cite>
</blockquote>

<!-- With linked visual citation -->
<blockquote cite="{{ Source URL of quotation }}">
    {{ Quote }}
    <cite><a href="{{ Source URL of quotation }}">{{ Quote source or author name }}</a></cite>
</blockquote>

Large variant

Without visual citation

Cities have the capability of providing something for everybody, only because, and only when, they are created by everybody.

With static visual citation

Cities have the capability of providing something for everybody, only because, and only when, they are created by everybody. Jane Doe

With linked visual citation

Cities have the capability of providing something for everybody, only because, and only when, they are created by everybody. Jane Doe

<!-- Without visual citation -->
<blockquote class="lg" cite="{{ Source URL of quotation }}">
    <span class="quote">{{ Quote }}</span>
</blockquote>

<!-- With static visual citation -->
<blockquote class="lg" cite="{{ Source URL of quotation }}>
    <span class="quote">{{ Quote }}</span>
    <cite>{{ Quote source or author name }}</cite>
</blockquote>

<!-- With linked visual citation -->
<!-- Large blockquote with linked citation -->
<blockquote class="lg" cite="{{ Source URL of quotation }}>
    <span class="quote">{{ Quote }}</span>
    <cite><a href="{{ Source URL of quotation }}">{{ Quote source or author name }}</a></cite>
</blockquote>

Block call-to-action

Call 9-1-1 immediately, if there is an emergency and you need help.

<p class="block-cta cui">{{ Content }}</p>

Text label

<span class="cui label-text {{ coc-secondary-blue-access | coc-secondary-pink | coc-secondary-green-D | coc-secondary-dark-blue | coc-secondary-blue-D | coc-secondary-purple }}">
    {{ Text label }}
</span>

Label with icon

Button label

Text label with icon

<!-- Button label -->
<button aria-label="{{ Label for Assistive Technology users }}" class="cui label-text coc-secondary-blue-access">
    {{ Label }}
    <span class="cicon-info-circle" aria-hidden="true"></span>
</button>

<!-- Text label -->
<span class="cui label-text coc-secondary-blue-access">
    {{ Label }}
    <span class="cicon-info-circle" aria-hidden="true"></span>
</span>

Label with description

Button label

Text label

<!-- Button label -->
<div class="cui label-widget">
    <button aria-label="{{ Text to describe the purpose of the button or link }}" class="cui label-text coc-secondary-blue-access">
        {{ Label text }} <span class="cicon-info-circle" aria-hidden="true"></span>
    </button>
    <p>{{ Additional text to provide more details for the label widget }}</p>
</div>

<!-- Text label -->
<div class="cui label-widget">
    <span class="cui label-text coc-secondary-blue-access">
        {{ Label text }} <span class="cicon-info-circle" aria-hidden="true"></span>
    </span>
    <p>{{ Additional text to provide more details for the label widget }}</p>
</div>

Links

This is a text link

This is a visited link

<a href="{{ URL }}">{{ Link text }}</a>

Inline elements

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

This text is deleted and This text is inserted

This text has a strikethrough

Superscript^®

Subscript for things like H₂O

This small text is small for for fine print, etc.

Abbreviation:HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y

Time

<!-- Time -->
<time datetime="{{ Digital time format (e.g. 2019-01-01T12:32+00:00) }}">2 weeks ago</time>