Portland Community College | Portland, Oregon Portland Community College

Web services

Helpers

We have various helper typography pages to help fine tune the content. These include sections, fine print, canceled and address.

Sections

Use sections to group chunks of content together, and differentiate them from the surrounding content using indentation.

Note that this is different from using an HTML <section> – the change is only visual to help divide the page. Accessible headings provide the differentiation in the code.

Section example

I’m not in the section. I’m just a regular paragraph.

I’m in the section! I’m a paragraph in the section.

I’m in the section! I’m a paragraph in the section.

I’m not in the section. I’m just a regular paragraph.

Section development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • Wrap div class="section" around everything you want to be indented

Fine print

Use fine print for short pieces of content like descriptive text, disclaimers and “last updated on” dates. Fine print text is smaller than body text and is italicized.

Fine print example

I’m normal body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum arcu eu velit consequat cursus. And I’m fine print.

Fine print development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • class="fineprint"
    • Can be used on <p>, <span>, <li>, etc., but don’t use it on headings

Canceled

Use canceled to show that an event, class, etc. was canceled or changed, but still remains viewable for reference.

Canceled examples
Canceled event or class:
  • Monday, September 7, 2015
  • Thursday, October 1, 2015 canceled
  • Tuesday, November 10, 2015
Important text signifying a change:
Meeting Date:
10/26/15 Meeting date changed
Agenda Item Deadline:
10/4/15
Location:
Sylvania, Conf Rooms A/B
Event:
Business Meeting
Canceled development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • class can be on <p>, <span>, <li>, etc.
  • Make sure you’re spelling canceled with only one L
  • class="canceled" – strikes out the text
    • We aren’t using del since we aren’t deleting the text from the page – we still want the old text to be visible, and show alongside it that something has changed. Screen readers will read “Thursday, October 1, 2015 canceled” just fine – the del isn’t necessary.
  • To show the red “canceled” text, use <span class="canceled">Old text <span>Red text</span></span>
    • If you only want to display the red text, use <span class="canceled"><span>Red text</span></span>

Address

Use address for any mailing addresses on the page. It differentiates the address by making the text smaller and adding more padding around it than normal paragraph text. Not that this isn’t the same as the HTML address tag.

Address example

Portland Community College
PO Box 19000
Portland, OR 97280-0990

Address development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • p class="address"
    • Use break tags to break the paragraph into separate lines