Use cards to explain and link to a single idea. Because the entire card must be a single link, it’s perfect for linking to broad topics where you need more words or a photo to describe the linked resource. Linking to other landing pages is a perfect use case. For example, instead of providing a list of programs linked by name, cards can be used to illustrate the differences between the programs.

---

Overview

Here’s an example card:

Cards can contain any combination of media, a title, body text, and button text. On their own, cards take up the full width of the page on desktop browsers.

A more common usage is to place cards into columns, where they adopt the typical stacked layout:

For cards in columns, a cleaner look can be achieved by ensuring that each card’s image has the same aspect ratio. While images can be cropped in the WordPress media library, it is generally easier and more accurate to edit images prior to uploading them.

Cards can also be floated left or right. Floated cards have a stacked layout and take up about a third of the page width on desktop browsers.

Adding a Card

On sites using the Block Editor, cards () can be added from the block library, under the Component Library section. Card content can be edited directly.

On sites using the older Visual Editor, cards can be added by choosing the Card pictograph () from the editor’s toolbar. Use the editor dialogue to add content and adjust options. To edit the card later, double-click the card preview to show the editor dialogue again.

---