We’re using cookies, but you can turn them off in Privacy Settings. Otherwise, you are agreeing to our use of cookies. Accepting cookies does not mean that we are collecting personal data. Learn more in our Privacy Policy .

Cards

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.

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>
            

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.

Contributing institution Card

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>
            

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 three column grid.

Newsletter Submission card

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 required" for="unique-email-input-id">Email Address</label>
                <div class="form-group">
                    <input id="unique-email-input-id" type="text" class="form-control" aria-required="true" required="required" />
                    <button class="secondary">Subscribe</button>
                </div>
            </form>
        </div>
    </div>
</section>
        

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 component library. We will need to keep a close eye on formatting and styling.

Practical Skills card

LEVEL I 1

Financial Modeling

Build a three-statement financial model showcasing an understanding of business issues, design best practices, and technical skills.

View Details
LEVEL II 2

Analyst Skills

Analyze best-in-class practices of successful equity research analysts and apply them to your own practice.

View Details
LEVEL I 1

Python Programming Fundamentals

Coming Soon!

Develop fluency in writing Python code for finance-based data science projects using Jupyter Notebooks.

LEVEL II 2

Python, Data Science & AI

Coming Soon!

Develop the skills to execute financial data science workflows using Python by applying advanced machine learning techniques from forecasting EPS changes to sentiment analysis.

HTML

<section class="skill-grid">
    <div class="skill-card blue">
        <header>LEVEL I <span>1</span></header>
        <h4>Financial Modeling</h4>
        <p>
            Build a three-statement financial model showcasing an understanding of
            business issues, design best practices, and technical skills.
        </p>
        <a href="#" class="btn">View Details</a>
    </div>

    <!-- Card 2 -->
    <div class="skill-card green">
        <header>LEVEL II <span>2</span></header>
        <h4>Analyst Skills</h4>
        <p>
            Analyze best-in-class practices of successful equity research analysts
            and apply them to your own practice.
        </p>
        <a href="#" class="btn">View Details</a>
    </div>
</section>

        

Problem Being Solved

New look of the Refresher page in the Practical Skills Module.

When to Use

It should be used for Practical Skills Modules section on the Refresher page

When Not to Use

It should not be used for anything except a skill.

Formatting