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.

Jump to a component:

Default ordered lists

Use a default ordered list when you need to list a series of steps or other content that needs to be numbered sequentially.

Styling

These lists are numbered and allow for nesting.

How to use for Default ordered lists

Use the “numbered list” option in the toolbar.

Development info for Default ordered lists

Stylesheet location: /_source/styles/base/_typography.scss

<ol>
  <li></li>
  <li>
    <ol> <!-- could also be <ul> -->
      <li></li>
    </ol>
  </li>
</ol>
Example of Default ordered lists
  1. This is a list item in a basic ordered list.
    1. 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 list

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.

Styling

Central steps lists look like default ordered lists, but have large, circled numbers and larger headings, and can include more complex content than normal lists.

How to use for Central steps list

Add in the HTML (see “development info”).

Development info for Central steps list

Stylesheet location: /_source/styles/components/_central-steps.scss

  • The headings must be <h4>, <h5>, or <h6>.
  • If you have a sub-heading in the list that shouldn’t have the circle, use class="no-circle".
  • Also works with <ol id="central-steps"> for legacy use.
<ol class="central-steps">
  <li><h4>Heading 1</h4> <!-- must be <h4>, <h5>, or <h6> -->
  Other content in this section.</li>
  <li><h4>Heading 2</h4>
  <h5 class="no-circle">Heading without a circle</h5>
  Other content in this section.</li>
</ol>
Example of Central steps list
  1. Apply to PCC

    Applying to PCC is free and only takes a few minutes. Complete this step as soon as possible so you can start using PCC resources.
    Apply to PCC


  2. Application timeline
    Term you want to start Apply to Veterinary Technology
    Fall 2024 January – May 1, 2024
    Fall 2025 Spring 2025

    Take prerequisites

    These classes must be completed with a “C” or better by the May 1 deadline. If you’ve taken these at another college, you must contact us to have your transcripts evaluated prior to applying.

    • MTH 95: Intermediate Algebra, or higher
    • WR 121: English Composition, or higher
  3. Letter of recommendation

    This letter should be from a practicing Veterinarian or Certified, Licensed, or Registered Veterinary Technician.