Brand Cards

Flexible Brand Card(s)

Brand Cards

Vertical Card(s)

Highlight

TYPE

Brand Card Title

Short description text should go here, but try to be concise.

Note

Completed

Course

Course Name

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

USD 986

New

Article

Capitalism for Everyone

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

19 Mar 2022

TYPE

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Note

Vertical Card(s) — Dynamic Width

Highlight

TYPE

Brand Card Title

Short description text should go here, but try to be concise.

Note

Level

Course

Course Name

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

USD 986

Article

Capitalism for Everyone

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

19 Mar 2022

TYPE

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Note

Horizontal Card(s)

TYPE

Card Title

Short description text should go here, but try to be concise.

Note

Article

Geo-Economics: The Interplay between Geopolitics, Economics, and Investments

Today’s investors need to understand geopolitical trends as a main driving force of markets. This book provides just that: an understanding of the interplay between geopolitics and economics, and of the impact of that dynamic on financial markets.

28 Apr 2021

Highlight

TYPE

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Note

TYPE

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Note

Horizontal Card 50/50

TYPE

Card Title

Short description text should go here, but try to be concise.

Note

Group of Four (horizotal-based) Cards

TYPE

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Note

TYPE

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Note

TYPE

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Note

TYPE

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Note

HTML

<!-- Vertical Cards -->
<section class="full-width">
    <div class="brand-cards vertical">
        <div class="brand-card vertical">
    <!-- Optional Highlight -->
            <div class="brand-card-highlight">
                <p class="brand-card-highlight-text">Highlight</p>
            </div>
    <!-- Optional Highlight -->
            <picture class="brand-card-img-container">
                <img src="" alt="Place short descriptive text here" />
            </picture>
            <div class="brand-card-content">
                <p class="brand-card-content-type">TYPE</p>
                <h3 class="brand-card-content-title h4">Brand Card Title</h3>
                <p class="brand-card-content-description">Short description text should go here, but try to be concise.</p>
                <p class="brand-card-content-note">Note</p>
            </div>
        </div>    
    </div>
</section>

<!-- Vertical Cards - Dynamic Width -->
<div class="brand-cards vertical dynamic">
    <div class="brand-card vertical">
        <div class="brand-card-highlight">
            <p class="brand-card-highlight-text">Highlight</p>
        </div>
        <picture class="brand-card-img-container">
            <img src="/Content/src/img/altitude-clouds-cold-417173.jpg" alt="mountain" />
        </picture>
        <div class="brand-card-content">
            <p class="brand-card-content-type">TYPE</p>
            <h3 class="brand-card-content-title h4">Brand Card Title</h3>
            <p class="brand-card-content-contentdescription">Short description text should go here, but try to be concise.</p>
            <p class="brand-card-content-note">Note</p>
        </div>
    </div>
    <div class="brand-card vertical">
        <div class="brand-card-highlight">
            <p class="brand-card-highlight-text">Level</p>
        </div>
        <picture class="brand-card-img-container">
            <img src="/Content/src/img/altitude-clouds-cold-417173.jpg" alt="mountain" />
        </picture>
        <div class="brand-card-content">
            <p class="brand-card-content-type">Course</p>
            <h3 class="brand-card-content-title h4">Course Name</h3>
            <p class="brand-card-content-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
            <p class="brand-card-content-note">USD 986</p>
        </div>
    </div>
    <div class="brand-card vertical">                    
        <picture class="brand-card-img-container">
            <img src="/Content/src/img/altitude-clouds-cold-417173.jpg" alt="mountain" />
        </picture>
        <div class="brand-card-content">
            <p class="brand-card-content-type">Article</p>
            <h3 class="brand-card-content-title h4">Capitalism for Everyone</h3>
            <p class="brand-card-content-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
            <p class="brand-card-content-note">19 Mar 2022</p>
        </div>
    </div>
    <div class="brand-card vertical">
        <picture class="brand-card-img-container">
            <img src="/Content/src/img/altitude-clouds-cold-417173.jpg" alt="mountain" />
        </picture>
        <div class="brand-card-content">
            <p class="brand-card-content-type">TYPE</p>
            <h3 class="brand-card-content-title h4">Lorem ipsum dolor</h3>
            <p class="brand-card-content-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
            <p class="brand-card-content-note">Note</p>
        </div>
    </div>
</div>

<!-- Horizontal Cards -->
<section class="full-width">
    <div class="brand-cards horizontal">
        <div class="brand-card horizontal">
     <!-- Optional Highlight -->
            <div class="brand-card-highlight">
                <p class="brand-card-highlight-text">Highlight</p>
            </div>
     <!-- Optional Highlight -->
            <picture class="brand-card-img-container">
                <img src="" alt="Place short descriptive text here" />
            </picture>
            <div class="brand-card-content">
                <p class="brand-card-content-type">TYPE</p>
                <h3 class="brand-card-content-title h4">Brand Card Title</h3>
                <p class="brand-card-content-description">Short description text should go here, but try to be concise.</p>
                <p class="brand-card-content-note">Note</p>
            </div>
        </div>    
    </div>
</section>

<!-- Group of Four Horizontal Cards -->
<section class="full-width">
    <div class="brand-cards horizontal group-of-four">
        <div class="brand-card horizontal">
            <picture class="brand-card-img-container">
                <img src="" alt="Place short descriptive text here" />
            </picture>
            <div class="brand-card-content">
                <p class="brand-card-content-type">TYPE</p>
                <h3 class="brand-card-content-title h4">Brand Card Title</h3>
                <p class="brand-card-content-description">Short description text should go here, but try to be concise.</p>
                <p class="brand-card-content-note">Note</p>
            </div>
        </div> 
     <!-- Place three more brand-card-horizontal cards here --> 
    </div>
</section>

Problem Being Solved

We need a way to highlight content to users using images and descriptive text.

When to Use

When we need to display more additional information such as content type, dates, pricing, or links to more infomation.

When Not to Use

Do not use if a more suitable pattern can be used.

Formatting

These should always be placed in a section element with the class “full-width” — the exception being if they’re used with the side-by-side layout.
If your title is longer than two lines, we are going to hide the rest with CSS and allude to a longer title with an ellipsis.
If your description is longer than three lines, we are going to hide the rest with CSS and allude to a longer description with an ellipsis.
The highlight tag is an optional element (this is not a linked element).
- The default background color of the highlight is our p_coolgray10.
- An additonal class of "p_green" or "p_blue" can be added to the highlight to change that background color of the highlight. This would be used for a tag that might be something along the lines of:
  Completed
  or
  New
- Please speak to your designer for guidance on when to use these.
The image and the title can be linked
- To link the image, wrap your anchor tag around the element with the class "brand-card-img-container."
- To link your title, place your anchor tag inside the h3 element that has the class "brand-card-content-title h4."

Vertical Card(s)

Inside the full-width section, use the container div with class “brand-cards vertical.”
Make sure the individual cards inside the container have the class “brand-card vertical.”

Horizontal Card(s)

Inside the full-width section, use the container div with class “brand-cards horizontal.”
Make sure the individual cards inside the container have the class “brand-card horizontal.”
On mobile, the short discription text will be hidden — this text will be visible again on tablet breakpoint and up.

Group of Four (horizontal-based) Card(s)

Inside the full-width section, use the container div with class “brand-cards horizontal group-of-four.”
Make sure the individual cards inside the container have the class “brand-card horizontal.”
In order to achieve the intended layout at our desktop breakpoint (1200px), there should only be four brand cards in this container — otherwise, the cards will match the layout of the horizontal cards layout.

Featured Card

Example

Featured Card — Basic

Highlight

TYPE

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

USD XXX

View Details

Featured Card — Edge-to-Edge|Blue Background

Highlight

TYPE

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

USD XXX

View Details

HTML

<section class="full-width">
    <div class="featured-container">
        <div class="feature-card">
            <div class="brand-card-highlight" >
                <p class="brand-card-highlight-text">Highlight </p>
            </div>
            <picture class="feature-card-img-container">
                <img src="" alt="Place short descriptive text here" />
            </picture>
            <div class="feature-card-content">
                <p class="feature-card-content-type">TYPE</p>
                <h3 class="feature-card-content-title">Lorem ipsum dolor</h3>
                <p class="feature-card-content-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
                <p class="feature-card-content-price">USD XXX</p>
                <div class="feature-card-content-cta">
                    <p><a href="#">Log in for member price </a> </p>
                    <p><a href="#" class="button">View Details </a> </p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-placeholder grid-container edge-to-edge has-background store">
    <div class="feature-container">
        <div class="feature-card">
            <div class="brand-card-highlight">
                <p class="brand-card-highlight-text">Highlight</p>
            </div>
            <picture class="feature-card-img-container">
                <img src="" alt="Place short descriptive text here" />
            </picture>
            <div class="feature-card-content">
                <p class="feature-card-content-type">TYPE</p>
                <h3 class="feature-card-content-title">Lorem ipsum dolor</h3>
                <p class="feature-card-content-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
                <p class="feature-card-content-price">USD XXX</p>
                <div class="feature-card-content-cta">
                    <p><a href="#">Log in for member price </a> </p>

<!-- Default to this link unless you need the form -->
                    <p><a href="#" class="button">View Details </a> </p>
<!-- Default to this link unless you need the form -->

<!-- Optional form setup for add to cart example -->
                    <form method="POST">
                        <button>Add <span class="screen-reader-only">Title of your item</span> to Cart</button>
                    </form>
<!-- Optional form setup for add to cart example -->
                </div>
            </div>
        </div>
    </div>
</section>

Documentation

Problem Being Solved

We need a way to highlight important content to users using images, type, title, text, and a way to navigate to that content.

When to Use

Either on a landing page or a product detail page. This card will normally be at the top of the page.

When Not to Use

Do not use more than one of these cards per page — If you need multiple cards with branding, look to use our brand card(s) patterns that have both horizontal and vertical layouts.

Formatting

This card should go at the top of your page and only be used once per page.
The container for this card will be a div with the class “featured-container.”
The options will be in the sample code section, but we’re using a link styled as a button for navigating to another page.
If you’re action is submitting a form (Add to Cart example), please use the form example seen in the code section for how to implement.
If your title is longer than two lines, we are going to hide the rest with CSS and allude to a longer title with an ellipsis.
If your description is longer than three lines, we are going to hide the rest with CSS and allude to a longer description with an ellipsis.
The highlight tag is an optional element (this is not a linked element).
The image and the title can be linked
- To link the image, wrap your anchor tag around the element with the class "feature-card-img-container."
- To link your title, place your anchor tag inside the h3 element that has the class "feature-card-content-title."

Featured Card — Basic

This card should be inside a section element with the class “full-width.”
This card’s background color matches the gray site background.

Featured Card — Edge-to-Edge|Blue Background

This card should be inside a section element with the classes “section-placeholder grid-container edge-to-edge has-background."
This card will span edge-to-edge for all breakpoints.
This card’s background color will be our secondary background blue.

Branded Image Links

Example: Two Cards

Lorem ipsum dolor sit amet, consectetuer adipiscin

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Lorem ipsum dolor sit ame

Lorem ipsum dolor sit amet, consectetuer adipiscin

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Lorem ipsum dolor sit ame

Example: Three Cards

Lorem ipsum dolor sit amet, consectetuer adipiscin

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Lorem ipsum dolor sit ame

Lorem ipsum dolor sit amet, consectetuer adipiscin

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Lorem ipsum dolor sit ame

Lorem ipsum dolor sit amet, consectetuer adipiscin

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Lorem ipsum dolor sit ame

HTML

<section class="grid-container">
    <div class="branded-cards full-width">
        <div class="branded-card">
            <picture class="branded-card-image-container">
                <img src="/Content/src/img/altitude-clouds-cold-417173.jpg" alt="full sized" />
            </picture>
            <h3 class="branded-card-title h4">Lorem ipsum dolor sit amet, consectetuer adipiscin</h3>
            <p class="branded-card-short-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
            <p class="branded-card-general-link">
                <a href="#" class="int-nav">Lorem ipsum dolor sit ame</a>
            </p>
        </div>
        <div class="branded-card">
            <picture class="branded-card-image-container">
                <img src="/Content/src/img/clouds-daylight-fjord-135157.jpg" alt="full sized" />
            </picture>
            <h3 class="branded-card-title h4">Lorem ipsum dolor sit amet, consectetuer adipiscin</h3>
            <p class="branded-card-short-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
            <p class="branded-card-general-link">
                <a href="#" class="int-nav">Lorem ipsum dolor sit ame</a>
            </p>
        </div>
    </div>
</section>

Problem Being Solved

Users need internal navigation links that help them choose the next step in their journey. Links are given context and importance by using images and descriptive text.

When to Use

It can be used for primary next steps in the user journey.

When Not to Use

It should not be used for links that are not a main part of the user journey. Generally, it should only be used once per page, although there can be exceptions.

Formatting

Place the branded-cards inside section that has the class name "grid-container"
Use only square ratio images in branded image link cards.
The layout at desktop sizes vary only when there is three branded cards inside the "branded-cards" container div.

Branded Image Links — Alternative

Lorem ipsum dolor sit amet, consectetuer adipiscin

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Lorem ipsum dolor sit amet, consectetuer adipiscin

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Lorem ipsum dolor sit amet, consectetuer adipiscin

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

<section class="grid-container">
    <div class="branded-cards alt full-width">
        <div class="branded-card new-tag">
            <a href="#">
                <picture class="branded-card-image-container">
                    <img src="/Content/src/img/altitude-clouds-cold-417173.jpg" alt="full sized" />
                </picture>
                <h3 class="branded-card-title h4">Lorem ipsum dolor sit amet, consectetuer adipiscin</h3>
            </a>
            <p class="branded-card-short-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
        <div class="branded-card benefit-tag">
            <a href="#">
                <picture class="branded-card-image-container">
                    <img src="/Content/src/img/clouds-daylight-fjord-135157.jpg" alt="full sized" />
                </picture>
            </a>
            <a href="#">
                <h3 class="branded-card-title h4">Lorem ipsum dolor sit amet, consectetuer adipiscin</h3>
            </a>
            <p class="branded-card-short-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
        <div class="branded-card">
            <picture class="branded-card-image-container">
                <img src="/Content/src/img/clouds-daylight-fjord-135157.jpg" alt="full sized" />
            </picture>
            <h3 class="branded-card-title h4">Lorem ipsum dolor sit amet, consectetuer adipiscin</h3>
            <p class="branded-card-short-description">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                <ul class="branded-card-buttons">
                    <li><a href="#" class="button secondary">Podcast 1</a></li>
                    <li><a href="#" class="button secondary">Podcast 2</a></li>
                    <li><a href="#" class="button secondary">Stream</a></li>
                </ul>
            </p>
        </div>
    </div>
</section>

Problem Being Solved

Users need internal navigation links that help them choose the next step in their journey. Links are given context and importance by using images and descriptive text.

When to Use

Same as above, but if all items are equally weighted in importance.

Certificate

Certificate in ESG Investing

By earning the Certificate in ESG Investing, you will be well-positioned to meet the growing demand for ESG investing and succeed in the evolving investment landscape.

USD 795.00

Certificate

CIPM® Program

The Certificate in Investment Performance Measurement designation offers career distinction for all investment professionals charged with appraising and selecting portfolio managers, evaluating portfolio performance, and communicating with clients.

USD 675.00

Certificate

Data Science for Investment Professionals Certificate

Gain practical understanding of data science and machine learning applications in the investment process.

USD 1599.00

Member price: USD 1399.00

Certificate

Investment Foundations® Certificate

Learn the essentials of finance, ethics, and investment roles in the global investment industry.

USD 350.00

Certificate

Climate Risk, Valuation, and Investing Certificate - Feb 2024

Develop the competencies and skills needed to integrate climate-related investing principles into the investment process and expand your network within a community of professionals.

The first cohort starts in February 2024.

USD 1590.00

Member price: USD 1390.00

Online Course

Private Equity and Private Credit Investments

Gain valuable insights into the roles played by private markets and alternative investments in multi-asset portfolios.

USD 279.00

Member price: USD 249.00