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.