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.

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: Contributing institution card

Code

HTML

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

Documentation

Problem Being Solved

Logos and links needs to be displayed in a way that can be easily scanned.

When To Use

It can be used when many logos need to be displayed, and no other component will work.

When Not To Use

It should not be used for image display.

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

There is a CTA that requires a Marketo form to be completed by the user.

When To Use

It should be used for Marketo forms that allow a user to sign up for a newsletter. It generally should be placed last on the page.

When Not To Use

It should not be used for anything except a Marketo form.

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

Users need to see that their posts are being reviewed for publication.

When To Use

Users need to see that their posts are being reviewed for publication.

When Not To Use

It should not be used anywhere else.