{"id":10437,"date":"2024-01-31T15:13:15","date_gmt":"2024-01-31T20:13:15","guid":{"rendered":"https:\/\/www.eng.ufl.edu\/marcom-dev\/?post_type=mercury-block&amp;p=10437"},"modified":"2024-01-31T15:13:15","modified_gmt":"2024-01-31T20:13:15","slug":"card-acf-block","status":"publish","type":"mercury-block","link":"https:\/\/www.eng.ufl.edu\/marcom\/mercury-block\/card-acf-block\/","title":{"rendered":"Card (ACF Block)"},"content":{"rendered":"\n<p><strong>Note<\/strong>: this block requires the HWCOE Cards plugin to be activated.<\/p>\n\n\n\n<p>The ACF Card Block is perfect for displaying a flexible or to-be-determined number of cards at a selected width. Each card block displays a single card and must be nested within a row to show side by side.<\/p>\n\n\n\n<p>In the Block Editor, insert a Row block. Keep orientation horizontal, and change the vertical alignment to Align top in the editing toolbar. If you want the cards to be responsive, select &#8220;Allow to wrap to multiple lines&#8221; in the inspector panel.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1217\" height=\"575\" class=\"wp-image-10491\" src=\"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/02\/howto-card-addrow.gif\" alt=\"How to add a row to contain the ACF card block \" \/><\/figure>\n<\/div>\n\n\n<p>Inside the row, insert a Card (ACF Block). Edit body content in the content area. In the inspector panel, add an image if desired, a headline, and the card URL and options (leave URL blank for an unlinked card). Select card width: 25% for a row of 4 cards, 33.3% for a row of 3 cards, and 50% for a row of 2 cards.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1217\" height=\"717\" class=\"wp-image-10493\" src=\"https:\/\/www.eng.ufl.edu\/marcom-dev\/wp-content\/uploads\/sites\/253\/2024\/02\/howto-acfcard.gif\" alt=\"How to add an ACF card block\" \/><\/figure>\n<\/div>\n\n\n<p>If you need multiple rows of cards, copy the first row and edit the cards inside it, or add more rows.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A block to add individual cards one by one, with or without an image.<\/p>\n","protected":false},"featured_media":10489,"template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"featured_post":"","_links_to":"","_links_to_target":""},"block-categories":[5,7],"class_list":["post-10437","mercury-block","type-mercury-block","status-publish","has-post-thumbnail","hentry","block-categories-calls-to-action","block-categories-cards"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/mercury-block\/10437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/mercury-block"}],"about":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/types\/mercury-block"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/media\/10489"}],"wp:attachment":[{"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/media?parent=10437"}],"wp:term":[{"taxonomy":"block-categories","embeddable":true,"href":"https:\/\/www.eng.ufl.edu\/marcom\/wp-json\/wp\/v2\/block-categories?post=10437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}