Web services

Helpers

We have various helper typography components to help fine-tune the content.

Jump to a component:

Sections

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

Styling

Sections are slightly indented.

How to use for Sections

Add in the HTML (see “development info”).

Development info for Sections

Stylesheet location: /_source/styles/base/_typography.scss

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

<div class="section">
  Content <!-- everything here will be indented -->
</div>
Example of Sections

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.

Fine print

Use fine print for short pieces of content like descriptive text, disclaimers, and “last updated on” dates.

Styling

Fine print text is smaller than body text, and is italicized and lighter gray in color.

How to use for Fine print

Add in the HTML (see “development info”).

Development info for Fine print

Stylesheet location: /_source/styles/base/_typography.scss

Can be used on <p>, <span>, <li>, etc. but don’t use it on headings.

<p class="fineprint">Fine print</p> <!-- can be used on other elements too --
Example of Fine print

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.

Canceled

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

Styling

The text that has changed is lighter gray in color and struck through, and the note is red and italicized.

How to use for Canceled

Add in the HTML (see “development info”).

Development info for Canceled

Stylesheet location: /_source/styles/base/_typography.scss

  • The class can be on <p>, <span>, <li>, etc.
  • Make sure you spell canceled with only one “l”.
  • 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 canceled” just fine – the <del> isn’t necessary.
  • Don’t add the strikethrough, the CSS adds it automatically.
<p class="canceled"> <!-- can be on other elements too -->
  Text that has changed
  <span class="canceled-inner">Red note</span>
</p>
Example of Canceled
Canceled event or class
  • Monday, September 7
  • Thursday, October 1 canceled
  • Tuesday, November 10
Important text signifying a change
  • Meeting date: 10/26 Meeting date changed
  • Agenda item deadline: 10/4
  • Location: Sylvania, Conf Rooms A/B
  • Event: Business meeting

Address

Use address for any mailing addresses on the page so that they’re differentiated from the rest of the content on the page by subtle styling.

Styling

The text is smaller and there’s a bit more padding around the address than normal paragraph text.

How to use for Address

Add in the HTML (see “development info”).

Development info for Address

Stylesheet location: /_source/styles/base/_typography.scss

  • Note that this isn’t the same as the HTML <address> tag.
  • Use <br> tags (or press shift + return or shift + enter in WordPress) to break the paragraph into separate lines.
<p class="address">
  Address
</p>
Example of Address

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Curabitur eget ex vestibulum, auctor eros id, egestas nibh. Cras tempus eros sapien, sed sodales nisi pulvinar in.

Visually hide

Hide content visually but not from screen readers – see visually hide for more information.