{"id":259,"date":"2018-06-07T19:14:30","date_gmt":"2018-06-07T19:14:30","guid":{"rendered":"http:\/\/bfuller.local\/wordpress\/styleguide\/?page_id=259"},"modified":"2025-11-10T15:46:04","modified_gmt":"2025-11-10T15:46:04","slug":"cards","status":"publish","type":"page","link":"https:\/\/www.uri.edu\/wordpress\/components\/cards\/","title":{"rendered":"Cards"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

\n\n\n\n

Overview<\/h2>\n\n\n\n

Here’s an example card:<\/p>\n\n\n

\"\"<\/div>

Photography Contest Winners<\/h2>

This year’s theme: Wilderness. While every entry was stunning, here are the best of the best.<\/p><\/div><\/div>

View the photos<\/div><\/a><\/div>\n\n\n

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.<\/p>\n\n\n\n

A more common usage is to place cards into columns, where they adopt the typical stacked layout:<\/p>\n\n\n\n

\n
\"\"<\/div>

Forest Management<\/h2><\/div><\/div>
Explore<\/div><\/a><\/div><\/div>\n\n\n\n
\"\"<\/div>

Natural Resources<\/h2><\/div><\/div>
Learn More<\/div><\/a><\/div><\/div>\n\n\n\n
\"\"<\/div>

Arctic Exploration<\/h2><\/div><\/div>
Discover<\/div><\/a><\/div><\/div>\n<\/div>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Adding a Card<\/h2>\n\n\n\n

On sites using the Block Editor, cards (\"Card) can be added from the block library, under the Component Library section. Card content can be edited directly.<\/p>\n\n\n\n

On sites using the older Classic Editor, cards can be added by choosing the Card pictograph (\"Card) 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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":188,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-259","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":35,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/259\/revisions"}],"predecessor-version":[{"id":2804,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/259\/revisions\/2804"}],"up":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/188"}],"wp:attachment":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}