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.5)

Note

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

Text

Paragraph

It's a paragraph of 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.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.

Light text on dark background.

It's a paragraph of 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>It's a paragraph of lorem ipsum dolor sit amet...</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.

Accessibility

Use paragraph tags to indicate page structure for assistive technologies.

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.sourceOfBlockquote.com/index.html">A block quotation (also known as a long quotation or extract)...</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

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

Link colour 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>
<!-- Thick horizontal rule -->
<hr class="row-divider">

Usage

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