We're using cookies, but you can turn them off in Privacy Settings. If you use the site without changing settings, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

Benefits List

  • example image Benefits Title Here

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

  • example image Expand Your Knowledge

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

  • example image Become an Ethical Authority

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

  • example image Benefits Title Here

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

  • example image Expand Your Knowledge

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

  • example image Become an Ethical Authority

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

  • example image

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

  • example image

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

  • example image

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