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.

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.
    • For accessibility, you need to add a visually-hidden “yes” or “no” to the beginning of each list item. For example: <li class="yes"><span class="visually-hide">Yes: </span>A yes item</li>
  • Indexlist – <div class="indexlist">
    • Headings must be <h4>.
    • The <ul> and <li> inside don’t have a class.
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”.

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

You can use index lists for long lists of short 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 context to the items.

Items

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Ordered lists

When creating a sequential list, it’s important for accessibility to use an 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.

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>.
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 or drop classes

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

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.

Definition list development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • Default – no class necessary
  • Concise – <dl class="concise">
Default definition lists

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

This is the word or phrase to be defined in this definition list.
And this is the definition – it has a link.
This is the word 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 items, or lists you want to be in a condensed format.

Item 1:
Description for item 1.
Item 2:
Description for item 2.