Cards

Example: Stand alone card

Welcome to registration! Once you complete the registration process, you will have 180 days to schedule and take your Investment Foundations exam. Your expiration date will be indicated on your Order Summary.

Code

HTML

<div class="card-standalone mob-card-standalone">
    <span>Welcome to registration! Once you complete the registration process, you will have 180 days to schedule and take your Investment Foundations exam. Your expiration date will be indicated on your Order Summary.</span>
</div>
                

Documentation

Problem Being Solved

The user needs to understand which content on the page is most important.

When To Use

This pattern is a general purpose card. It can be used to group content on a page to aid comprehension.

When Not To use

This should not be used if a more specific pattern would work.

Example: Branded Cards

Group of Cards

Example: Two Cards Only

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.

Example: Three Card Max

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.

Code

HTML

*****Group with only two branded cards*****
<section class="grid-container">
    <div class="branded-card-group full-width">
        <div class="branded-card">
            <picture class="branded-card-image-container">
                <img src="/Content/src/img/altitude-clouds-cold-417173.jpg" atl="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" atl="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>
*****Group with max 3 branded cards*****
<section class="grid-container">
    <div class="branded-card-group full-width">            
        <div class="branded-card">
            <picture class="branded-card-image-container">
                <img src="/Content/src/img/adventure-clouds-high-163550.jpg" atl="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/altitude-clouds-cold-417173.jpg" atl="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" atl="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>
        

Documentation

Problem Being Solved

Users need to view an important "next step" link.

When To Use

The branded image link should be used when there is a clear and high-value next step for the user to take in a well-defined journey. It should always be placed at the bottom of the page.

When Not To use

Branded image link should not be used if the next step is not well defined, or if there are more than 3 possible next steps.

Formatting

  • Place the branded-card-group inside section that has the class name "grid-container"
  • Use only square ratio images in branded image link cards.
  • The branded-card-group can take one to three branded-cards (no more than THREE cards should be placed in the group at this time).

Example: Contributing institution card

Code

HTML

<section class="grid grid-three">
    <div class="card-standalone ci-card">
        <div class="ci-image">
            <a href="#"><img src="/Content/img/examples/logo.png" /></a>
        </div>
        <div class="ci-name">
            <a href="#">Institute Name</a>
        </div>
    </div>
    ...
</section>
                

Documentation

Problem Being Solved

We need to display a long list of institutions with logos and links.

When To Use

ARX has many contributing institutions.

Formatting

Combine institutions in a 3 column grid.

Example: Newsletter Submission card

Code

HTML

<section>
    <div class="card-standalone newsletter-card">
        <h3 class="alt">Get featured posts delivered directly to your inbox</h3>
        <div class="embedded-form">
            <form>
                <label class="control-label" for="Text_Input" aria-required="true">Email Address</label>
                <div id="Text_Input" class="form-group">
                    <input type="text" class="form-control" aria_describedby="text-help-block" required/>
                    <button class="secondary">Subscribe</button>
                </div>
            </form>
        </div>
    </div>
</section>
                

Documentation

Problem Being Solved

We need a way to include Marketo newlsetter subscription forms.

When To Use

Generally in wide container wells.

Formatting

Note that Marketo forms will be embedded code and the HTML will not match what we have in the pattern library. We will need to keep a close eye on formatting and styling.

Example: Awaiting Publication

Submitted for Publication

These posts have been submitted and are being reviewed for publication. Learn more about the review process.

  • Overview of Hong Kong Financial Services Inductry
  • Ethics in Practice: Material and Nonpublic Info or Not?
  • Fixed Income Liquidity and ETFs in India

Code

HTML

<div class="card-standalone no-border">
    <h2 class="alt">Submitted for Publication</h2>
    <p>These posts have been submitted and are being reviewed for publication. <a href="#">Learn more about the review process.</a></p>
    <ul class="zero-left-margin list-unstyled">
        <li class="border green cfaicon-hourglass">Overview of Hong Kong Financial Services Inductry</li>
        <li class="border green cfaicon-hourglass">Ethics in Practice: Material and Nonpublic Info or Not?</li>
        <li class="border green cfaicon-hourglass">Fixed Income Liquidity and ETFs in India</li>
    </ul>
</div>
                

Documentation

Problem Being Solved

The user needs to see which of their papers are waiting for approval.

When To Use

This pattern uses a general purpose card, paired with usage of CFA brand icons.