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"
withli class="yes"
orli class="no"
- Don’t add the icons manually – they’re added with CSS
- Indexlist –
div class="indexlist"
- Headings must be
h4
- The
ul
andli
inside don’t have a class
- Headings must be
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.
- 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.
- 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.
-
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.
-
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
orh5
- It’s possible to set up
div class="central-steps"
withh3
,h4
orh5
headings. Only do this if the items need to include something like Foundation columns or tabs, which wouldn’t be semantically correct in anli
. However, it’s still ideal to use anol
if possible, because they are steps. - For
div class="central-steps"
you can make the headings full-width if needed. Just addclass="central-steps-full"
to thediv
.
- The headings must be
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"