Portland Community College | Portland, Oregon Portland Community College

Web services

Lists

Lists are a great way to break up large chunks of content, and make the page easier to read and understand. It’s a lot less intimidating to scan a list of items than to read a comma-separated list in a long paragraph. Lists are also perfect for writing out sequential content.

Unordered lists

Unordered lists offer a basic way to separate items and display them in a visually-appealing way. We have a few different styles to meet various needs.

Default unordered lists

Use a default list in most cases.

  • This is a list item in a basic unordered list.
    • This is a nested list item in a basic unordered list – it has a link.
  • This is a list item in a basic unordered list.
Lists with no bullets

If you need a list without bullets (this is usually only the case in callouts), use this style.

  • This is a list item in a list with no bullets.
  • This is a list item in a list with no bullets – it has a link.
  • Lists with no bullets shouldn’t be nested. Put them all at the same level.
Yes no lists

Use yes no lists to make lists of yes or no items easy to understand at a glance. It uses Font Awesome icons and color to visually show which items are “no” and which are “yes”.

  • This is a “yes” item in a yes-no list.
  • This is a “no” item in a yes-no list.
  • This is a “yes” item in a yes-no list.
Index lists

You can use index lists for long lists of short list items in order to save space. It’s a specialized type of list and should only be used in certain circumstances. Usually, a default list is what you need.

Don’t use the no bullets class or manually create the columns – this is done with CSS. Each index list should have a heading to give the items context.

Items

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
Unordered list development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • Default – no class necessary
  • No bullets – ul class="no-bullets"
  • Yes no – ul class="yes-no" with li class="yes" or li class="no"
    • Don’t add the icons manually – they’re added with CSS
  • Indexlist – div class="indexlist"
    • Headings must be h4
    • The ul and li inside don’t have a class

Ordered lists

When creating a sequential list, it’s important for accessibility to use an actual ordered list instead of an unordered list and manually entering the numbers. The numbers also update automatically in ordered lists if you add or remove items.

Default ordered lists

Use an ordered list when you need to list a series of steps.

  1. This is a list item in a basic ordered list.
    • This is a nested list item in a basic ordered list – it has a link.
  2. This is a list item in a basic ordered list.
Central steps

Use central steps only for the core ordered list on any page. It isn’t used for ordinary ordered lists, only very important and specialized ones.

  1. Log in

    Log in to the MyPCC. If you can’t remember your username or password, use the help links on the MyPCC login page.

  2. Add/Drop classes

    Go to the MyPCC Home tab, and click Add/Drop classes in the Registration Services channel.

Ordered list development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • Default – no class necessary
  • Central steps – ol class="central-steps"
    • The headings must be h3, h4 or h5
    • It’s possible to set up div class="central-steps"with h3, h4 or h5 headings. Only do this if the items need to include something like Foundation columns or tabs, which wouldn’t be semantically correct in an li. However, it’s still ideal to use an ol if possible, because they are steps.
    • For div class="central-steps" you can make the headings full-width if needed. Just add class="central-steps-full" to the div.

 

Definition lists

We’re planning on phasing out definition lists across the website and replacing them with headings or unordered lists with bolding when necessary. In the meantime, there are quite a few definition lists in use.

Default definition lists

Use a basic definition list when listing out items with a term and definition relationship.

This is the work or phrase to be defined in this definition list
And this is the definition – it has a link
This is the work or phrase to be defined in this definition list
And this is the definition
Concise definition lists

Use a concise list for lists with short list items, or lists you want to be in a condensed format.

Item 1:
Description for item 1.
Item 2:
Description for item 2.
Definition list development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • Default – no class necessary
  • Concise – dl class="concise"