We're using cookies, but you can turn them off in your browser settings. Otherwise, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

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 ..."