Go to rebrand

Cards

These are the standard cards used in the site, we have two variations right now. One column cards and two columns cards or also called "Horizontal cards"

Implementation

Make sure to add ca_styleguide_cards.css to implement this cards on the site

One column cards

It's the simplest card we have on the site, it's made by an main image and a short text.

Implementation example

Notice the class card-wrapper, it only exists to adapt the actual ca-card to the grid, so you'll need to wrap the card in order to adapt it horizontally in your grid, card-wrapper assigns a padding and the width percentage of the card inside the grid. Below an example of the code for card-wrapper

CSS

.card-wrapper { width: 50%; padding: 15px; @include media-min("sm") { width: 33%; } @include media-min("lg") { width: 25%; } }

HTML

<div class="card-wrapper"> <a href="#Card1" class="ca-card"> <div class="ca-card__img-wp"> <img alt="Card 1" src="/static/img/Spotted-Dog-Food-Background_homepage.jpg"> </div> <div class="ca-card__txt"> <span class="ca-a-md ca-a-blk">Medium black uppercase link</span> </div> </a> </div>

RESULT

Fixed size

The cards is taking the height of the container (height: 100%) for a better adaptation to flexbox layouts, if you need a fixed size, you need to add a ca-card--fx-size class to the card.

Medium size image

You can add a ca-card__img-wp--md class to the image wrapper (ca-card__img-wp) to make the image a little bigger.

Horizontal Cards

Works in exactly the same way as the one column card, the only difference here is that the wrapper of the card has a wider percentage, that's it, that's why it looks wider, so we create a horizontal-card-wrapper class with twice the width as the one column card.

Implementation example

CSS

.horizontal-card-wrapper { width: 100%; padding: 15px; @include media-min("sm") { width: 66%; } @include media-min("lg") { width: 50%; } }

HTML

<div class="horizontal-card-wrapper"> <a href="#Card1" class="ca-card"> <div class="ca-card__img-wp"> <img alt="Card 1" src="/static/img/Spotted-Dog-Food-Background_homepage.jpg"> </div> <div class="ca-card__txt"> <span class="ca-a-md ca-a-blk">Medium black uppercase link</span> </div> </a> </div>

RESULT

Rounded borders

Add the modifier ca-card--rounded to the ca-card element to round the borders of the boxes.

Grid example



Smaller padding

Add the modifier ca-card__txt--sm-pad to the ca-card__txt element to have a smaller padding on the sides. This is handy when the card is going to be used on really small sizes.

Grid example



Expandable Card

You can use the following snippet to create a expandable card. The card is showing a plus icon by default, and it turns into a minus if you add a ca-card--opened class to the card. The functionality here is just for testing purposes and it's not included as part of the styleguide.

<a href="#" class="ca-card ca-card--rounded"> <div class="ca-card__img-wp ca-card__img-wp--md"> <img alt="[Image alt]" src="[image URL]"> </div> <div class="ca-card__txt"> <div class="ca-card__cta"> <div class="ca-h4 ca-card__ttl"><strong>Title</strong></div> <span class="ca-txt-bd-2 ca-txt--clr-gray">Text description.</span> <div class="ca-card__cta-icn ca-card__cta-icn--exp"></div> </div> </div> </a>

Icon card

The little square icon box can be used with or without an icon (for doing so, having the span alone included in the card is enough), the content will be always vertically centered. You just need to use the following snippet:

<a href="#" class="ca-card ca-card--rounded ca-card--sqr ca-a-lg ca-a-blk"> <svg>..</svg> <span>Reverse Mortgage Lenders</span> </a>