Back to blue

Cards

How to use

Make sure to include the CSS into your page:

<link rel="stylesheet" media="all" href="/static/css/ca_sg_cards.css" />

Standard card

The cards will adapt to its container width and height.

<a href="#" class="ca-card"> <div class="ca-card__img-wrp"> <img alt="Alternate text" class="ca-card__img" src="image SRC"> <span class="ca-card__txt ca-h4">Your text goes here</span> </div> </a>

Card with a button

You can add a CTA link to the card but notice that the entire card is an anchor tag, so the button inside it is a span styled as a link.

<a href="#" class="ca-card"> <div class="ca-card__img-wrp"> <img alt="Alternate text" class="ca-card__img" src="image SRC"> <span class="ca-card__txt ca-h4">Your text goes here</span> <span class="ca-a ca-a--lg ca-a--big-icon ca-a--lght ca-card__cta">Your CTA text <svg /></span> </div> </a>

Card with an icon

You can add an icon to the card inside a container with the ca-card__ic class.

<a href="#" class="ca-card"> <div class="ca-card__img-wrp"> <img alt="Alternate text" class="ca-card__img" src="image SRC"> <div class="ca-card__ic"><svg /></div> <span class="ca-card__txt ca-h4">Your text goes here</span> </div> </a>

Topic Card with a button

You can also add a title to the card using the ca-card__ttl class:

<a href="#" class="ca-card"> <div class="ca-card__img-wrp"> <img alt="Alternate text" class="ca-card__img" src="image SRC"> <span class="ca-card__ttl ca-h2">Your title</span> <span class="ca-card__txt">Your text over here</span> <span class="ca-a ca-a--lg ca-a--big-icon ca-a--lght ca-card__cta">Your CTA text <svg /></span> </div> </a>

CTA Card with a button

You can make the title bigger by adding the ca-card__ttl--lg modifier class to the title and the ca-card--md modifier to the card to increase the min-height of the banner:

Card 1 Interested in a credit repair company? CTA link
<a href="#" class="ca-card ca-card--md"> <div class="ca-card__img-wrp"> <img alt="Alternate text" class="ca-card__img" src="image SRC"> <span class="ca-card__ttl ca-card__ttl--lg ca-h2">Your title</span> <span class="ca-a ca-a--lg ca-a--big-icon ca-a--lght ca-card__cta">Your CTA text <svg /></span> </div> </a>

Topic card with a toggle

The card with a toggle button has been created to work alongside with the expander-collapser script. Instead of an anchor tag, this card uses a button to trigger the functionality.

Make sure to include the expander-collapser CSS & JS files:

<script src="{{ static("js/ca_styleguide_expander_collapser.js") }}"></script> <link rel="stylesheet" media="all" href="/static/css/ca_sg_expander_collapser.css" />

Also make sure to include the data-expand-collapse with "keepText" as True and the target element.

More content over here

<button class="ca-btn--link ca-card" data-expand-collapse='{"target": ["#expandable-content"], "keepText": true}'> <div class="ca-card__img-wrp"> <img alt="Alternate text" class="ca-card__img" src="image SRC"> <span class="ca-card__ttl ca-h2">Title</span> <span class="ca-card__txt">Any text you want.</span> <span class="ca-a ca-a--lg ca-a--big-icon ca-a--lght ca-card__cta ca-card__cta--exp">see more {% include "base/common/icons/rebrand/arrow-down.html" %}</span> <span class="ca-a ca-a--lg ca-a--big-icon ca-a--lght ca-card__cta ca-card__cta--clps">see less {% include "base/common/icons/rebrand/arrow-up.html" %}</span> </div> </button> <div id="expandable-content" class="js-collapsed"><p>More content over here</p></div>

Vertical card with an icon

To create a vertical variation of the card you have to add the ca-card--vert modifier class to the card.

<a href="#" class="ca-card ca-card--vert"> <div class="ca-card__img-wrp"> <img alt="Alternate text" class="ca-card__img" src="image SRC"> <div class="ca-card__ic"><svg /></div> <span class="ca-card__ttl ca-h2">Your title</span> <span class="ca-card__txt">Your text over here</span> <span class="ca-card__btn ca-btn ca-btn--black ca-btn--wic">Your CTA text {% include "base/common/icons/rebrand/arrow.html" %}</span> </div> </a>

Simple card with description

You can create a simple card with a title and a description at the bottom by adding a ca-card--desc modifier to the card.

Notice that the img-wrp element now only contains the image and we have new markup elements for the title and description.

You can also set the card image as full width (from the left screen edge to the right screen edge) in mobile by adding the ca-card--mb-full-wdh modifier class to the card element

<a href="#" class="ca-card ca-card--desc ca-card--mb-full-wdh"> <div class="ca-card__img-wrp"> <img alt="Alternate text" class="ca-card__img" src="image SRC"> </div> <div class="ca-card__desc-ttl ca-txt-bd-1">Your title</div> <p class="ca-card__desc-txt">Your text over here</p> </a>

Small variation

You can have a small variation for mobile devices by adding the ca-card--mb-sm modifier to the card.

<a href="#" class="ca-card ca-card--desc ca-card--mb-sm"> <div class="ca-card__img-wrp"> <img alt="Alternate text" class="ca-card__img" src="image SRC"> </div> <div class="ca-card__desc-ttl ca-txt-bd-1">Your title</div> <p class="ca-card__desc-txt">Your text over here</p> </a>

Tiny variation

You can create a tiny variation by adding the ca-card--tiny modifier to the card.

<a href="#" class="ca-card ca-card--desc ca-card--tiny"> <div class="ca-card__img-wrp"> <img alt="Alternate text" class="ca-card__img" src="image SRC"> </div> <div class="ca-card__desc-ttl">Your title</div> </a>