Tailor Element: Card

Use cards to organize related bits of information side-by-side.

A card is a Tailor element. If you’ve never used Tailor before, read the intro tutorial first.

Think of cards like you would physical notecards. Use them to organize similar information side-by-side so people can see the bigger picture of how content fits together.

Pro tip: A card is similar to a box. Not sure which one to use?
See the box versus card face-off »

How to add cards

  1. Drag the Card element onto the page or post you’re editing.
  2. Click on the gray stripe at the top of the card; a blue outline should appear around the entire card.
  3. Click Edit in the top right corner of the card.
  4. Type in a title.
  5. Horizontal alignment: In general, we recommend leaving it at the default, left.
  6. Choose an image or background color to display behind the title.
    • To choose an image, click the button labeled Select an image.
      • If the image is critical to understanding the card, fill out the alt text. However, keep in mind that images in cards may get cropped based on a user’s screen size. Consider using a Box or Content element for important images.
    • To choose a background color, select an option from the dropdown menu labeled Background Color. By default, the card’s background color is light gray.
  7. Click Apply.
  8. Click on the placeholder text inside the card element; a blue outline should appear around the text box.
  9. Click Edit in the top right corner of the placeholder text box.
  10. Add content using the visual editor.
  11. Click Apply.

Card examples

Background colors

By default, a card’s title overlays a light gray background. You can change this field of color to red, dark gray, turquoise or yellow.

We recommend sticking with only one background color for all of the cards on your site. Vary colors only if the variation has meaning (eg, yellow could indicate alerts and dark gray could show reminders), and use these colors consistently sitewide.

Red background

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target

Turquoise

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target

Dark gray

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target

Yellow

Innovation is often the product of constraint. – Todd Waterbury, Chief Creative Officer at Target

 

The cards below show the default background color, a light gray, to display related bits of information as a set.

Medical education curriculum

First year

Third year

Second year

  • Coursework, focusing on effects of disease
  • Expanded clinical experience

Fourth year

  • 32 weeks elective
  • 4-week Capstone course

 

Images as background

You can replace the background color with an image that bleeds off the edges of the title section. The image size scales to fit the card, so remember to check your work on a desktop computer and a mobile device.

Image background

Uh oh! Everyone’s head gets chopped off on desktop view. 

That’s because images are automatically scaled to fit the card width and may crop off significant portions from the top and bottom. As a card is scaled down – because it’s sharing a row with other elements or being viewed on a smaller screen – more of the image will show.

Cards look best when placed in a row of two or three, depending on how much text is added.

If you’re trying to draw attention to something and want it to span the entire page width, try a billboard or callout instead.

Image background

Adding another element to the card’s row adjusts the proportions of the image slightly, letting more smiling faces show in desktop view. However, on mobile devices, the image stretches again, chopping off heads. 

If you need the entire image to show, try using the box element instead.

This is a box, not a card

Yay! You can see everyone’s face. The box element always shows the entire image, scaled down to fit the width.

Learn about boxes »

Tips for using images as background

Consider how a background image scales and how it will interact with the card title, which overlays the background image. The title should be legible, including for visitors with visual impairments like color blindness.

Avoid prominent faces, as well as busy patterns and light colors, which may make the card title difficult to read.

Below are a few approaches to try.

Make it abstract

Images that are abstract or don’t have a central focus prevent bad crops, but they could make the title illegible, too. 

Go environmental

Landscapes, architecture or equipment can set the right mood without interfering with a card’s title.

Find patterns or textures

Microscope slides, rows of books, a close-up of vials or a crowd of people can create an appealing texture.

Upload images that are at least 760 pixels wide.

This is the maximum width for standard images, so uploading at this size gives you the flexibility to use the image elsewhere on your site as well.