\n\n
It is possible to create something that looks like a series of linked card tags within a card by using the core\/buttons<\/code> block and a series of buttons. Each button in that sequence should be formatted to be small and colored $gray-2<\/code>.<\/p>\n\n<\/div><\/div><\/div>\n\n\nSummary Table<\/h3>\n\n\n\nNew block<\/th> Purpose<\/th><\/tr><\/thead> card-v2<\/code><\/td>Wrapper block for cards. Options for orientation and supported card variations are found here.<\/td><\/tr> card-v2-event<\/code><\/td>Adds event date and time fields plus a location field for event cards.<\/td><\/tr> card-v2-header<\/code><\/td>A wrapper block for the card heading text. Uses the core\/heading<\/code> block within.<\/td><\/tr>card-v2-icon<\/code><\/td>Include an icon from the included Font Awesome 6 library at the top of your card.<\/td><\/tr> card-v2-image<\/code><\/td>Include an image at the top of your card.<\/td><\/tr> card-v2-links<\/code><\/td>A wrapper block for card links. Users can create a plain text link or use the dedicated card-v2-link<\/code> block.<\/td><\/tr>card-v2-link<\/code><\/td>Add a link to a page within your website or an arbitrary URL using this inner block.<\/td><\/tr> card-v2-tags<\/code><\/td>A wrapper block that contains the series of individual card-v2-tag<\/code> blocks.<\/td><\/tr>card-v2-tag<\/code><\/td>Configure a series of individual tags at the bottom of your card to help users classify and scan the content.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nStyles and options<\/h2>\n\n\n\n The new card block comes with four block styles that are defined by the Unity Design system. They are:<\/p>\n\n\n\n
\nDefault Card <\/strong>– no embellishments.<\/li>\n\n\n\nDegree Card <\/strong>– A small gold bar is added beneath the card title separating a degree name from the supporting text.<\/li>\n\n\n\nEvent Card <\/strong>– A thin gold separator is applied to the top of the card or between the card image and the card title.<\/li>\n\n\n\nStory Card<\/strong> – The title of the card is indented within the card image. This effect is not visible unless the card has a card-image<\/code> block within.<\/li>\n<\/ul>\n\n\n\nCard styles can be applied independently to any card. However, since cards using these styles often have additional desirable options that should be included, it is recommended that a fully configured version of a styled card be deployed from the pattern library instead of manually constructing them from the default cards.<\/p>\n\n\n\n
See the Pitchfork Cards<\/strong> section of the pattern inserter for variations of the four card types outlined above. <\/p>\n\n\n\nOrientation<\/h3>\n\n\n\n Cards can also be oriented either vertically or horizontally. The default orientation for cards inserted via the block inserter is vertical. <\/p>\n\n\n\nCard groups<\/h2>\n\n\n\n Cards are often grouped together on a page in a section of two, three or four cards in a column. There are two ways to implement this pattern of “# of cards in a row.” Using columns is the preferred way, but other ways are possible using custom CSS or experimental blocks <\/p>\n\n\n\n
Using columns<\/h3>\n\n\n\n\nDeploy a set of columns and place one card block in each column.<\/li>\n\n\n\n If multiple rows are needed, use a second core\/columns<\/code> block for the break in the row. <\/li>\n\n\n\nMultiple cards can not be added vertically to the same core\/column<\/code> block because of their ability to expand and contract in height according to their context.<\/li>\n<\/ul>\n\n\n\nUsing grids<\/h3>\n\n\n\n\nAn experimental block called core\/grid<\/code> currently ships with WordPress core.<\/li>\n\n\n\nIt can be enabled via the Gutenberg plugin for experimentation. It is not recommended for production websites and is therefore not readily available.<\/li>\n\n\n\n Once this core block is marked as permanent and released to the editor, card arrangements with multiple rows of cards will have a natural solution using this block as the container.<\/li>\n<\/ul>\n\n\n\nConstrained height<\/h3>\n\n\n\n\nIf you are building a layout in which you need the card to be constrained to the height of the content of the card, wrap the card in a group<\/code> block as a method to enforce that restraint. <\/li>\n<\/ul>\n\n\n\n\n
\n
Without any constraint, a card block will expand to the maximum height of any neighboring columns. This can sometimes lead to problems that are not visible in the block editor in which the card expands to the maximum height of the columns<\/code> parent block.<\/figcaption><\/figure>\n<\/div>\n\n\n\n\n
To address this issue, wrap the card block in an additional group block. The group block will constrain the height of the card to only the height of its internal contents. <\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\nAvailable patterns<\/h3>\n\n\n\n\nTwo patterns of card groups are available in the pattern library under the heading Pitchfork: Card Layouts<\/strong><\/li>\n\n\n\nBoth feature arrangements of cards in columns and can be extended to add or remove a column or row of cards to suit your design. <\/li>\n\n\n\n The included patterns are an arrangement of 2 columns of cards (2-Across<\/strong>)<\/li>\n\n\n\n… and an arrangement of three cards within a dedicated background section (3-Across-Plus-Background<\/strong>)<\/li>\n<\/ul>\n\n\n\nCards with query loops<\/h2>\n\n\n\n Following the release of Pitchfork Blocks v2.2 in May of 2024, the native card block gained support for inclusion within a query loop to produce rows of cards based on the contents of WordPress posts or other custom post type. <\/p>\n\n\n\n
Query loop cards utilize the core WordPress blocks for elements of a standard display of posts within the wrapper blocks that define the card layout. Those supported wrapper blocks are as follows:<\/p>\n\n\n\nCore block<\/th> Support provided<\/th><\/tr><\/thead> post-title<\/code><\/td>Use within card-v2-header<\/code> as a replacement for the card title.<\/td><\/tr>featured-image<\/code><\/td>Use within card-v2<\/code> directly. Replaces the need for a card image.<\/td><\/tr>excerpt<\/code><\/td>Used within card-v2-content<\/code> as a replacement for manually entered content. Provides a configurable read more link.<\/td><\/tr>content<\/code><\/td>Also replaces manually entered content within the card-v2-content<\/code> block. The excerpt length is an available field within this core block.<\/td><\/tr>post-terms<\/code><\/td>Use within card-v2<\/code> directly. Produces a list of card tags which are linked to the archive page for the term. Choose from categories, tags or any other related taxonomy.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nQuery loop pattern<\/h3>\n\n\n\n A ready-to-deploy pattern of query loop cards including all supported core block elements is available within the pattern inserter.<\/p>\n\n\n\n
\nLook for Pitchfork: Card Layouts<\/strong> and a pattern called 3-Across with Query Loop<\/strong> within the block inserter.<\/li>\n\n\n\nBe sure to configure the query to display your desired set of posts by adjusting the settings of the core\/query<\/code> and core\/post-template<\/code> blocks.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Cards represent a common way to group together a summary of information along with a link to additional details. Cards within the unity Design System come in multiple forms and variations, each with a specific content type in mind. <\/p>\n","protected":false},"parent":0,"menu_order":0,"template":"","pitchfork-docs-category":[9],"class_list":["post-158","pitchfork-docs","type-pitchfork-docs","status-publish","hentry","pitchfork-docs-category-pitchfork-blocks"],"acf":[],"yoast_head":"\n
Cards - 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\/docs\/cards\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cards - Pitchfork Theme for WordPress\" \/>\n<meta property=\"og:description\" content=\"Cards represent a common way to group together a summary of information along with a link to additional details. Cards within the unity Design System come in multiple forms and variations, each with a specific content type in mind.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/cards\/\" \/>\n<meta property=\"og:site_name\" content=\"Pitchfork Theme for WordPress\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-16T20:35:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1034\" \/>\n\t<meta property=\"og:image:height\" content=\"402\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/cards\\\/\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/cards\\\/\",\"name\":\"Cards - Pitchfork Theme for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/cards\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/cards\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2024\\\/05\\\/image-1024x398.png\",\"datePublished\":\"2024-05-24T00:26:30+00:00\",\"dateModified\":\"2024-12-16T20:35:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/cards\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/cards\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/cards\\\/#primaryimage\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2024\\\/05\\\/image.png\",\"contentUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2024\\\/05\\\/image.png\",\"width\":1034,\"height\":402},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/cards\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documents\",\"item\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Cards\"}]},{\"@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\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cards - 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\/docs\/cards\/","og_locale":"en_US","og_type":"article","og_title":"Cards - Pitchfork Theme for WordPress","og_description":"Cards represent a common way to group together a summary of information along with a link to additional details. Cards within the unity Design System come in multiple forms and variations, each with a specific content type in mind.","og_url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/cards\/","og_site_name":"Pitchfork Theme for WordPress","article_modified_time":"2024-12-16T20:35:46+00:00","og_image":[{"width":1034,"height":402,"url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/image.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/cards\/","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/cards\/","name":"Cards - Pitchfork Theme for WordPress","isPartOf":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website"},"primaryImageOfPage":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/cards\/#primaryimage"},"image":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/cards\/#primaryimage"},"thumbnailUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/image-1024x398.png","datePublished":"2024-05-24T00:26:30+00:00","dateModified":"2024-12-16T20:35:46+00:00","breadcrumb":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/cards\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/cards\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/cards\/#primaryimage","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/image.png","contentUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/image.png","width":1034,"height":402},{"@type":"BreadcrumbList","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/cards\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/comm.engineering.asu.edu\/pitchfork\/"},{"@type":"ListItem","position":2,"name":"Documents","item":"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/"},{"@type":"ListItem","position":3,"name":"Cards"}]},{"@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"}]}},"_links":{"self":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs\/158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs"}],"about":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/types\/pitchfork-docs"}],"wp:attachment":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/media?parent=158"}],"wp:term":[{"taxonomy":"pitchfork-docs-category","embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/pitchfork-docs-category?post=158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/image-1024x398.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/image-1-935x1024.png\")
<\/figure>\n\n\n![\"\"](\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/image-2.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/image-3-1024x796.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/image-5-1024x909.png\")
![\"\"](\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2024\/05\/image-6-1024x892.png\")