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.

Branded Image Cards — Links

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 internal navigation links that help them choose the next step in their journey. Links are given context and importance by using images and descriptive text.

When To Use

It can be used for primary next steps in the user journey.

When Not To use

It should not be used for links that are not a main part of the user journey. Generally, it should only be used once per page, although there can be exceptions.

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.