Business Loans Accounts Style 02 Car Loans Checking Credit Cards Digital Banking Accounts Style 01 Home Equity Loans Insurance Investing Membership Mortgage Personal Loans RV, Boat, Motorcycle Loans Savings

Cards

Cards

.m-card

Overview

Description

Used to house content like articles or product previews. Useful in a grid layouts to show large amounts of content in an organized way.

Best Practices

  • Descriptions/Body copy should be about 130 characters.
  • Try to make Descriptions/Body copy no more than 3 lines.
  • When grouped with other panels, try and maintain consistent content structure—same amount of text, image styles, icon styles, etc.

Schema

Name Description Type Default Value Option(s)
attributes
 A Drupal-style attributes object with extra attributes to append to this component. object - any
card.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - any
card.heading
 The heading of the card string - any
card.heading.level
 The heading level of the card heading string h3 h1 h2 h3 h4 h5
card.heading.modifier_classes
 Specifies modifier classes for the heading. All class names should follow the ABEM methodology. string m-card__heading any
card.summary
 Summary text. string - any

Article Card

Article Card

.m-card--article

Description

Used to preview article or event content. Has space for an optional image.

Best Practices

  • When using multiple cards in a row, cards should be equal height.

Colors Used

Swatch Name Hex Variable Usage
Gray #666666 $color--gray Eyebrow text and icon color.
Link Color #007dba $link__color Heading color.

Example

Feature Card

Feature Card

.m-card--feature

Description

Use to describe product benefits.

Best Practices

  • Should use at least 4 at a time.
  • Headlines should be only one line and paragraph text should be approximately the same length.
  • Font Awesome Lite icons should be used for iconography.

Colors Used

Swatch Name Hex Variable Usage
Gray #666666 $color--gray Heading color.
Text Color #2a2a2a $text__color Text and icon color.

Example

Car Loans

Our affordable car loans offer you the same low rate whether your car is new or used. Rates as low as 2.59% APR2.

Product Card

Product Card

.m-card--product

Description

Used to highlight product content.

Best Practices

  • Should include related color iconography.
  • When using multiple cards in a row, links in the card footer should align.
  • When using multiple cards in a row, cards should be equal height.

Colors Used

Swatch Name Hex Variable Usage
Gray #666666 $color--gray Heading color.
Text Color #2a2a2a $text__color Text and icon color.
Link Color #007dba $link__color Heading color.
Green #579904 $color--green Border top color.

Example

Car Loans

Our affordable car loans offer you the same low rate whether your car is new or used. Rates as low as 2.59% APR2.

Resource Card

Resource Card

.m-card--resource

Best Practices

  • When using multiple cards in a row, arrow buttons in the card footer should align.

Colors Used

Swatch Name Hex Variable Usage
Text Color #2a2a2a $text__color Text and icon color.
Link Color #007dba $link__color Heading color.

Example

Car Loans

Our affordable car loans offer you the same low rate whether your car is new or used. Rates as low as 2.59% APR2.

Card Testimonial