Lists

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

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

List content needs to have an attractive design to add emphasis or draw attention.

When To Use

It can be used if list content would be enhanced by icons.

When Not To use

It should not be used to display non-list content or large amounts of text.