{"id":562,"date":"2018-10-24T15:45:18","date_gmt":"2018-10-24T21:45:18","guid":{"rendered":"http:\/\/www.boisestate.edu\/webguide\/?page_id=562"},"modified":"2026-09-16T11:30:27","modified_gmt":"2026-09-16T17:30:27","slug":"card-grid-block","status":"publish","type":"page","link":"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/","title":{"rendered":"Card grid block"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The card grid block adds a custom number of \u201ccards\u201d to a page, providing engaging links to contextual material.<\/p>\n\n\n\n<h2 id=\"h-card-grid-block-guidelines\" class=\"wp-block-heading\">Card grid block guidelines<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use cards as an entry point to more detailed information.<\/li>\n\n\n\n<li>Use to present a quick overview of information and give the option to link to the view the full information.<\/li>\n\n\n\n<li>Keep your card titles as brief as possible to prevent unintended wrapping or text overflow.<\/li>\n\n\n\n<li>Each card <em>must<\/em> have a hyperlink for accessibility compliance. If you are using the Card grid block to display images without links, consider a a different block for your needs.<\/li>\n\n\n\n<li>Follow all <a href=\"https:\/\/www.boisestate.edu\/webguide\/publishing\/images-and-media\/\">image and media requirements and best practices<\/a>.<\/li>\n\n\n\n<li>Review the <a href=\"https:\/\/www.boisestate.edu\/webguide\/accessibility\/best-practices\/accessible-theme-blocks\/\">recommendations for accessible theme blocks<\/a> page to learn more about requirements for headings, images, and links published in this block.<\/li>\n\n\n\n<li>Use of this block for an undocumented purpose or in a non-standard way is discouraged and may not be supported.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"h-how-to-add-a-card-grid-block-to-the-page\" class=\"wp-block-heading\">How to add a card grid block to the page<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the page editor, click on the blue box with the plus sign located at the top left of the page. The alternative text for this link is called \u201ctoggle block inserter\u201d. This will open a menu of available blocks to select from.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image wp-image--no-caption\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"83\" src=\"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2024\/10\/Toggle-block-inserter-2024-05-05.png\" alt=\"Top navigation for new gutenberg page editor identifying the toggle block inserter.\" class=\"wp-image-8523\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A list of blocks sorted into 6 groups will be displayed. Either type \u201ccard grid\u201d into the search field to filter the list or scroll down to the category called Theme to find the card grid block. Click on it and the block will be added to the page.<\/li>\n\n\n\n<li>Each block comes with its own toolbar that appears on top of the block. The icons and features in the toolbar change depending on the block you are editing. This is what the card grid toolbar looks like:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image wp-image--no-caption\"><img loading=\"lazy\" decoding=\"async\" width=\"260\" height=\"52\" src=\"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2024\/10\/Card-Grid-Toolbar-2024-05-05.png\" alt=\"A toolbar with a grid icon and options to edit the card grid block.\" class=\"wp-image-8563\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To edit the block, click on the pencil icon and a pop-up will display the fields to edit. Click &#8220;done&#8221; to close the pop-up. Click the &#8220;View&#8221; icon in the top right toolbar to preview your page. &#8220;Save&#8221; your changes to publish your updates. <\/li>\n<\/ul>\n\n\n\n<h3 id=\"h-content\" class=\"wp-block-heading\">Content<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Title:<\/strong> This is an optional, but recommended text field. Content entered here will appear as the card grid block header text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Accent title:<\/strong> This is an optional text field. This content appears above the title in a smaller font.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Description:<\/strong> This is an optional text field, and may be used to help describe the purpose of the card grid. This content should be kept brief for design purposes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Cards:<\/strong> Add cards by selecting the \u201cAdd Card\u201d button. The card grid block requires a minimum of 2 cards. When you click add card, the first card will display. There will be a number 1 in the vertical bar to the left of the fields to indicate it is the first card.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image wp-image--no-caption\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"342\" src=\"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2024\/10\/Numbering-Cards-2024-05-05.png\" alt=\"Arrow pointing to vertical field to left of card grid content fields.\" class=\"wp-image-8564\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Card title:<\/strong> This is the text that will display on the front of your card. If you\u2019re using a solid color background, your text will fill the card. If you\u2019re using an image as a card background, your text will take up the lower-left portion of the card.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Image:<\/strong> Select an image for your card background. Optimal image size is 664px x 664px.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Link:<\/strong> Each card <em>must<\/em> have a link for accessibility compliance. A window will pop open displaying fields where you can enter the URL, link text, a checkbox if you want the link to open in a new tab, and an option to search for and select an existing page to link to. If you add link text, this text must be unique to meet accessibility requirements (avoid generic link texts like \u201cClick me\u201d and \u201cHere\u201d). When you have filled out the fields, click the \u201cadd link\u201d button to complete the process.<\/p>\n\n\n\n<h3 id=\"h-settings\" class=\"wp-block-heading\">Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Layout:<\/strong> The default card grid layout is \u201cInline\u201d. This layout stacks the cards in two columns with the optional description on the left. The other layout option is \u201cStacked\u201d and it arranges the cards horizontally in a row, with the optional description above. See sample card grid blocks below.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Card columns:<\/strong> If you utilize the horizontal layout, you can select a 3-card or 4-card layout option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Card type:<\/strong> The choices are fill (for blue or orange backgrounds) or stroke (for a white background with a colored border). The default is fill. The fill choice is used if no image has been selected for the card.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Card color:<\/strong> This is a select field. The default selection is orange. The choices are orange or blue. This selection fills the card backgrounds with a color when an image is not present.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Heading size:<\/strong> The block title will appear on the page as an H2. For accessibility reasons, do not change this to H1 unless otherwise directed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Add top padding:<\/strong> Defaults to &#8220;yes&#8221;, which places the standard empty space above your block. The recommendation is to leave it set to &#8220;yes&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Add bottom padding:<\/strong> Defaults to &#8220;yes&#8221;, which places the standard empty space above your block. The recommendation is to leave it set to &#8220;yes&#8221;.<\/p>\n\n\n\n\n\t\t\t<div class=\"panel s-wrapper site-panel site-panel--cardgrid top-padding--add_padding bottom-padding--add_padding\"\n\t\t\t\t data-index=\"\"\n\t\t\t\t data-js=\"panel\"\n\t\t\t\t data-type=\"cardgrid\"\n\t\t\t     \n\t\t\t\t data-modular-content>\n\t\n\t\t<div class=\"l-content--outer\">\n\t\t<div class=\"l-content--inner site-panel--cardgrid--inline l-container--inner\">\n\n\t\n            <header class=\"s-header \">\n\n            <span class=\"s-subtitle\">An entry point to more detailed information.<\/span>\n\n            \n<h2\n\t\tclass=\"site-panel__title s-title h2\"\n\t\t>\n\n\tExample Column Card Grid (Inline)\n\n<\/h2>\n\n                            \n<div class=\"site-panel__description s-desc t-content\" >\n\t<p>This is the two column layout option for the card grid block.<\/p>\n\n<\/div>\n\n            \n        <\/header>\n    \n\n\t\n    <div class=\"s-content\">\n        <div class=\"g-row g-row--col-2 g-row--col-2--min-full\"\n             data-depth=\"0\"\n             data-name=\"cards\"\n             data-livetext>\n\n                            <div class=\"g-col\">\n                    \n<div class=\"c-card c-card--blue\">\n\n\t\t\t<a href=\"#\" target=\"_self\" class=\"c-card__link-wrap\"><span class=\"u-screen-reader-text\">\n<h3\n\t\tclass=\"c-card__title\"\n\t\t>\n\n\tFirst Card\n\n<\/h3> First call to action<\/span><\/a>\n\t\n\t<span aria-hidden=\"true\">\n\t\t\t<\/span>\n\n            <i class=\"c-card__icon c-card__icon--arrow c-card__icon--arrow--white\"><\/i>\n    \n\t<div class=\"c-card__content\" aria-hidden=\"true\">\n\n        \n            \n                            \n<h3\n\t\tclass=\"c-card__title\"\n\t\t>\n\n\tFirst Card\n\n<\/h3>\n            \n            \n            \n                            \n<div class=\"c-cta c-card__cta c-cta--inverse\" >\n\t<span class=\"c-cta__content\">First call to action<\/span>\n<\/div>\n\n            \n        \n\t<\/div>\n\n\t\n<\/div>\n\n                <\/div>\n                            <div class=\"g-col\">\n                    \n<div class=\"c-card c-card--blue\">\n\n\t\t\t<a href=\"#\" target=\"_self\" class=\"c-card__link-wrap\"><span class=\"u-screen-reader-text\">\n<h3\n\t\tclass=\"c-card__title\"\n\t\t>\n\n\tSecond Card\n\n<\/h3> Second call to action<\/span><\/a>\n\t\n\t<span aria-hidden=\"true\">\n\t\t\t<\/span>\n\n            <i class=\"c-card__icon c-card__icon--arrow c-card__icon--arrow--white\"><\/i>\n    \n\t<div class=\"c-card__content\" aria-hidden=\"true\">\n\n        \n            \n                            \n<h3\n\t\tclass=\"c-card__title\"\n\t\t>\n\n\tSecond Card\n\n<\/h3>\n            \n            \n            \n                            \n<div class=\"c-cta c-card__cta c-cta--inverse\" >\n\t<span class=\"c-cta__content\">Second call to action<\/span>\n<\/div>\n\n            \n        \n\t<\/div>\n\n\t\n<\/div>\n\n                <\/div>\n                            <div class=\"g-col\">\n                    \n<div class=\"c-card c-card--blue\">\n\n\t\t\t<a href=\"#\" target=\"_self\" class=\"c-card__link-wrap\"><span class=\"u-screen-reader-text\">\n<h3\n\t\tclass=\"c-card__title\"\n\t\t>\n\n\tThird card\n\n<\/h3> Third call to action<\/span><\/a>\n\t\n\t<span aria-hidden=\"true\">\n\t\t\t<\/span>\n\n            <i class=\"c-card__icon c-card__icon--arrow c-card__icon--arrow--white\"><\/i>\n    \n\t<div class=\"c-card__content\" aria-hidden=\"true\">\n\n        \n            \n                            \n<h3\n\t\tclass=\"c-card__title\"\n\t\t>\n\n\tThird card\n\n<\/h3>\n            \n            \n            \n                            \n<div class=\"c-cta c-card__cta c-cta--inverse\" >\n\t<span class=\"c-cta__content\">Third call to action<\/span>\n<\/div>\n\n            \n        \n\t<\/div>\n\n\t\n<\/div>\n\n                <\/div>\n                            <div class=\"g-col\">\n                    \n<div class=\"c-card c-card--blue\">\n\n\t\t\t<a href=\"#\" target=\"_self\" class=\"c-card__link-wrap\"><span class=\"u-screen-reader-text\">\n<h3\n\t\tclass=\"c-card__title\"\n\t\t>\n\n\tFourth card\n\n<\/h3> Fourth call to action<\/span><\/a>\n\t\n\t<span aria-hidden=\"true\">\n\t\t\t<\/span>\n\n            <i class=\"c-card__icon c-card__icon--arrow c-card__icon--arrow--white\"><\/i>\n    \n\t<div class=\"c-card__content\" aria-hidden=\"true\">\n\n        \n            \n                            \n<h3\n\t\tclass=\"c-card__title\"\n\t\t>\n\n\tFourth card\n\n<\/h3>\n            \n            \n            \n                            \n<div class=\"c-cta c-card__cta c-cta--inverse\" >\n\t<span class=\"c-cta__content\">Fourth call to action<\/span>\n<\/div>\n\n            \n        \n\t<\/div>\n\n\t\n<\/div>\n\n                <\/div>\n            \n        <\/div>\n    <\/div>\n\n\n\t\t\t\t\n\t\t<\/div>\n<\/div>\n\n\t\t\t<\/div>\n\t\n\n\n\n\n\t\t\t<div class=\"panel s-wrapper site-panel site-panel--cardgrid top-padding--add_padding bottom-padding--add_padding\"\n\t\t\t\t data-index=\"\"\n\t\t\t\t data-js=\"panel\"\n\t\t\t\t data-type=\"cardgrid\"\n\t\t\t     \n\t\t\t\t data-modular-content>\n\t\n\t\t<div class=\"l-content--outer\">\n\t\t<div class=\"l-content--inner site-panel--cardgrid--stack\">\n\n\t\n            <header class=\"s-header s-header--inner\">\n\n            \n\n            \n<h2\n\t\tclass=\"site-panel__title s-title h2\"\n\t\t>\n\n\tExample Horizontal Card Grid (Stacked)\n\n<\/h2>\n\n                            \n<div class=\"site-panel__description s-desc t-content\" >\n\t<p>This is the horizontal layout option available in settings. You can choose a 3-card row or a 4-card row depending on how many cards you have.<\/p>\n\n<\/div>\n\n            \n        <\/header>\n    \n\n\t\n    <div class=\"s-content\">\n        <div class=\"g-row g-row--col-2 g-row--col-3--min-full\"\n             data-depth=\"0\"\n             data-name=\"cards\"\n             data-livetext>\n\n                            <div class=\"g-col\">\n                    \n<div class=\"c-card c-card--blue c-card--bdr\">\n\n\t\n\t<span >\n\t\t\t<\/span>\n\n            <i class=\"c-card__icon c-card__icon--arrow c-card__icon--arrow--blue\"><\/i>\n    \n\t<div class=\"c-card__content\" >\n\n        \n            \n                            \n<h3\n\t\tclass=\"c-card__title\"\n\t\t>\n\n\tAn Example Card\n\n<\/h3>\n            \n            \n            \n            \n        \n\t<\/div>\n\n\t\n<\/div>\n\n                <\/div>\n                            <div class=\"g-col\">\n                    \n<div class=\"c-card c-card--blue c-card--bdr\">\n\n\t\n\t<span >\n\t\t\t<\/span>\n\n            <i class=\"c-card__icon c-card__icon--arrow c-card__icon--arrow--blue\"><\/i>\n    \n\t<div class=\"c-card__content\" >\n\n        \n            \n                            \n<h3\n\t\tclass=\"c-card__title\"\n\t\t>\n\n\tAnother Example Card\n\n<\/h3>\n            \n            \n            \n            \n        \n\t<\/div>\n\n\t\n<\/div>\n\n                <\/div>\n                            <div class=\"g-col\">\n                    \n<div class=\"c-card c-card--blue c-card--bdr\">\n\n\t\n\t<span >\n\t\t\t<\/span>\n\n            <i class=\"c-card__icon c-card__icon--arrow c-card__icon--arrow--blue\"><\/i>\n    \n\t<div class=\"c-card__content\" >\n\n        \n            \n                            \n<h3\n\t\tclass=\"c-card__title\"\n\t\t>\n\n\tThe Last Example Card\n\n<\/h3>\n            \n            \n            \n            \n        \n\t<\/div>\n\n\t\n<\/div>\n\n                <\/div>\n            \n        <\/div>\n    <\/div>\n\n\n\t\t\t\t\n\t\t<\/div>\n<\/div>\n\n\t\t\t<\/div>\n\t\n","protected":false},"excerpt":{"rendered":"<p>The card grid block adds a custom number of \u201ccards\u201d to a page, providing engaging&#8230;<\/p>\n","protected":false},"author":90,"featured_media":0,"parent":8788,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-562","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.2 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Card grid block - Webguide<\/title>\n<meta name=\"description\" content=\"The Card Grid Panel adds a custom number of &quot;cards&quot; to a page to provide engaging links to contextual material in Boise State&#039;s WordPress theme.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Card grid block\" \/>\n<meta property=\"og:description\" content=\"The Card Grid Panel adds a custom number of &quot;cards&quot; to a page to provide engaging links to contextual material in Boise State&#039;s WordPress theme.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/\" \/>\n<meta property=\"og:site_name\" content=\"Webguide\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-16T17:30:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2024\/10\/Toggle-block-inserter-2024-05-05.png\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"83\" \/>\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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/publishing\\\/wordpress-blocks\\\/card-grid-block\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/publishing\\\/wordpress-blocks\\\/card-grid-block\\\/\"},\"author\":{\"name\":\"Shad\",\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/#\\\/schema\\\/person\\\/026a5fb49b740daab0e72d8d199f88f2\"},\"headline\":\"Card grid block\",\"datePublished\":\"2018-10-24T21:45:18+00:00\",\"dateModified\":\"2026-09-16T17:30:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/publishing\\\/wordpress-blocks\\\/card-grid-block\\\/\"},\"wordCount\":822,\"publisher\":{\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/publishing\\\/wordpress-blocks\\\/card-grid-block\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/wp-content\\\/uploads\\\/sites\\\/16\\\/2024\\\/10\\\/Toggle-block-inserter-2024-05-05.png\",\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/publishing\\\/wordpress-blocks\\\/card-grid-block\\\/\",\"url\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/publishing\\\/wordpress-blocks\\\/card-grid-block\\\/\",\"name\":\"Card grid block - Webguide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/publishing\\\/wordpress-blocks\\\/card-grid-block\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/publishing\\\/wordpress-blocks\\\/card-grid-block\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/wp-content\\\/uploads\\\/sites\\\/16\\\/2024\\\/10\\\/Toggle-block-inserter-2024-05-05.png\",\"datePublished\":\"2018-10-24T21:45:18+00:00\",\"dateModified\":\"2026-09-16T17:30:27+00:00\",\"description\":\"The Card Grid Panel adds a custom number of \\\"cards\\\" to a page to provide engaging links to contextual material in Boise State's WordPress theme.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/publishing\\\/wordpress-blocks\\\/card-grid-block\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/publishing\\\/wordpress-blocks\\\/card-grid-block\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/publishing\\\/wordpress-blocks\\\/card-grid-block\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/wp-content\\\/uploads\\\/sites\\\/16\\\/2024\\\/10\\\/Toggle-block-inserter-2024-05-05.png\",\"contentUrl\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/wp-content\\\/uploads\\\/sites\\\/16\\\/2024\\\/10\\\/Toggle-block-inserter-2024-05-05.png\",\"width\":200,\"height\":83,\"caption\":\"Top navigation for new gutenberg page editor identifying the toggle block inserter.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/publishing\\\/wordpress-blocks\\\/card-grid-block\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Publishing with WordPress\",\"item\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/publishing\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress blocks at Boise State\",\"item\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/publishing\\\/wordpress-blocks\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Card grid block\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/#website\",\"url\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/\",\"name\":\"Webguide\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/#organization\",\"name\":\"Boise State University\",\"url\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/wp-content\\\/uploads\\\/sites\\\/16\\\/2025\\\/09\\\/boisestate-primarylogo-2color-rgb-scaled.png\",\"contentUrl\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/wp-content\\\/uploads\\\/sites\\\/16\\\/2025\\\/09\\\/boisestate-primarylogo-2color-rgb-scaled.png\",\"width\":2560,\"height\":1142,\"caption\":\"Boise State University\"},\"image\":{\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/#\\\/schema\\\/person\\\/026a5fb49b740daab0e72d8d199f88f2\",\"name\":\"Shad\",\"url\":\"https:\\\/\\\/www.boisestate.edu\\\/webguide\\\/author\\\/sjessen\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Card grid block - Webguide","description":"The Card Grid Panel adds a custom number of \"cards\" to a page to provide engaging links to contextual material in Boise State's WordPress theme.","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:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/","og_locale":"en_US","og_type":"article","og_title":"Card grid block","og_description":"The Card Grid Panel adds a custom number of \"cards\" to a page to provide engaging links to contextual material in Boise State's WordPress theme.","og_url":"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/","og_site_name":"Webguide","article_modified_time":"2026-09-16T17:30:27+00:00","og_image":[{"url":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2024\/10\/Toggle-block-inserter-2024-05-05.png","width":200,"height":83,"type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/#article","isPartOf":{"@id":"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/"},"author":{"name":"Shad","@id":"https:\/\/www.boisestate.edu\/webguide\/#\/schema\/person\/026a5fb49b740daab0e72d8d199f88f2"},"headline":"Card grid block","datePublished":"2018-10-24T21:45:18+00:00","dateModified":"2026-09-16T17:30:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/"},"wordCount":822,"publisher":{"@id":"https:\/\/www.boisestate.edu\/webguide\/#organization"},"image":{"@id":"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/#primaryimage"},"thumbnailUrl":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2024\/10\/Toggle-block-inserter-2024-05-05.png","inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/","url":"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/","name":"Card grid block - Webguide","isPartOf":{"@id":"https:\/\/www.boisestate.edu\/webguide\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/#primaryimage"},"image":{"@id":"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/#primaryimage"},"thumbnailUrl":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2024\/10\/Toggle-block-inserter-2024-05-05.png","datePublished":"2018-10-24T21:45:18+00:00","dateModified":"2026-09-16T17:30:27+00:00","description":"The Card Grid Panel adds a custom number of \"cards\" to a page to provide engaging links to contextual material in Boise State's WordPress theme.","breadcrumb":{"@id":"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/#primaryimage","url":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2024\/10\/Toggle-block-inserter-2024-05-05.png","contentUrl":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2024\/10\/Toggle-block-inserter-2024-05-05.png","width":200,"height":83,"caption":"Top navigation for new gutenberg page editor identifying the toggle block inserter."},{"@type":"BreadcrumbList","@id":"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/card-grid-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Publishing with WordPress","item":"https:\/\/www.boisestate.edu\/webguide\/publishing\/"},{"@type":"ListItem","position":2,"name":"WordPress blocks at Boise State","item":"https:\/\/www.boisestate.edu\/webguide\/publishing\/wordpress-blocks\/"},{"@type":"ListItem","position":3,"name":"Card grid block"}]},{"@type":"WebSite","@id":"https:\/\/www.boisestate.edu\/webguide\/#website","url":"https:\/\/www.boisestate.edu\/webguide\/","name":"Webguide","description":"","publisher":{"@id":"https:\/\/www.boisestate.edu\/webguide\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.boisestate.edu\/webguide\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.boisestate.edu\/webguide\/#organization","name":"Boise State University","url":"https:\/\/www.boisestate.edu\/webguide\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.boisestate.edu\/webguide\/#\/schema\/logo\/image\/","url":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2025\/09\/boisestate-primarylogo-2color-rgb-scaled.png","contentUrl":"https:\/\/www.boisestate.edu\/webguide\/wp-content\/uploads\/sites\/16\/2025\/09\/boisestate-primarylogo-2color-rgb-scaled.png","width":2560,"height":1142,"caption":"Boise State University"},"image":{"@id":"https:\/\/www.boisestate.edu\/webguide\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.boisestate.edu\/webguide\/#\/schema\/person\/026a5fb49b740daab0e72d8d199f88f2","name":"Shad","url":"https:\/\/www.boisestate.edu\/webguide\/author\/sjessen\/"}]}},"_links":{"self":[{"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/pages\/562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/users\/90"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/comments?post=562"}],"version-history":[{"count":71,"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/pages\/562\/revisions"}],"predecessor-version":[{"id":13609,"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/pages\/562\/revisions\/13609"}],"up":[{"embeddable":true,"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/pages\/8788"}],"wp:attachment":[{"href":"https:\/\/www.boisestate.edu\/webguide\/wp-json\/wp\/v2\/media?parent=562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}