Javascript is not enabled.

Javascript must be enabled to use this site. Please enable Javascript in your browser and try again.

Design System - IN BETA

Getting Started            Components            Presets             Templates

Cards & Tiles

For custom arrangements of content, you can combine containers, text, and image components in creative ways. However, for other manually curated dynamic content, you may need to use Featured Tile or Featured List instead, so that the data automatically comes from the Content Fragment of an existing article or member benefit.


1. Large Featured Img with List of Text

This layout is similar to the Featured Pack on the homepage. Also see Hero Layouts for similar displays.

Placeholder Image 1140x655

H2 Headline Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


H4 Headline Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.


H4 Headline Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.


H4 Headline Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.


H4 Headline Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.


1A. Maybe you only have one piece of content to show. Also see Hero Layouts for similar displays.

Placeholder Image 1140x655

Lorem Ipsum Dolar Sit Amet

Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Oct 1, 12:00pm  |  In-Person


1B. Maybe you want the text on the left and the image on the right instead.

H2 Heading. Lorem ipsum dolor sit amet, consectetur.

Paragraph medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Oct 1, 12:00pm  |  In-Person

Placeholder Image 1140x655

2. Static Cards - Borderless, 3-Pack

These are basic containers, each around 4/12 columns wide, with an image and text component inside them. Images in this example follow the editorial standard of 1140x655 aspect ratio, (not quite 16:9, but almost.) The parent container that groups them together has a fixed max width at ~1200px on desktop.

This is an H2 Title for the Section of Cards Below

Placeholder Image 1140x655

Eyebrow Text

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Oct 10, 12:00pm  |  Online

Placeholder Image 1140x655

Eyebrow Text

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Oct 1, 12:00pm  |  In-Person

Placeholder Image 1140x655

Eyebrow Text

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Oct 10, 12:00pm  |  Online


2A. This creative variant of the tiles uses a background color. You can add/remove text components.

This is an H2 Title for the Section of Cards Below

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.


2B. If you have different lengths of copy, but want the height of the cards to remain the same, and the link to be in the same bottom spot, then add a container around the title/description and give it a min-height in the properties. In this example, the container directly around the title/description has 200px min-height.

This is an H2 Title for the Section of Cards Below

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. 


3. Static Cards - Borderless, 4-Pack

Same as above, just 4 of them taking up 3/12 columns each.

This is an H2 Title for the Section of Cards Below

Placeholder Image 1140x655

Eyebrow Text

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Oct 10, 12:00pm  |  Online

Placeholder Image 1140x655

Eyebrow Text

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Oct 1, 12:00pm  |  In-Person

Placeholder Image 1140x655

Eyebrow Text

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Oct 10, 12:00pm  |  Online

Placeholder Image 1140x655

Eyebrow Text

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Oct 1, 12:00pm  |  In-Person


3A. If you have different lengths of copy, but want the height of the cards to remain the same, and the link to be in the same bottom spot, then add a container around the title/description and give it a min-height in the properties. In this example, the container directly around the title/description has 200px min-height.

This is an H2 Title for the Section of Cards Below

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio. Lorem ipsum dolor sit amet, consect etuer adipiscing.


3B. For rounded borders, just add Rounded Border style to the entire tile's container to give the whole card rounded corners. You don't need to upload separate rounded images. For the sake of typography legibility standards, do not center align text.

This is an H2 Title for the Section of Cards Below

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio. Lorem ipsum dolor sit amet, consect etuer adipiscing.


4. Static Cards - Borderless, 2-Pack

Same as above, just 2 of them taking up 6/12 columns each.

Placeholder Image 1140x655

Eyebrow Text

H3 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Oct 10, 12:00pm  |  Online

Placeholder Image 1140x655

Eyebrow Text

H3 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Oct 1, 12:00pm  |  In-Person


5. Static Cards - With Border, 4-Pack

These are similar to the borderless 4-pack, it just has borders enabled for each container. You can add/remove as many elements inside them as necessary. This example shows some text components, a separator, and a button– perfect for a set of pricing grids.

$20

Lorem ipsum dolor sit amet, consectetur.

  • Lorem ipsum dolor sit amet, consectetur
  • Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

$20

Lorem ipsum dolor sit amet, consectetur.

  • Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

$20

Lorem ipsum dolor sit amet, consectetur.

  • Lorem ipsum dolor sit amet, consectetur
  • Lorem ipsum dolor sit amet, consectetur
  • Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

$20

Lorem ipsum dolor sit amet, consectetur.

  • Lorem ipsum dolor sit amet, consectetur
  • Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt


This is an H2 Title for the Section of Cards Below

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio.

Placeholder Image 1140x655

H4 Headine Title

Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Donec odio. Lorem ipsum dolor sit amet, consect etuer adipiscing.


6. Static Cards - With Border, 3-Pack

These are similar to the 4-pack cards with a border. Explore with nesting more containers within containers.

Member Benefits Logo

Free Assessment

For AARP Members and Non-Members
No subscription necessary


Get an instant estimate to see if you're eligible for dozens of national and state repayment and forgiveness programs.

Member Benefits Logo

Savi Essential

$50/yr subscription for AARP Members
$75/yr subscription for Nonmembers


Includes access to the Student Loan Repayment Tool, student loan filing, application status updates, chat, and customer support.

Member Benefits Logo

Savi Pro

$150/yr subscription for AARP Members
$175/yr subscription for Nonmembers


Includes all Savi Essential features plus comprehensive hands-on support, and 1-on-1 phone calls with Savi student loan experts

BEST VALUE

First year for

$20

(Annual)


Save 25% your first year with Automatic Renewal. (View Terms & Conditions)

One payment of

$43

(3 years)


Save 10% on the annual rate for 3 years of membership.

One payment of

$63

(5 years)


Save 21% on the annual rate for 5 years of membership.