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 image link card

Code

HTML

<div class="card-standalone branded-image-link media">
    <div class="media-left">
        <img src="/Content/img/examples/branded_image.jpg" />
    </div>
    <div class="media-body">
        <h4 class="alt"><a href="#">Exam Rule</a></h4>
        <p>Candidates must not continue to write or erase after the “Stop writing now” directive.</p>
    </div>
</div>
                

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

Use only square ratio images in branded image link cards.

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.