Lists

Example: List Section

  1. Review your firm’s existing code of ethics, policies, and procedures in comparison to the Code and identify possible gaps or differences.

    • Nested list item
    • Nested list item
    • Nested list item
  2. Honest, competent, and ethical conduct that complies with applicable law Refer to the Recommendations and Guidance (Appendix) and review the interpretations and additional guidance to help you determine whether your firm's procedures comply.
  3. Make revisions, as needed, to align with the Code.
  4. Fair treatment with respect to other clients Fair treatment is not always equal treatment, particularly regarding all of a financial professional's clients. For example, other clients may have different objectives and different risk tolerances, resulting in investment portfolios that are very different from your own. You should not consider it unfari treatment when another client with a riskier portfolio earns higher returns or when another client's less risky portfolio performs better when financial markets decline.

Example: Upper Roman Numeral List Section

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example: Lower Roman Numeral List Section

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example: Upper Case Letter List Section

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example: Lower Case Letter List Section

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code

HTML

<ol class="rich-list list-unstyled">
    <li>
        <div class="media">
            <div class="media-left">
                <span class="large-number"></span>
            </div>
            <div class="media-body">
                <p>Review your firm’s existing code of ethics, policies, and procedures in comparison to the Code and identify possible gaps or differences.</p>
                <ul>
                    <li>Nested list item</li>
                    <li>Nested list item</li>
                    <li>Nested list item</li>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <div class="media">
            <div class="media-left">
                <span class="large-number"></span>
            </div>
            <div class="media-body">
                <span class="list-item-title">Honest, competent, and ethical conduct that complies with applicable law</span>
                Refer to the Recommendations and Guidance (Appendix) and review the interpretations and additional guidance to help you determine whether your firm's procedures comply.
            </div>
        </div>
    </li>
    <li>
        <div class="media">
            <div class="media-left">
                <span class="large-number"></span>
            </div>
            <div class="media-body">
                Make revisions, as needed, to align with the Code.
            </div>
        </div>
    </li>
    <li>
        <div class="media">
            <div class="media-left">
                <span class="large-number"></span>
            </div>
            <div class="media-body">
                <span class="list-item-title"><a href="#">Fair treatment with respect to other clients</a></span>
                Fair treatment is not always equal treatment, particularly regarding all of a financial professional's clients. For example, other clients may have different objectives and different risk tolerances, resulting in investment portfolios that are very different from your own. You should not consider it unfari treatment when another client with a riskier portfolio earns higher returns or when another client's less risky portfolio performs better when financial markets decline.
            </div>
        </div>
    </li>
</ol>
        

Documentation

Problem Being Solved

We need to display content with distinct steps.

When To Use

Lists can be used to display content with clear process or steps. This pattern adds visual emphasis to important content.

When Not To use

Lists are not suitable for long content, secondary content, or for showing branching or complex processes.

Formatting

  • The numbers in these lists are generated by a CSS counter.
  • If instead of regular numbers you would like to use upper/lower roman numerals or regular letters, please add the following classes after "rich-list" to the ordered or unordered list:
    • class="rich-list upper-roman ..."
    • class="rich-list lower-roman ..."
    • class="rich-list upper-latin ..."
    • class="rich-list lower-latin ..."

Checklist (Blue/White Box)

  • Months Prior to the Exam

    Address the items below a few months before your first exam.

    • Review all testing policies
    • Confirm your valid passport
    • Print your exam admission ticket
    • Check for test center conditions
    • Plan your transportation
    • Review the Rules of Procedure
  • Months Prior to the Exam

    Address the items below a few months before your first exam.

    • Review all testing policies
    • Confirm your valid passport
    • Print your exam admission ticket
    • Check for test center conditions
    • Plan your transportation
    • Review the Rules of Procedure
  • Months Prior to the Exam

    Address the items below a few months before your first exam.

    • Review all testing policies
    • Confirm your valid passport
    • Print your exam admission ticket
    • Check for test center conditions
    • Plan your transportation
    • Review the Rules of Procedure

Code

HTML

<section class="grid-container">
    <ul class="checklist full-width">
        <li class="checklist-item">
            <div class="checklist-item-blue">
                <h4 class="checklist-item-title">Months Prior to the Exam</h4>
                <p class="checklist-item-subtitle">Address the items below a few months before your first exam.</p>
            </div>
            <ul class="checklist-item-white-overview">
                <li>Review all testing policies</li>
                <li>Confirm your valid passport</li>
                <li>Print your exam admission ticket</li>
                <li>Check for test center conditions</li>
                <li>Plan your transportation</li>
                <li>Review the Rules of Procedure</li>
            </ul>
        </li>
        <li class="checklist-item">
            <div class="checklist-item-blue">
                <h4 class="checklist-item-title">Months Prior to the Exam</h4>
                <p class="checklist-item-subtitle">Address the items below a few months before your first exam.</p>
            </div>
            <ul class="checklist-item-white-overview">
                <li>Review all testing policies</li>
                <li>Confirm your valid passport</li>
                <li>Print your exam admission ticket</li>
                <li>Check for test center conditions</li>
                <li>Plan your transportation</li>
                <li>Review the Rules of Procedure</li>
            </ul>
        </li>
        <li class="checklist-item">
            <div class="checklist-item-blue">
                <h4 class="checklist-item-title">Months Prior to the Exam</h4>
                <p class="checklist-item-subtitle">Address the items below a few months before your first exam.</p>
            </div>
            <ul class="checklist-item-white-overview">
                <li>Review all testing policies</li>
                <li>Confirm your valid passport</li>
                <li>Print your exam admission ticket</li>
                <li>Check for test center conditions</li>
                <li>Plan your transportation</li>
                <li>Review the Rules of Procedure</li>
            </ul>
        </li>
    </ul>
</section>
        

Documentation

Problem Being Solved

When To Use

When Not To use

Formatting

  • Place checklist inside section that has the class name "grid-container"
  • If there is only one checklist box, the decorative green box will not be present

Progression List (White Box)

  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
  7. Level I

    Knowledge of Ethical and Professional Standards

    • Knowledge and Comprehension
    • Investment Tools
  8. Level II

    Months Prior to the Exam

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

Code

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>
        

Documentation

Problem Being Solved

When To Use

When Not To use

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

Icon List

  • example
    Gold Standard

    This benefit has a title and a link.

  • Global Passport

    This benefit has a title but no link.

  • This benefit has no title.

Code

HTML

<ul class="rich-list no-border list-unstyled">
    <li>
        <div class="media">
            <div class="media-left">
                <img class="image" src="/Content/img/examples/branded_image.jpg" alt="example">
            </div>
            <div class="media-body">
                <span class="list-item-title"><a href="#">Gold Standard</a></span>
                This benefit has a title and a link.
            </div>
        </div>
    </li>
    <li>
        <div class="media">
            <div class="media-left">
                <span class="icon pe-7s-map-2 purple"></span>
            </div>
            <div class="media-body">
                <span class="list-item-title">Global Passport</span>
                This benefit has a title but no link.
            </div>
        </div>
    </li>
    <li>
        <div class="media">
            <div class="media-left">
                <span class="icon pe-7s-chat green"></span>
            </div>
            <div class="media-body">
                This benefit has no title.
            </div>
        </div>
    </li>
</ul>
        

Documentation

Problem Being Solved

When To Use

When Not To use

Formatting

Example: Benefits List

  • example Benefits Title Here

    This is where your short description of the benefit should go.

  • example Expand Your Knowledge

    Our rigourous curriculum equips you for complex investment decisions and real-world scenarios.

  • example Become an Ethical Authority

    Gain the confidence and clarity in navigating ethical issues within the financial industry.

  • example Benefits Title Here

    This is where your short description of the benefit should go.

  • example Expand Your Knowledge

    Our rigourous curriculum equips you for complex investment decisions and real-world scenarios.

  • example Become an Ethical Authority

    Gain the confidence and clarity in navigating ethical issues within the financial industry.

  • example

    This is where your short description of the benefit should go.

  • example

    Our rigourous curriculum equips you for complex investment decisions and real-world scenarios.

  • example

    Gain the confidence and clarity in navigating ethical issues within the financial industry.

  • Benefits Title Here

    This is where your short description of the benefit should go.

  • Expand Your Knowledge

    Our rigourous curriculum equips you for complex investment decisions and real-world scenarios.

  • Become an Ethical Authority

    Gain the confidence and clarity in navigating ethical issues within the financial industry.

Code

HTML

<section class="grid-container"> 
    <ul class="benefits-list full-width">  
        <li class="benefits-list-item">
            <img class="benefits-list-item-icon" src="/Content/img/examples/branded_image.jpg" alt="example">
            <a href="#" class="benefits-list-item-title h4">Benefits Title Here</a>
            <p class="benefits-list-item-text">This is where your short description of the benefit should go.</p>
        </li>
        <li class="benefits-list-item">
            <img class="benefits-list-item-icon" src="/Content/img/examples/branded_image.jpg" alt="example">
            <a href="#" class="benefits-list-item-title h4">Expand Your Knowledge</a>
            <p class="benefits-list-item-text">Our rigourous curriculum equips you for complex investment decisions and real-world scenarios.</p>
        </li>
        <li class="benefits-list-item">
            <img class="benefits-list-item-icon" src="/Content/img/examples/branded_image.jpg" alt="example">
            <a class="benefits-list-item-title h4">Become an Ethical Authority</a>
            <p class="benefits-list-item-text">Gain the confidence and clarity in navigating ethical issues within the financial industry.</p>
        </li>            
        <li class="benefits-list-item">
            <img class="benefits-list-item-icon" src="/Content/img/examples/branded_image.jpg" alt="example">
            <span class="benefits-list-item-title h4">Benefits Title Here</span>
            <p class="benefits-list-item-text">This is where your short description of the benefit should go.</p>
        </li>
        <li class="benefits-list-item">
            <img class="benefits-list-item-icon" src="/Content/img/examples/branded_image.jpg" alt="example">
            <span class="benefits-list-item-title h4">Expand Your Knowledge</span>
            <p class="benefits-list-item-text">Our rigourous curriculum equips you for complex investment decisions and real-world scenarios.</p>
        </li>
        <li class="benefits-list-item">
            <img class="benefits-list-item-icon" src="/Content/img/examples/branded_image.jpg" alt="example">
            <span class="benefits-list-item-title h4">Become an Ethical Authority</span>
            <p class="benefits-list-item-text">Gain the confidence and clarity in navigating ethical issues within the financial industry.</p>
        </li>
        <li class="benefits-list-item">
            <img class="benefits-list-item-icon" src="/Content/img/example-icon.png" alt="example">
            <p class="benefits-list-item-text">This is where your short description of the benefit should go.</p>
        </li>
        <li class="benefits-list-item">
            <img class="benefits-list-item-icon" src="/Content/img/example-icon.png" alt="example">
            <p class="benefits-list-item-text">Our rigourous curriculum equips you for complex investment decisions and real-world scenarios.</p>
        </li>
        <li class="benefits-list-item">
            <img class="benefits-list-item-icon" src="/Content/img/example-icon.png" alt="example">
            <p class="benefits-list-item-text">Gain the confidence and clarity in navigating ethical issues within the financial industry.</p>
        </li>         
    </ul>
</section> 
        

Documentation

Problem Being Solved

We need to display a short list of benefits in a way that showcases them.

When To Use

Benefits are intended specifically to list advantages or marketing points for a specific audience.

When Not To use

Benefits should not be used for long chunks of content, or for non-benefit-specific information.

Formatting

  • Place benfits-list in a section that has the class name "grid-container"
  • There may be an overview
  • The icons will be an image or an image of an icon. We also have an example where the image is a div that uses the cfaicons (hopefully this will be the option we get to as the default).
  • The first row of items are an example of benefits with an image-icon, a linked title, and text.
  • The second row is an example of benefits with an image-icon, non-linked title, and text.
  • The third row is an example of an image-icon, no title, and text.
  • The fourth row is an exmaple of a div-icon (using the cfaicon class), linked title, and text.

Sequential Steps

  1. The CFA Program contains three levels of curriculum, each with its own exam. Passing the exam for all three levels is a requirement in order to obtain the CFA charter.
  2. Qualified Work Experience
    Complete 48 months of work experience before, during, or after participation in the CFA Program. Your experience must be directly involved with investment decisions.
  3. Submit Reference Letters
    Provide references of your abilities, professional character, and explain why you should be considered for a CFA Institute membership. References from supervisors or current CFA Institute members carry more weight.
  4. Obtain the CFA® Charter
    Apply to become a CFA member by submitting payment and pre-requisites for review. Once your application is approved you will become a chartered CFA member.
  5. Pass the CFA Program Exams
    The CFA Program contains three levels of curriculum each with its own exam. Passing the exam for all three levels is a requirement in order to obtain the charter.
  6. Achieve Qualified Work Experience
    Apply to become a member by submitting payment and prerequisites for review. Once your application is approved, you will become a chartered CFA Insitute member.

Code

HTML

<ol class="sequential-steps full-width">
    <li class="step color-changer-init before-color">
        <div class="step-title before-background after-color"><span><a href="#">Pass CFA<sup>®</sup> Program Exams</a></span></div>
        <div class="step-description before-background"><span>The CFA Program contains three levels of curriculum, each with its own exam. Passing the exam for all three levels is a requirement in order to obtain the CFA charter.</span></div>
    </li>
    <li class="step color-changer-init before-color">
        <div class="step-title before-background after-color"><span>Qualified Work Experience</span></div>
        <div class="step-description before-background"><span>Complete 48 months of work experience before, during, or after participation in the CFA Program. Your experience must be directly involved with investment decisions.</span></div>
    </li>
    <li class="step color-changer-init before-color">
        <div class="step-title before-background after-color"><span>Submit Reference Letters</span></div>
        <div class="step-description before-background"><span>Provide references of your abilities, professional character, and explain why you should be considered for a CFA Institute membership. References from supervisors or current CFA Institute members carry more weight.</span></div>
    </li>
    <li class="step color-changer-init before-color">
        <div class="step-title before-background after-color"><span>Obtain the CFA<sup>®</sup> Charter</span></div>
        <div class="step-description before-background"><span>Apply to become a CFA member by submitting payment and pre-requisites for review. Once your application is approved you will become a chartered CFA member.</span></div>
    </li>
    <li class="step color-changer-init before-color">
        <div class="step-title before-background after-color"><span>Pass the CFA Program Exams</span></div>
        <div class="step-description before-background"><span>The CFA Program contains three levels of curriculum each with its own exam. Passing the exam for all three levels is a requirement in order to obtain the charter.</span></div>
    </li>
    <li class="step color-changer-init before-color">
        <div class="step-title before-background after-color"><span>Achieve Qualified Work Experience</span></div>
        <div class="step-description before-background"><span>Apply to become a member by submitting payment and prerequisites for review. Once your application is approved, you will become a chartered CFA Insitute member.</span></div>
    </li>              
</ol>
        

Documentation

Problem Being Solved

When To Use

When Not To use

Formatting

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