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.

Branded Cards

Example: Two Cards

full sized

Lorem ipsum dolor sit amet, consectetuer adipiscin

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

full sized

Lorem ipsum dolor sit amet, consectetuer adipiscin

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

Example: Three Cards

full sized

Lorem ipsum dolor sit amet, consectetuer adipiscin

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

full sized

Lorem ipsum dolor sit amet, consectetuer adipiscin

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

full sized

Lorem ipsum dolor sit amet, consectetuer adipiscin

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

Example: Four or More Cards

full sized

Lorem ipsum dolor sit amet, consectetuer adipiscin

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

full sized

Lorem ipsum dolor sit amet, consectetuer adipiscin

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

full sized

Lorem ipsum dolor sit amet, consectetuer adipiscin

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

full sized

Lorem ipsum dolor sit amet, consectetuer adipiscin

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

full sized

Lorem ipsum dolor sit amet, consectetuer adipiscin

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

Code

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>
        

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-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.

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.