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

沙巴体育官网ment 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 snippets of descriptive text. If the text is longer than a line or so, don’t use fine print since blocks of italicized text aren’t accessible. Chances are, plain text is fine.

If you’re writing a disclaimer or longer note, use a disclaimer instead.

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

沙巴体育官网ment 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.

Disclaimer

Disclaimer is similar to fine print but is used for longer chunks of text, usually for actual disclaimers or other required but non-core content. Guidelines:

  • The disclaimer should be the last piece of content on the page, below even related callouts.
  • They can optionally include a bolded intro word such as “disclaimer” or “note”.
  • Don’t use disclaimers in any component with a background, such as a callout, table, or tabs. The gray text is only accessible on a white background.
Styling

Disclaimers are light gray, non-italicized (unlike fine print), and have a top border. Any disclaimer should be the last piece of content on the page.

How to use for Disclaimer

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

沙巴体育官网ment info for Disclaimer

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

Can be used on a <p> (for single sentences) or on a <div> (for multiple sentences).

<p class="disclaimer">Fine print</p>
or
<div class="disclaimer">
  <p>Sentence one.</p>
  <p>Sentenct two, etc.</p>
</div>
Example of Disclaimer

Disclaimer: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius tincidunt velit non vestibulum. Phasellus vel ante feugiat, luctus dui pulvinar, vehicula ante. Etiam euismod pharetra odio, in elementum leo pretium et. Praesent ac gravida nibh. In hac habitasse platea dictumst.

This disclaimer contains multiple sentences, which are in a div. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius tincidunt velit non vestibulum.

Phasellus vel ante feugiat, luctus dui pulvinar, vehicula ante. Etiam euismod pharetra odio, in elementum leo pretium et. Praesent ac gravida nibh. In hac habitasse platea dictumst.

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

沙巴体育官网ment 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”).

沙巴体育官网ment 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.