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> since the change is only visual to help divide the page. Accessible headings provide differentiation in the code.

Section development info
  • Stylesheet location: /_source/styles/base/_typography.scss
  • Wrap <div class="section"> around everything you want to be indented.
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.

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 development info
  • Stylesheet location: /_source/styles/base/_typography.scss
  • class="fineprint"
    • Can be used on <p>, <span>, <li>, etc. but don’t use it on headings.
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.

Canceled

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

Canceled development info
  • Stylesheet location: /_source/styles/base/_typography.scss
  • The 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, 2023 canceled” just fine – the <del> isn’t necessary.
  • To show the red “canceled” text, use <span class="canceled">Old text <span class="canceled-inner">Red text</span></span>.
    • If you only want to display the red text, use <span class="canceled"><span class="canceled-inner">Red text</span></span>.
Canceled examples
Canceled event or class
  • Monday, September 7, 2023
  • Thursday, October 1, 2023 canceled
  • Tuesday, November 10, 2023
Important text signifying a change
  • Meeting date: 10/26/23 Meeting date changed
  • Agenda item deadline: 10/4/23
  • Location: Sylvania, Conf Rooms A/B
  • Event: Business meeting

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. Note that this isn’t the same as the HTML <address> tag.

Address development info
  • Stylesheet location: /_source/styles/base/_typography.scss
  • <p class="address">
    • Use <br> tags to break the paragraph into separate lines.
Address example

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