{"id":672,"date":"2025-03-13T13:41:53","date_gmt":"2025-03-13T20:41:53","guid":{"rendered":"https:\/\/comm.engineering.asu.edu\/pitchfork\/?p=672"},"modified":"2025-03-24T10:16:18","modified_gmt":"2025-03-24T17:16:18","slug":"10-card-blocks","status":"publish","type":"post","link":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/","title":{"rendered":"10. Card blocks"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"types_uds_cards\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><span class=\"highlight-gold\">Types of UDS Cards<\/span><\/h2>\n\n\n\n<p>UDS (Universal Design System) Card Blocks are way to display content to make it easily scannable. <\/p>\n\n\n\n<p>There are several types of UDS Cards available:<\/p>\n\n\n\n<ul class=\"wp-block-list is-style-uds-list\">\n<li><strong>Standard Card<\/strong> \u2013 A card with an image, heading, text and a button.<\/li>\n\n\n\n<li><strong>Icon Header Card<\/strong> \u2013 A card featuring an icon header alongside text and a button.<\/li>\n\n\n\n<li><strong>Image+Link Card<\/strong> \u2013 A basic card with image and a text link area (instead of a button).<\/li>\n\n\n\n<li><strong>Degree Card<\/strong> \u2013 Used for displaying degree program information.<\/li>\n\n\n\n<li><strong>Event Card<\/strong> \u2013 Used to displays event details.<\/li>\n\n\n\n<li><strong>Story Card<\/strong> \u2013 Used to represent a news story in card form.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"777\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Standard-Card-1024x777.png\" alt=\"Screenshot of a Standard UDS Card with image, text and button.\" class=\"wp-image-527\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Standard-Card-1024x777.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Standard-Card-300x228.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Standard-Card-768x583.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Standard-Card.png 1334w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"923\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/degree-card-1024x923.png\" alt=\"Screenshot of a Degree Card.\" class=\"wp-image-530\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/degree-card-1024x923.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/degree-card-300x270.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/degree-card-768x692.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/degree-card.png 1334w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"963\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Event-card-1024x963.png\" alt=\"Screenshot of an Event Card.\" class=\"wp-image-531\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Event-card-1024x963.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Event-card-300x282.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Event-card-768x722.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Event-card.png 1334w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"553\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Icon-header-1024x553.png\" alt=\"Screenshot of an Icon Header Card with an arrow pointing to the icon header.\" class=\"wp-image-528\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Icon-header-1024x553.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Icon-header-300x162.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Icon-header-768x415.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Icon-header.png 1334w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"748\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/ImageLink-1024x748.png\" alt=\"Screenshot of an Image+ Link Card with arrows pointing to the image and link positions.\" class=\"wp-image-529\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/ImageLink-1024x748.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/ImageLink-300x219.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/ImageLink-768x561.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/ImageLink.png 1334w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"711\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Story-card-1024x711.png\" alt=\"Screenshot of a Story Card with arrows pointing to image, link and tags positions.\" class=\"wp-image-532\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Story-card-1024x711.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Story-card-300x208.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Story-card-768x533.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Story-card.png 1334w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"standard_uds_cards\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><span class=\"highlight-gold\">Adding a standard UDS Card<\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list is-style-uds-list\">\n<li>In the block editor panel on the left, click the <strong>block inserter + button<\/strong> to add a block.<\/li>\n\n\n\n<li>Search for <strong>UDS Card<\/strong> in the <strong>Pitchfork Blocks<\/strong> section (scroll to the bottom) and select it.<\/li>\n\n\n\n<li>Customize the card by adding text, an image and one or two buttons as needed.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"95\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/block-editor-1024x95.png\" alt=\"Screenshot of a WordPress block editor panel with an arrow pointing to the + icon.\" class=\"wp-image-533\" style=\"width:550px;height:auto\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/block-editor-1024x95.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/block-editor-300x28.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/block-editor-768x71.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/block-editor.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"609\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Locating-UDS-Cards-1-1024x609.png\" alt=\"A screenshot of the block editor panel highlighting Pitchfork Blocks, UDS Cards and a Standard UDS Card.\" class=\"wp-image-536\" style=\"width:609px;height:auto\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Locating-UDS-Cards-1-1024x609.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Locating-UDS-Cards-1-300x178.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Locating-UDS-Cards-1-768x456.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Locating-UDS-Cards-1-1536x913.png 1536w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Locating-UDS-Cards-1-2048x1217.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"card_patterns\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><strong><span class=\"highlight-gold\">Loading card patterns for specific cards<\/span><\/strong><\/h2>\n\n\n\n<ol start=\"1\" class=\"wp-block-list is-style-uds-list\">\n<li>Open the <strong>block inserter + button<\/strong> in the block editor.<\/li>\n\n\n\n<li>Navigate to the <strong>Patterns<\/strong> tab.<\/li>\n\n\n\n<li>Select <strong>Pitchfork: Cards<\/strong> to find predefined layouts for <strong>Image+Link<\/strong>, <strong>Icon Header, Event, <strong>Story<\/strong> <\/strong>and <strong>Degree<\/strong> cards.<\/li>\n\n\n\n<li>Select and insert the pattern that matches your needs and proceed with editing.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"991\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Pitchfork-cards-1024x991.png\" alt=\"A screenshot of a WordPress block editor panel highlighting Pitchfork Cards in the Patterns tab and showing various cards.\" class=\"wp-image-537\" style=\"width:550px;height:auto\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Pitchfork-cards-1024x991.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Pitchfork-cards-300x290.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Pitchfork-cards-768x743.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Pitchfork-cards.png 1482w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"card_layout_patterns\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><strong><span class=\"highlight-gold\">Loading card layout patterns<\/span><\/strong><\/h2>\n\n\n\n<ol start=\"1\" class=\"wp-block-list is-style-uds-list\">\n<li>Go to the <strong>Patterns<\/strong> tab in the block inserter.<\/li>\n\n\n\n<li>Choose <strong>Pitchfork: Card Layout<\/strong> to view predefined layouts of multiple cards.<\/li>\n\n\n\n<li>Select an appropriate layout and customize the content within each card as required.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"963\" height=\"1024\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/card-layouts-963x1024.png\" alt=\"A screenshot of a WordPress block editor panel highlighting Pitchfork Card Layouts in the Patterns tab and showing various card layouts.\" class=\"wp-image-538\" style=\"width:589px;height:auto\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/card-layouts-963x1024.png 963w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/card-layouts-282x300.png 282w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/card-layouts-768x817.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/card-layouts.png 1386w\" sizes=\"auto, (max-width: 963px) 100vw, 963px\" \/><\/figure>\n\n\n<div class=\"wp-block-alert alert is-style-alert-info\"><div class=\"alert-icon\"><span class=\"fas fa-check-circle\"><\/span><\/div><div class=\"alert-content\"><div class=\"acf-innerblocks-container\">\n\n<p>Any elements left blank in a UDS Card will not display on the published page. You are not required to delete empty elements, but you can if you wish.<\/p>\n\n<\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"updating_legacy_cards\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><strong><span class=\"highlight-gold\">Updating legacy UDS Cards<\/span><\/strong><\/h2>\n\n\n\n<p>Legacy UDS Cards will appear with a <strong>pink background<\/strong> in the editor, indicating they need to be updated.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"582\" height=\"934\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Old-Card.png\" alt=\"A screenshot of UDS Cards showing the pink one as the legacy card and the white one below as the new card.\" class=\"wp-image-539\" style=\"width:300px;height:auto\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Old-Card.png 582w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Old-Card-187x300.png 187w\" sizes=\"auto, (max-width: 582px) 100vw, 582px\" \/><\/figure>\n\n\n<div class=\"wp-block-alert alert is-style-alert-warning\"><div class=\"alert-icon\"><span class=\"fas fa-exclamation-triangle\"><\/span><\/div><div class=\"alert-content\"><div class=\"acf-innerblocks-container\">\n\n<p>Do not directly edit or delete the old card block. Use the method given below to reduce the risk of formatting issues.<\/p>\n\n<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><span class=\"highlight-gold\">Replacing an old card block<\/span><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list is-style-uds-list\">\n<li><strong>Preview the page in a new tab <\/strong>&#8211; Open the page in preview mode to see the content of the legacy card.<\/li>\n\n\n\n<li><strong>Return to the page editor and add a new UDS Card block<\/strong> &#8211; Using the steps mentioned above, insert a fresh UDS Card block either before or after the existing card.<\/li>\n\n\n\n<li><strong>Copy the content from the Preview tab<\/strong> &#8211; Highlight and copy the text from the legacy card in the preview tab.<\/li>\n\n\n\n<li><strong>Paste the content<\/strong> in the editor &#8211; Transfer the copied content into the new card block. For images, just add them to the new card through the usual method (from the media library).<\/li>\n\n\n\n<li><strong>Remove the old card<\/strong> &#8211; Preview the page with both old and new cards. Once confirmed, delete the outdated pink-highlighted card in the editor.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"699\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Add-new-cards-1-1024x699.png\" alt=\"A screenshot of old and new UDS cards with text indicating to insert new cards before or after the existing UDS Cards.\" class=\"wp-image-550\" style=\"width:645px;height:auto\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Add-new-cards-1-1024x699.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Add-new-cards-1-300x205.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Add-new-cards-1-768x524.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Add-new-cards-1-1536x1048.png 1536w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Add-new-cards-1-2048x1397.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"529\" height=\"1024\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Copy-Paste-content-529x1024.png\" alt=\"A screenshot of old and new UDS cards with text indicating to copy and paste content from old card to new card.\" class=\"wp-image-546\" style=\"width:326px;height:auto\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Copy-Paste-content-529x1024.png 529w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Copy-Paste-content-155x300.png 155w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Copy-Paste-content-768x1486.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Copy-Paste-content-794x1536.png 794w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Copy-Paste-content.png 992w\" sizes=\"auto, (max-width: 529px) 100vw, 529px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"1024\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Previewing-both-the-cards-576x1024.png\" alt=\"A screenshot of the preview of the old and new UDS cards with text indicating to compare the content.\" class=\"wp-image-547\" style=\"width:362px;height:auto\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Previewing-both-the-cards-576x1024.png 576w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Previewing-both-the-cards-169x300.png 169w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Previewing-both-the-cards-768x1366.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Previewing-both-the-cards-863x1536.png 863w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/Previewing-both-the-cards.png 1004w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"695\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/deleting-old-card-1-1024x695.png\" alt=\" A screenshot of the block editor panel and the old UDS card block highlighting the option of Delete.\" class=\"wp-image-549\" style=\"width:591px;height:auto\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/deleting-old-card-1-1024x695.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/deleting-old-card-1-300x204.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/deleting-old-card-1-768x522.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/deleting-old-card-1-1536x1043.png 1536w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/02\/deleting-old-card-1.png 2041w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-copy-divider\" \/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"more_information\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><span class=\"highlight-black\">More information<\/span><\/h2>\n\n\n\n<p>Read the <a href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/pitchfork-cards\/\" data-type=\"pitchfork-docs\" data-id=\"175\">Pitchfork: Cards documentation<\/a> and the <a href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/pitchfork-card-layouts\/\">Pitchfork: Card Layouts documentation<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-copy-divider\" \/>\n\n\n\n<div class=\"wp-block-group is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-b4f274ad wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-e11bbbc3 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\"><i class=\"fa-solid fa-left-long\"><\/i> Previous<\/h3>\n\n\n\n<p><a href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/\">9. Hero blocks<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-084875ca wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Next <i class=\"fa-solid fa-right-long\"><\/i><\/h3>\n\n\n\n<p><a href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/11-people-profile-blocks\/\">11. People Profile blocks<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p class=\"mb-2\">Use UDS Card blocks to display your content in that quintessential ASU style. Learn to add new cards, use card patterns and update legacy cards.<\/p>\n","protected":false},"author":5,"featured_media":808,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[16],"tags":[],"class_list":["post-672","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>10. Card blocks - Pitchfork Theme for WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10. Card blocks - Pitchfork Theme for WordPress\" \/>\n<meta property=\"og:description\" content=\"Use UDS Card blocks to display your content in that quintessential ASU style. Learn to add new cards, use card patterns and update legacy cards.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"Pitchfork Theme for WordPress\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-13T20:41:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-24T17:16:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_10.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kristin Gasser\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_10.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kristin Gasser\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/10-card-blocks\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/10-card-blocks\\\/\"},\"author\":{\"name\":\"Kristin Gasser\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#\\\/schema\\\/person\\\/860a71c1e8d59103fbf39181b9dc1626\"},\"headline\":\"10. Card blocks\",\"datePublished\":\"2025-03-13T20:41:53+00:00\",\"dateModified\":\"2025-03-24T17:16:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/10-card-blocks\\\/\"},\"wordCount\":468,\"image\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/10-card-blocks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2025\\\/03\\\/PF-Tutorial-Feature-Image_10.1.jpg\",\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/10-card-blocks\\\/\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/10-card-blocks\\\/\",\"name\":\"10. Card blocks - Pitchfork Theme for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/10-card-blocks\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/10-card-blocks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2025\\\/03\\\/PF-Tutorial-Feature-Image_10.1.jpg\",\"datePublished\":\"2025-03-13T20:41:53+00:00\",\"dateModified\":\"2025-03-24T17:16:18+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#\\\/schema\\\/person\\\/860a71c1e8d59103fbf39181b9dc1626\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/10-card-blocks\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/10-card-blocks\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/10-card-blocks\\\/#primaryimage\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2025\\\/03\\\/PF-Tutorial-Feature-Image_10.1.jpg\",\"contentUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2025\\\/03\\\/PF-Tutorial-Feature-Image_10.1.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"Featured image for Pitchfork Tutorial No. 10: Card blocks.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/10-card-blocks\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10. Card blocks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\",\"name\":\"Pitchfork Theme for WordPress\",\"description\":\"an ASU Engineering theme for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#\\\/schema\\\/person\\\/860a71c1e8d59103fbf39181b9dc1626\",\"name\":\"Kristin Gasser\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g\",\"caption\":\"Kristin Gasser\"},\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/author\\\/bergeson\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"10. Card blocks - Pitchfork Theme for WordPress","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/","og_locale":"en_US","og_type":"article","og_title":"10. Card blocks - Pitchfork Theme for WordPress","og_description":"Use UDS Card blocks to display your content in that quintessential ASU style. Learn to add new cards, use card patterns and update legacy cards.","og_url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/","og_site_name":"Pitchfork Theme for WordPress","article_published_time":"2025-03-13T20:41:53+00:00","article_modified_time":"2025-03-24T17:16:18+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_10.jpg","type":"image\/jpeg"}],"author":"Kristin Gasser","twitter_card":"summary_large_image","twitter_image":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_10.jpg","twitter_misc":{"Written by":"Kristin Gasser","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/#article","isPartOf":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/"},"author":{"name":"Kristin Gasser","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#\/schema\/person\/860a71c1e8d59103fbf39181b9dc1626"},"headline":"10. Card blocks","datePublished":"2025-03-13T20:41:53+00:00","dateModified":"2025-03-24T17:16:18+00:00","mainEntityOfPage":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/"},"wordCount":468,"image":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_10.1.jpg","articleSection":["Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/","name":"10. Card blocks - Pitchfork Theme for WordPress","isPartOf":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website"},"primaryImageOfPage":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/#primaryimage"},"image":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_10.1.jpg","datePublished":"2025-03-13T20:41:53+00:00","dateModified":"2025-03-24T17:16:18+00:00","author":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#\/schema\/person\/860a71c1e8d59103fbf39181b9dc1626"},"breadcrumb":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/#primaryimage","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_10.1.jpg","contentUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_10.1.jpg","width":1920,"height":1080,"caption":"Featured image for Pitchfork Tutorial No. 10: Card blocks."},{"@type":"BreadcrumbList","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/comm.engineering.asu.edu\/pitchfork\/"},{"@type":"ListItem","position":2,"name":"10. Card blocks"}]},{"@type":"WebSite","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/","name":"Pitchfork Theme for WordPress","description":"an ASU Engineering theme for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/comm.engineering.asu.edu\/pitchfork\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#\/schema\/person\/860a71c1e8d59103fbf39181b9dc1626","name":"Kristin Gasser","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g","caption":"Kristin Gasser"},"url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/author\/bergeson\/"}]}},"_links":{"self":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/posts\/672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/comments?post=672"}],"version-history":[{"count":0,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/posts\/672\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/media\/808"}],"wp:attachment":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/media?parent=672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/categories?post=672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/tags?post=672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}