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

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

<!-- Add 'lg' class for large variant -->
<blockquote class="{{ lg }}" cite="{{ Source URL of quotation }}">
    <span class="quote">{{ Quote }}</span>
	
	<!-- Optional static visual citation -->
    <cite>{{ Quote source or author name }}</cite>

    <!-- Optional linked visual citation -->
     <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

Label with icon

Label with description

<!-- Below div is for Optional label description -->
<div class="cui label-widget">

	<!-- Use the <button> tag if the element will be used to trigger in-page functionality -->
	<button aria-label="{{ Label for Assistive Technology users }}" 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 }}" href="{{ URL }}">
	    {{ Label }}

	    <!-- Optional icon for label -->
	    <span class="cicon-info-circle" aria-hidden="true"></span>
	</button>

	<!-- Use the <span> tag if the element will not link anyehere-->
	<span aria-label="{{ Label for Assistive Technology users }}" 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 }}">
	    {{ Label }}

	    <!-- Optional icon for label -->
	    <span class="cicon-info-circle" aria-hidden="true"></span>
	</span>

	<!-- Below paragraph tag is for Optional label description -->
	 <p>{{ Additional text to provide more details for the label widget }}</p>
<!-- Below div is for Optional label description -->
</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>