Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.6)

Note

This page is archived under version 1.6 and is available for reference purposes only. The latest version of Pattern Library is 2.

Text

Paragraph

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.

Light text on dark background.

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.

Code 


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

Usage

<p> is used to break up lines of text into paragraphs. This is part of the semantic structure of the web page.

For readability there are media queries applied to maintain an optimal line length of 45 - 75 characters long.

Blockquote

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.

Code 


<!-- Blockquote -->
<blockquote cite="http://www.source-of-quote.com/page.html">
    Quote goes here
</blockquote>

Usage

<blockquote> 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, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

W3schools has more information about the blockquote

Large variant

With static citation

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

With linked citation

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

Code 


<!-- Large blockquote -->
<blockquote class="lg">
    <span class="quote">Quote goes here</span>
    <cite>Quote source or author name</cite>
</blockquote>

<!-- Large blockquote with linked citation -->
<blockquote class="lg">
    <span class="quote">Quote goes here</span>
    <cite><a href="https://url-to-quote-source.com">Quote source or author name</a></cite>
</blockquote>

Block-CTA

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

Code 


<p class="block-cta cui">Call <a href="tel:911"><abbr title="emergency services at 911">9-1-1</abbr></a> immediately, if there is an emergency and you need help.</p>

Text label

Information Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

Code 


<span class="cui label-text coc-secondary-blue-access">
    Information
</span>
<span class="cui label-text coc-secondary-pink">
    Lorem ipsum dolor
</span>
<span class="cui label-text coc-secondary-green-D">
    Lorem ipsum dolor
</span>
<span class="cui label-text coc-secondary-dark-blue">
    Lorem ipsum dolor
</span>
<span class="cui label-text coc-secondary-blue-D">
    Lorem ipsum dolor
</span>
<span class="cui label-text coc-secondary-purple">
    Lorem ipsum dolor
</span>

Inline elements

This is a text link

This is a visited link

Text link on dark backgrounds:

This is a text link

This is a visited link

Code 


<a href="">This is a text link</a>

Usage

An inline element does not start on a new line and only takes up as much as is bound in the tags that define it.

Please DO

  • Use phrases that inform the user the purpose of the link

Please DON'T

  • Use phrases that fail to inform the user of the specific purpose of the link.
  • Use ambiguous text choices that do not describe the content that can be viewed via the link.

Link use example

Please DO

Please DON'T

Link usage: Internal and External Links

  • Internal links should never open in new browser tabs, but rather the same tab the user is on.
  • External links that take users to a different website should open in new tabs.
    • You may use the external link icon to indicate external links. For example:
      Check the latest Google doodle

Additional 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 H2O

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="2013-04-06T12:32+00:00">2 weeks ago</time>

Horizontal rule

Normal horizontal rule

Thick horizontal rule

Code 


<!-- Normal horizontal rule -->
<hr aria-hidden="true">

<!-- Thick horizontal rule -->
<hr class="row-divider" aria-hidden="true">

Usage

Horizontal lines are used to provide a visual break and divide content.

In most cases, <hr> tags are used for visual purposes only. Therefore, it does not need to be announced by a screen reader. Add the attribute aria-hidden="true" so screen readers will ignore the element. If the element should be announced by a screen reader, the aria-hidden attribute can be removed.