Progression List

  1. Label

    Progression Title

    • Progression list item
    • Progression list item
  2. Label

    Progression Title

    Example description with optional linked text should you need it.

  3. Label

    Progression Title

  4. Label
    • Progression list item
    • Progression list item

  5. Progression Title

    • Progression list item
    • Progression list item

  6. Progression Title

    • Progression list item
    • Progression list item
  8. Level I

    Knowledge of Ethical and Professional Standards

    • Knowledge and Comprehension
    • Investment Tools
  9. Level II

    Months Prior to the Exam

    Example paragraph. Applicants must meet all CFA® Program enrollment requirements listed on the Become a Charterholder page.

HTML

<section class="grid-container">
    <ol class="progression-list full-width">
        <li class="progression-list-item">
            <span class="progression-list-item-label">Label</span>
            <h4 class="progression-list-item-title">Progression Title</h4>
            <ul class="progression-list-item-description">
                <li>Progression list item</li>
                <li>Progression list item</li>
            </ul>
        </li>
        <li class="progression-list-item">
            <span class="progression-list-item-label">Label</span>
            <h4 class="progression-list-item-title"><a href="#">Progression Title</a></h4>
            <p class="progression-list-item-description-paragraph">Example description with <a href="#">optional linked text</a> should you need it.</p>
        </li>
        <li class="progression-list-item">
            <span class="progression-list-item-label">Label</span>
            <h4 class="progression-list-item-title">Progression Title</h4>
        </li>
        <li class="progression-list-item">
            <span class="progression-list-item-label">Label</span>
            <ul class="progression-list-item-description">
                <li>Progression list item</li>
                <li>Progression list item</li>
            </ul>
        </li>
        <li class="progression-list-item">
            <h4 class="progression-list-item-title">Progression Title</h4>
            <ul class="progression-list-item-description">
                <li>Progression list item</li>
                <li>Progression list item</li>
            </ul>
        </li>
        <li class="progression-list-item">
            <h4 class="progression-list-item-title">Progression Title</h4>
        </li>
        <li class="progression-list-item">
            <ul class="progression-list-item-description">
                <li>Progression list item</li>
                <li>Progression list item</li>
            </ul>
        </li>
        <li class="progression-list-item">
            <span class="progression-list-item-label">Level I</span>
            <h4 class="progression-list-item-title"><a href="#">Knowledge of Ethical and Professional Standards</a></h4>
            <ul class="progression-list-item-description">
                <li>Knowledge and Comprehension</li>
                <li>Investment Tools</li>
            </ul>
        </li>
        <li class="progression-list-item">
            <span class="progression-list-item-label">Level II</span>
            <h4 class="progression-list-item-title">Months Prior to the Exam</h4>
            <p class="progression-list-item-description-paragraph">Example paragraph. Applicants must meet all CFA<sup>®</sup> Program enrollment requirements listed on the <a href="#">Become a Charterholder</a> page.</p>
        </li>
    </ol>
</section>

Problem Being Solved

Content needs to be grouped and displayed in a way that shows a series of steps or a progression.

When to Use

It can be used when the user needs to understand there are several steps in a process. A short description of each step can be displayed. A more detailed description can be linked to.

When Not to Use

It should not be used to display non-sequential content or long text. 

Formatting

  • Place progress-list in a section that has the class name "grid-container"
  • If instead of regular numbers you would like to use upper/lower roman numerals or regular letters, please add one of the following classes the ordered or unordered list:
    • class="...upper-roman ..."
    • class="...lower-roman ..."
    • class="...upper-latin ..."
    • class="...lower-latin ..."