Fonts

Proxima Nova

Proxima Nova is primarily used for headings and navigation. This is a signature font that represents PCC and gives us a distinct look and feel.

To use Proxima Nova Light, include wrap the text you would like to be Proxima Nova Light in a span with the class proxima-light.

Proxima Nova Light

<span class="proxima-light">FONT IS PROXIMA LIGHT</span>

abcdefghijklmnopqrstuvwxyz

1234567890
#!$%@&*()

Helvetica Neue

Helvetica Neue is used for the main body text and copy. The default size is 18px with a line height of 170% for optimal readability.

abcdefghijklmnopqrstuvwxyz

1234567890
#!$%@&*()

Optima

Optima is our serif font. It is used in rare cases and is the font used in the PCC logo.

You can add the class optima to a text element to change the font to Optima.

<p class="optima">Your Text in Optima</p>

abcdefghijklmnopqrstuvwxyz

1234567890
#!$%@&*()

Headings

For main content, use <h3> thru <h6> for sub-headings. <h1> and <h2> are reserved for page and section titles.

Section & Page Titles

Section Title Landing Page

Used only on the landing page of a section and on Full Width Pages. If using on landing page that has an image, see Heading Landing Page with Image below.


                    <div class="page-header">

                    <h1 class="section-title-landing">THE SECTION TITLE</h1>

                    </div>

Heading Landing Page with Image

On section landing pages that include an image, we use the same class on the <h1> element, but make sure it is enclosed in a div with the class transparent-header-image. You can also use the <small> element to wrap text that should be smaller, ie School of on the school landing pages should be smaller.

Let's see it in action...

ENTER EXAMPLE AND CODE HERE

Page Title

Used as the page title on all internal pages within a section. This is set as the <h1> and the section title becomes a <h2> (in top left).


                    <div class="page-header">

                    <h1 class="section-title-page">THE PAGE TITLE</h1>

                    </div>

And if you threw a party - invited everyone you knew. You would see the biggest gift would be from me and the card attached would say thank you for being a friend. Knight Rider: A shadowy flight into the dangerous world of a man who does not exist. Come and dance on our floor. Take a step that is new. We've a loveable space that needs your face threes company too.

Generic Headings

Heading 1

<h1>Heading</h1>

Heading 2

<h2>Heading</h2>

Heading 3

<h3>Heading</h3>

Heading 4

<h4>Heading</h4>

Heading 5

<h5>Heading</h5>

Heading 6

<h6>Heading</h6>

Paragraphs

Default Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem elit, hendrerit tincidunt ante lacinia, finibus consectetur massa. Cras fermentum mi sem, egestas cursus massa luctus eu. Maecenas porttitor arcu eget iaculis ultrices. Maecenas hendrerit, tortor in molestie porta, risus odio gravida mauris, at consequat nisi ipsum at ante. Suspendisse tincidunt nisi tortor, et tincidunt risus lobortis quis. Pellentesque volutpat tempor arcu. Nullam vitae justo eget velit feugiat pharetra. Maecenas a est mattis, laoreet quam eget, ullamcorper ipsum. Vivamus ullamcorper est sed tempor ornare. Curabitur et ex turpis. Suspendisse viverra ullamcorper fermentum. Nullam commodo risus ut lacus pretium, ac tempus sapien porta. Duis nunc nulla, maximus lacinia iaculis a, euismod a erat.

Lead in Paragraph

Slightly larger text for a lead or call out of text or copy.

<p class="lead">Your paragraph here...</p>

Blockquote

Blockquotes are used to specify a section that is quoted from another source, but can also be used to call out and highlight important text and copy.

Regular Ol' Blockquote

This is a block quote — amazing!

<blockquote><p>Your blockquote here...</p></blockquote>

Blockquote with a Footer

This is a block quote — amazing!

Someone famous in Source Title

<blockquote><p>Your blockquote here...</p><footer>Someone famous in <cite title="Source Title">Source Title</cite><footer></blockquote>

Blockquote Reverse (align right)

This is a block quote — amazing!

Someone famous in Source Title

<blockquote class="<p>Your blockquote here...</p><footer>Someone famous in <cite title="Source Title">Source Title</cite><footer></blockquote>

Blockquote Floated Left or Right

Float a blockquote right or left using the class pull-right or pull-left. You set the width of your blockquote by adding col-sm-VALUE. Be sure to include clearfix after the paragraphs and blockquotes.

This is a block quote floating on the right side with content wrapping to the left — amazing!

This is a block quote floating on the left side with content wrapping to the left — amazing!

<blockquote class="pull-right col-sm-6">Your blockquote here...</blockquote>

Blockquote Floated, Yellow Background

Float a block quote and add a yellow background to it — very stylish. Add the class blockquote-yellow to your blockquote.

This is a block quote floating on the right side with content wrapping to the left — amazing!

This is a block quote floating on the left side with content wrapping to the left — amazing!

<blockquote class="pull-right col-sm-6 blockquote-yellow">Your blockquote here...</blockquote>

Blockquote Yellow Centered

This blockquote should be centered. Making content stand out so you can see it!

<blockquote class="text-center center-block blockquote-yellow">Your blockquote here...</blockquote>

Lists

Unordered List


                <ul>

                <li>List Item</li>

                </ul>

List Item
List Item
List Item
List Item
- List Item
- List Item
- List Item
List Item

Ordered List


                <ol>

                <li>List Item</li>

                </ol>

List Item
List Item
List Item
List Item
1. List Item
2. List Item
3. List Item

Unstyled


                <ul class="list-unstyled">

                <li>List Item</li>

                </ul>

List Item
List Item
List Item
- List Item
- List Item
List Item
List Item

Inline List

If you want to arrange list items horizontally — may be useful for navigation or anchors.


                <ul class="list-inline">

                <li>List Item</li>

                </ul>

Inline List with Separators

If you want to arrange list items horizontally with separators (borders) in between each element. Add the class list-inner-separators to the ul element.


                <ul class="list-inline list-inner-separators">

                <li>List Item</li>

                </ul>

Description List

Useful for definitions or possibly FAQ.


                <dl>

                <dt>Term or Question</dt>

                <dd>Definition or Answer</dd>

                </dl>

Term or Question: The definition or answer.

Description List Horizontal


                <dl class="dl-horizontal">

                <dt>Term or Question</dt>

                <dd>Definition or Answer</dd>

                </dl>

Term or Question: The definition or answer.

Steps List

Add the class list-steps to an unordered list.

<ul class="list-steps">

The instructions for step number 1. Go here as soon as you can.
The instructions for step number 2.
The instructions for step number 3.

List with Font Awesome

Using icons with lists is awesome, Font Awesome kind of awesome.

1234 Some Street
City, State 99999
email@website.com
(888) 999-1010


                    <ul>

                    <li><i class="fa fa-li fa-check"></i>List Item</li>

                    </ul>

Inline Text Elements

Small Text

Use the <small> tag to display small text.

This text is smaller than the rest of the text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem elit, hendrerit tincidunt ante lacinia, finibus consectetur massa.

Bold Text

Use the <strong> tag to transform text to bold.

This text is bolder than the rest of the text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem elit, hendrerit tincidunt ante lacinia, finibus consectetur massa.

White Text

Add the class white-text to a text element to make the text white.

This text is white.

Dark Links

Make a link dark instead of red (primary) by adding the class dark-link to an anchor tag. You can also use dark-link on the parent element.


    
                <a class="dark-link">DARK LINK</a>

Italic Text

Use the <em> tag to transform text to italic.

This text is italic — whoa! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem elit, hendrerit tincidunt ante lacinia, finibus consectetur massa.

Highlight Text

Use the <mark> tag to transform make any text highlighted.

This text is highlighted with a yellow border. This text is not.

Gold Text (yellow text)

If you want to make text yellow, wrap the text in a span tag with the class of gold

This text is gold (yellow).

Strikethrough Text

Use the <s> tag for strikethrough.

~~This text has a line through it.~~ This text is does not.

Underline Text

Use the <u> tag to make text underlined.

This text is underlined. This text is not.

Text Alignment Classes

Use the classes below for different alignments of text. Add the classes to the html block element. The default is align left.


                <p class="text-left">/p>
                <p class="text-center">Center aligned text.</p>

                <p class="text-right">Right aligned text.</p>

                <p class="text-justify">Justified text.</p>

                <p class="text-nowrap">No wrap text.</p>

This text is aligned left.

This text is aligned right.

This text is aligned center.

This text is justified.

This text is set to nowrap.

Uppercase, Lowercase & Capitalized


                <p class="text-lowercase">Lowercased text.</p>

                <p class="text-uppercase">Uppercased text.</p>

                <p class="text-capitalize">Capitalized text.</p>

THIS TEXT DISPLAYS AS LOWERCASE, BUT IN MARKUP IT'S UPPERCASE...

this text is uppercase, but in markup it's all lowercase...

this text is capitalized, but in markup it's all lowercase...

Abbreviations


                <abbr title="attribute">attr</abbr>

attr

Help Text

A block of help text that breaks onto a new line and may extend beyond one line. Useful to explain a field, a title, etc. Has a smaller font size as well.


                <span class="help-block">Your help text here...</span>

Overview

Overview

Overview

Overview

Sports & Recreation

Web Style Guide

Typography

Fonts

Proxima Nova

Proxima Nova Light

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

1234567890#!$%@&*()

Helvetica Neue

Optima

Headings

Section & Page Titles

Section Title Landing Page

Title of a Section

Heading Landing Page with Image

Page Title

Title of a Page

Generic Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

Default Paragraph

Lead in Paragraph

Blockquote

Regular Ol' Blockquote

Blockquote with a Footer

Blockquote Reverse (align right)

Blockquote Floated Left or Right

Blockquote Floated, Yellow Background

Blockquote Yellow Centered

Lists

Unordered List

Ordered List

Unstyled

Inline List

Inline List with Separators

Description List

Description List Horizontal

Steps List

List with Font Awesome

Inline Text Elements

Small Text

Bold Text

White Text

Dark Links

Italic Text

Highlight Text

Gold Text (yellow text)

This text is gold (yellow).

Strikethrough Text

Underline Text

Text Alignment Classes

Uppercase, Lowercase & Capitalized

Abbreviations

Help Text

1234567890
#!$%@&*()