Home Page Components

Lorem ipsum dolor sit amet, consectetur adipiscing elit

CTA Link

full sized

Homepage Hero

Code

HTML

<section class="grid-container hero-hp">
    <h2 class="section-title">Title</h2>
    <div class="section-content">
        <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <p class="section-cta">
        <a href="#" class="cfaicon-book">CTA Link</a>
        </p>
    </div>
        <div class="section-asset">
        <figure class="image-figure">
        <picture>
        <source srcset="/Content/img/examples/Primary-Landing-Hero-Image.png" media="(max-width: 991px)" alt="mobile sized">
        <img src="/Content/img/examples/Primary-Landing-Hero-Image.png" alt="full sized">
            </picture>
        </figure>
    </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 can be set to one of three colors by changing adding a class to the hero-hp container:

  • Primary blue (default, no class)
  • Primary purple (class name: bg-p_purple)
  • Secondary background blue (class name: bg-s_bgblue)

The category can be one of five options, placing a specific icon before the CTA with these classes assigned to the CTA "p" or "a" elements:

  • None (default, no class)
  • Report (class name: cfaicon-book)
  • Media (class name: cfaicon-play_button)
  • Event (class name: cfaicon-calendar)
  • Article (class name: cfaicon-newspaper)

Call to Action (CTA)

Code

HTML

<div class="banner-cta">
    <span class="banner-cta-icon"></span>
    <a href="#" class="banner-cta-link">CFA<sup>®</sup> Program Early Registration Now Open</a>
</div>
        

Documentation

Problem Being Solved

When To Use

When Not To use

Formatting

Promo Box (Pillars)

We care about ethics

CFA Institute stands for creating an environment where investors' interests come first, markets function at their best, and economies grow.

accelerate and cement industry standards.

accelerate and cement industry standards.

accelerate and cement industry standards.

accelerate and cement industry standards.

Code

HTML

<div class="promo-box text-center">
    <h2 class="h1 promo-title">We care about ethics</h2>
    <h3 class="alt promo-description">CFA Institute stands for creating an environment where investors' interests come first, markets function at their best, and economies grow.</h3>
    <div class="flex-placeholder">
        <div class="pillar-block">
            <div class="nav-block-icon">
                <span class="icon pe-7s-ribbon"></span>
            </div>
            <div>
                <a href="#" class="h4">Programs and Professional Training</a>
            </div>
            <p>accelerate and cement industry standards.</p>
        </div>
        <div class="pillar-block">
            <div class="nav-block-icon">
                <span class="icon pe-7s-world"></span>
            </div>
            <div>
                <a href="#" class="h4">Programs and Professional Training</a>
            </div>
            <p>accelerate and cement industry standards.</p>
        </div>
        <div class="pillar-block">
            <div class="nav-block-icon">
                <span class="icon pe-7s-notebook"></span>
            </div>
            <div>
                <a href="#" class="h4">Programs and Professional Training</a>
            </div>
            <p>accelerate and cement industry standards.</p>
        </div>
        <div class="pillar-block">
            <div class="nav-block-icon">
                <span class="icon pe-7s-culture"></span>
            </div>
            <div>
                <a href="#" class="h4">Programs and Professional Training</a>
            </div>
            <p>accelerate and cement industry standards.</p>
        </div>
    </div>
</div>
        

Documentation

Problem Being Solved

We want to point out three or four things that are most important to us.

When To Use

This component only goes on the homepage.

When Not To use

Other components use portions of the css used in this component, so be very careful when making adjustments to "pillar-block" or "nav-block" classes.

Color Cards

Seeking career distinction but not sure which program is right for you?

Take the Career Quiz

5 Important Factors When Selecting a Wealth Advisor

Quality advisors should view technology as a friend, not a foe.

Read More

Augue neque gravida in fermentum et sollicitudin ac

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

Read More

Augue neque gravida in fermentum et sollicitudin ac

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

Read More

Augue neque gravida in fermentum et sollicitudin ac

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

Read More

Code

HTML

<div class="overlay-box flex-placeholder">
    <div class="card overlay">
        <h3 class="alt">Seeking career distinction but not sure which program is right for you?</h3>
        <a href="#" class="button secondary pull-bottom">Take the Career Quiz</a>
    </div>
    <div class="card overlay">
        <h3 class="alt">5 Important Factors When Selecting a Wealth Advisor</h3>
        <p>Quality advisors should view technology as a friend, not a foe.</p>
        <a href="#" class="button secondary pull-bottom">Read More</a>
    </div>
    <div class="card overlay">
        <h3 class="alt">Augue neque gravida in fermentum et sollicitudin ac</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="button secondary pull-bottom">Read More</a>
    </div>
    <div class="card overlay">
        <h3 class="alt">Augue neque gravida in fermentum et sollicitudin ac</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="button secondary pull-bottom">Read More</a>
    </div>
    <div class="card overlay">
        <h3 class="alt">Augue neque gravida in fermentum et sollicitudin ac</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="button secondary pull-bottom">Read More</a>
    </div>
</div>
        

Documentation

Problem Being Solved

When To Use

When Not To use

Formatting