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.

Homepage Components FY2021

CFA® Charterholders are highly regarded throughout the investment industry because they measure up to a higher standard of ethics and professional excellence.

Find Out How

Homepage Hero

Code

HTML

<section class="grid-container layered-hero">
    <div class="section-background" style="background-image:url(/Content/src/img/examples/hero_stdtemplate.jpg);--bg-image:url(/Content/src/img/examples/hero_widetemplate.png);--mbg-image:url(/Content/src/img/examples/hero_widetemplate_mobile.png);"></div>
    <h1 class="section-title">Homepage Components</h1>
    <div class="section-content">
        <p class="section-description">CFA® Charterholders are highly regarded throughout the investment industry because they measure up to a higher standard of ethics and professional excellence.</p>
        <p class="section-cta">
            <a href="#" class="button">Find Out How</a>
        </p>
    </div>
    <div class="section-asset" style="background-image:url(/Content/src/img/examples/testimonial-image.png);"></div>
</section>
        

Documentation

Problem Being Solved

We want to highlight something on the homepage as important.

When To Use

This hero component can only be added to the top of the homepage.

Formatting

This hero sits outside of the page's article element.

The background and foreground images are dynamic, so they must be set in the HTML with inline styling. In order to enable responsive, dynamic backgrounds, these rules must be added inline:

  • background-image: url("This should be the url to the full sized image to be used as a fallback");
  • --bg-image: url("This should be the url to the full sized image");
  • --mbg-image: url("This should be the url to the mobile sized image");

By setting the CSS variables inline, we can allow users to set the background images while still making use of background property rules in CSS. The foreground image is similar, but does not have a mobile version so it does not use the CSS variables.

Call to Action (CTA) Tiles

Code

HTML

<div class="grid-container edge-to-edge cta-tiles">
        <div class="cta-tile">
        <span class="label">Our Programs</span>
        <a href="#">Learn About the Programs</a>
    </div>
        <div class="cta-tile">
        <span class="label">CFA Exams</span>
        <a href="#">Enroll and Register for the CFA® Exam</a>
    </div>
        <div class="cta-tile">
        <span class="label">Membership</span>
        <a href="#">Renew Your CFA® Institute Membership</a>
    </div>
</div>
        

Documentation

Problem Being Solved

We are trying to point out important links.

When To Use

This component should only be placed on the home page, immediately after the hero image.

Fact Box

Code

HTML

<div class="fact-box-set full-width">
    <aside class="fact-box color-changer-init">
        <dl>
            <dt class="fact-box-title border-color">Fact Box Title</dt>
            <dd class="fact-box-stats">
                <div class="fact-box-stats-stat">100<span class="fact-box-stats-stat-node">+</span></div>
                <div class="fact-box-stats-label">LABEL</div>
                <div class="fact-box-stats-description">Fact box text goes here.</div>
            </dd>
        </dl>
    </aside>
    <aside class="fact-box color-changer-init">
        <dl>
            <dt class="fact-box-title border-color">Fact Box Title</dt>
            <dd class="fact-box-stats">
                <div class="fact-box-stats-stat">00<span class="fact-box-stats-stat-node"></span></div>
                <div class="fact-box-stats-label">LABEL</div>
                <div class="fact-box-stats-description">Fact box text goes here.</div>
            </dd>
        </dl>
    </aside>
    <aside class="fact-box color-changer-init">
        <dl>
            <dt class="fact-box-title border-color">Fact Box Title</dt>
            <dd class="fact-box-stats">
                <div class="fact-box-stats-stat">00<span class="fact-box-stats-stat-node"></span></div>
                <div class="fact-box-stats-label">LABEL</div>
                <div class="fact-box-stats-description">Fact box text goes here.</div>
            </dd>
        </dl>
    </aside>
    <aside class="fact-box color-changer-init">
        <dl>
            <dt class="fact-box-title border-color">Fact Box Title</dt>
            <dd class="fact-box-stats">
                <div class="fact-box-stats-stat">00<span class="fact-box-stats-stat-node"></span></div>
                <div class="fact-box-stats-label">LABEL</div>
                <div class="fact-box-stats-description">Fact box text goes here.</div>
            </dd>
        </dl>
    </aside>
</div>
        

Documentation

Problem Being Solved

Certain statistics should be called out to show successes.

When To Use

This component can be used on any page, though when placed on the home page it will be style differently.

Code

HTML

<section class="grid-container full-width featured-content">
    <img class="image" src="/Content/src/img/examples/testimonial-image.png" alt="image example" />
    <span class="label">Research & Analysis</span>
    <p class="title"><a href="#">Renew Your CFA® Institute Membership</a></p>
    <p class="short-description">Coronavirus is having a major impact on public health and the global financial markets. CFA Institute is working to provide resources and to support the development of policy measures that address the functioning of markets and the financial system.</p>
</section>
        

Documentation

Problem Being Solved

There is a particular article or piece of content we want to feature, so we add a much larger section to make it stand out.

When To Use

This component can only go on the homepage. To use the blue background, add the class "blue" to the containing section.

Top Articles

full sized

Top Articles on Blue

full sized

Top Articles on Plain

Code

HTML

<div class="top-articles grid-container">
    <div class="top-article">
        <span class="label">Take 15</span>
        <a href="#" class="title">Trust in the Era of Artificial Intelligence, Innovation, and Technology</a>
    </div>

    <div class="top-article">
        <span class="label">Research Foundation</span>
        <a href="#" class="title">ESG and Responsible Institutional Investing Around the World</a>
    </div>

    <div class="top-article">
        <span class="label">Refresher Reading</span>
        <a href="#" class="title">Private Company Valuation</a>
    </div>

    <div class="top-article">
        <span class="label">Annual Conference</span>
        <a href="#" class="title">The Enhanced Importance of Investing with Impact</a>
    </div>

    <div class="top-article">
        <span class="label">Take 15</span>
        <a href="#" class="title">Trust in the Era of Artificial Intelligence, Innovation, and Technology</a>
    </div>

    <div class="top-article">
        <span class="label">Research Foundation</span>
        <a href="#" class="title">ESG and Responsible Institutional Investing Around the World</a>
    </div>

    <div class="top-article">
        <span class="label">Refresher Reading</span>
        <a href="#" class="title">Private Company Valuation</a>
    </div>
</div>
        

Documentation

Problem Being Solved

Recent articles may be of interest, so we want to call them out.

When To Use

This component can only be used on the homepage, and should be placed inside a standard section placeholder.

Press Release Spotlight

Code

HTML

<div class="grid-container edge-to-edge press-tiles">
    <div class="press-tile">
        <span class="label">27 May 2020</span>
        <a href="#">Over 12,000 Attend CFA Virtual Annual Conference</a>
    </div>
    <div class="press-tile">
        <span class="label">18 May 2020</span>
        <a href="#">CFA Institute Member Survey Predicts Slow Economic Recovery</a>
    </div>
    <div class="press-tile">
        <span class="label">30 April 2020</span>
        <a href="#">University of Sydney Wins CFA Institute Research Challenge</a>
    </div>
</div>
        

Documentation

Problem Being Solved

We are trying to point out recent press releases.

When To Use

This component should only be placed on the home page.

Code

HTML

<div class="grid-container edge-to-edge footer-cta">
    <p class="title">Professional Learning Resources</p>
    <p class="description">
        Stay competitive in the investment management industry with our collection of Professional Learning (PL) resources— including self-study and training, events, books, articles, webinars, podcasts, and more.
    </p>
    <p class="cta">
        <a href="#" class="button">Browse Our Collection</a>
    </p>
</div>
        

Documentation

Problem Being Solved

The homepage has reached its end, and we have one more thing to show you.

When To Use

This component should only be placed on the home page.