Organizing Information with Cards

Use the cards block to highlight and group related bits of information.

Think of cards as graphic notecards.

Use them to organize similar information side-by-side in columns, highlight relevant information as a sidebar, or visually group information to help site visitors see the bigger picture of how your content fits together.

Card Block: Text Header

Display one of six background colors behind the card title.
The title overlays the background color header, and body text appears below.

Card Block: Image Header

Display an image header and select an accent color to trim the bottom of the card.
The image header is scaled to fit the card width and bleeds off the edges (no padding). It will not be cropped.
The title appears beneath the image header.

How to add cards

New to building pages in blocks? Get to know the block editor »

1. Insert a column block (recommended)

In most cases, cards work best when you have two or three cards per row. However, you can skip this step if you want the card to span the width of the page. You can also add columns later, and drag cards into the columns.
How to add columns »

2. Insert a card block

3. Add content to the card

First, select the area that says Card Title and add a title to your card.
Click on the placeholder text inside the card element; a gray outline should appear around the text block. Add your text.
Edit or remove the button. A button is placed in the card by default. If you do not remove the button, it will still appear on the page. Learn more about editing buttons.
Insert additional content blocks by selecting the Add Block icon (it looks like an encircled plus sign).

4. Select the card design

Select one of two card design options by choosing from the Design dropdown in the settings panel on the right.

Image Header design

The Image Header design includes an image at the top of the card, above the title and card contents. The image is scaled to fit the card width and bleeds off the edges (no padding). (See an example of the image header below).
- Choose an image or background color to display above the title. If the image is critical to understanding the card, fill out the alt text.
- Select one of six accent colors to trim the bottom of the card. If you do not upload an image, the card will appear as a plain text box with an accent color at the bottom.

Text Header design

When the Text Header design is selected, the title of the card will appear on top of a colored background. (See an example of the text header below).
- To choose a background color, select an option from the Accent Color dropdown in the settings panel on the right. By default, the card’s background color is light gray.

Selecting blocks within blocks

Cards can be tricky to work with since the blocks are nested — the parent card block contains inner blocks for paragraphs, buttons, etc. This gets even more complex if you’re placing cards inside columns, which are also nested blocks. The nested blocks tutorial demonstrates how to select different levels of parent and inner blocks so they’re easier to work with.

Working with nested blocks

Card examples

Design: Text Header

If you select the Text Header design, the title of the card appears over a color background. The background is light gray by default. You can change the color by clicking on the card block and using the Accent Color dropdown in the settings panel on the right.

As we’ve done below, we recommend sticking with one background color for the cards on a page. Vary colors only if the variation has meaning (e.g. yellow could indicate alerts and dark gray could show reminders), and use this system of colors consistently sitewide.

Confronting bias

The Bias Response Support System is part of WashU’s commitment to address incidents of bias in our community.

Charting progress

Understanding the data and makeup of our community today helps us work toward a more inclusive campus.

Planning inclusive

We are creating foundational policies and investing expert thought in improving inclusion.

Increasing accessibility

From physical resources to support services, we welcome everyone to the WashU community.

Learn more about our framework for change

Design: Image Header

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.

Advancing Human Health

We are bringing together many scholars, disciplines and diverse partners to address complex health issues facing the St. Louis region and the world.

Institute for Public Health
Washington University School of Medicine in St. Louis
Washington University Physicians

Innovation & Entrepreneurship

A hub of innovation, Washington University inspires entrepreneurial efforts.

We provide the infrastructure, educational programs and research support to tap the entrepreneurial spirit of our faculty and students.

Read inspiring I&E stories at the Fuse »

Using the image header

Upload images that are at least 760 pixels wide. That is the maximum width for standard images, so uploading this size gives you the flexibility to use the image elsewhere on your site.
If using columns, upload images that have the same aspect ratio. This keeps cards looking neat and orderly.
Consider how the aspect ratio or height of the image may impact card length.

Accent Colors

Add a colorful border to the bottom of any card using the Image Header design. By default, this border is gray. Select color options in the settings panel on the right.

An accent color can be used with or without an image. To use an accent color without an image, use Image Header card design, but don’t upload an image.