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