{"id":18,"date":"2025-02-01T18:58:51","date_gmt":"2025-02-01T23:58:51","guid":{"rendered":"https:\/\/www.golive.clarku.edu\/jp\/?page_id=18"},"modified":"2025-10-30T15:08:03","modified_gmt":"2025-10-30T19:08:03","slug":"cards","status":"publish","type":"page","link":"https:\/\/www.clarku.edu\/wordpress\/components\/cards\/","title":{"rendered":"Cards"},"content":{"rendered":"\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 sidebar is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p class=\"intro\">Cards are links on steroids. Cards must link to something.<\/p>\n\n\n\n<p>Sometimes a few words in link text isn&#8217;t enough to communicate the idea, that&#8217;s where cards come in. Cards use images and additional text to more thoroughly describe the content that it links to. You can include an image, eyebrow headings, a summary and even button text. Use these elements to help your reader understand what they&#8217;ll find when they click, and empower readers to be more confident when navigating the site.<\/p>\n\n\n\n<p>Cards come in two styles, the default stacked style, and an overlay style.  Except the link, other content with cards is optional.  <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<aside class=\"wp-block-group boxout has-light-warm-gray-background-color has-background is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-12dd3699 wp-block-group-is-layout-constrained\">\n<p>If you&#8217;re looking for a treatment that&#8217;s similar in appearance to a card that doesn&#8217;t link to anything, create your own custom group of blocks. <a href=\"https:\/\/www.clarku.edu\/wordpress\/design-elements\/boxout\/\">Try using a boxout<\/a>.<\/p>\n<\/aside>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Examples<\/h2>\n\n\n<div style=\"color:inherit\" class=\"eyebrow  has-text-align-left\">Default<\/div>\n\n\n\n<p>The default style card gives you more text elements to work with, and they work well on landing pages where visitors have several paths to choose from.<\/p>\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-vertically-aligned-stretch is-layout-flow wp-block-column-is-layout-flow\">    <a\n        class=\"clarku-block-card \"\n        href=\"https:\/\/www.clarku.edu\/programs\/majors-and-minors\/\"\n    >\n                    <div class=\"clarku-block-card-img-container\">\n                <img decoding=\"async\"\n                \t\tloading=\"lazy\"\n                    alt=\"\"\n                    class=\"clarku-block-card-img clarku-block-card-img-full\"\n                    src=\"https:\/\/www.clarku.edu\/wp-content\/uploads\/2024\/11\/Painting-majors-scaled.jpg\"\n                \/>\n            <\/div>\n                            <div\n                class=\"clarku-block-card-content\"\n            >\n                \n\n<h3 class=\"wp-block-heading\">Majors and minors<\/h3>\n\n\n\n<p>Whether you know what you want to study or you\u2019re still exploring, our academics offer both structure and flexibility.<\/p>\n\n\n\n<p class=\"arrow-link\">Program finder<\/p>\n\n            <\/div>\n            <\/a>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-stretch is-layout-flow wp-block-column-is-layout-flow\">    <a\n        class=\"clarku-block-card \"\n        href=\"https:\/\/www.clarku.edu\/academics\/undergraduate-curriculum\"\n    >\n                    <div class=\"clarku-block-card-img-container\">\n                <img decoding=\"async\"\n                \t\tloading=\"lazy\"\n                    alt=\"\"\n                    class=\"clarku-block-card-img clarku-block-card-img-full\"\n                    src=\"https:\/\/www.clarku.edu\/wp-content\/uploads\/2024\/10\/Clark-Fest-core.jpg\"\n                \/>\n            <\/div>\n                            <div\n                class=\"clarku-block-card-content\"\n            >\n                \n\n<h3 class=\"wp-block-heading\">Undergraduate Curriculum<\/h3>\n\n\n\n<p>Explore new areas of interest from a variety of disciplines as you prepare to succeed and have impact in the world.<\/p>\n\n\n\n<p class=\"arrow-link\">Clark Core<\/p>\n\n            <\/div>\n            <\/a>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-stretch is-layout-flow wp-block-column-is-layout-flow\">    <a\n        class=\"clarku-block-card \"\n        href=\"https:\/\/www.clarku.edu\/academics\/honors-experience\/\"\n    >\n                    <div class=\"clarku-block-card-img-container\">\n                <img decoding=\"async\"\n                \t\tloading=\"lazy\"\n                    alt=\"\"\n                    class=\"clarku-block-card-img clarku-block-card-img-full\"\n                    src=\"https:\/\/www.clarku.edu\/wp-content\/uploads\/2024\/10\/Majors-minors.jpg\"\n                \/>\n            <\/div>\n                            <div\n                class=\"clarku-block-card-content\"\n            >\n                \n\n<h3 class=\"wp-block-heading\">Honors Experience<\/h3>\n\n\n\n<p>Lean into your intellectual curiosity, venture beyond what\u2019s simply required, and excel in ways you\u2019ve never imagined.<\/p>\n\n\n\n<p class=\"arrow-link\">Take it further<\/p>\n\n            <\/div>\n            <\/a>\n<\/div>\n<\/div>\n\n\n<div style=\"color:inherit\" class=\"eyebrow  has-text-align-left\">Overlay<\/div>\n\n\n\n<p>Overlay style cards offer a bit of visual interest, and they rely on having an image to go along with them. While you can add additional text elements, they are better suited to topics that use minimal verbiage.<\/p>\n\n\n\n<div class=\"wp-block-columns triple-bottom-margin is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-stretch is-layout-flow wp-block-column-is-layout-flow\">    <a\n        class=\"clarku-block-card is-style-overlay\"\n        href=\"https:\/\/www.clarku.edu\/programs\/majors-and-minors\/\"\n    >\n                    <div class=\"clarku-block-card-img-container\">\n                <img decoding=\"async\"\n                \t\tloading=\"lazy\"\n                    alt=\"\"\n                    class=\"clarku-block-card-img clarku-block-card-img-square\"\n                    src=\"https:\/\/www.clarku.edu\/wp-content\/uploads\/2024\/11\/Painting-majors-scaled.jpg\"\n                \/>\n            <\/div>\n                            <div\n                class=\"clarku-block-card-content\"\n            >\n                \n\n<h3 class=\"wp-block-heading\">Majors and minors<\/h3>\n\n            <\/div>\n            <\/a>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-stretch is-layout-flow wp-block-column-is-layout-flow\">    <a\n        class=\"clarku-block-card is-style-overlay\"\n        href=\"https:\/\/www.clarku.edu\/academics\/undergraduate-curriculum\"\n    >\n                    <div class=\"clarku-block-card-img-container\">\n                <img decoding=\"async\"\n                \t\tloading=\"lazy\"\n                    alt=\"\"\n                    class=\"clarku-block-card-img clarku-block-card-img-full\"\n                    src=\"https:\/\/www.clarku.edu\/wp-content\/uploads\/2024\/10\/Clark-Fest-core.jpg\"\n                \/>\n            <\/div>\n                            <div\n                class=\"clarku-block-card-content\"\n            >\n                \n\n<h3 class=\"wp-block-heading\">Undergraduate Curriculum<\/h3>\n\n            <\/div>\n            <\/a>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-stretch is-layout-flow wp-block-column-is-layout-flow\">    <a\n        class=\"clarku-block-card is-style-overlay\"\n        href=\"https:\/\/www.clarku.edu\/academics\/honors-experience\/\"\n    >\n                    <div class=\"clarku-block-card-img-container\">\n                <img decoding=\"async\"\n                \t\tloading=\"lazy\"\n                    alt=\"\"\n                    class=\"clarku-block-card-img clarku-block-card-img-full\"\n                    src=\"https:\/\/www.clarku.edu\/wp-content\/uploads\/2024\/10\/Majors-minors.jpg\"\n                \/>\n            <\/div>\n                            <div\n                class=\"clarku-block-card-content\"\n            >\n                \n\n<h3 class=\"wp-block-heading\">Honors Experience<\/h3>\n\n            <\/div>\n            <\/a>\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 sidebar is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><div style=\"color:inherit\" class=\"eyebrow  has-text-align-left\">A single card<\/div>\n\n\n\n<p>Usually cards are presented in groups to indicate different options a visitor might take, but you can display a single card to promote one idea. <\/p>\n\n\n\n<p>You might want to use a card to promote a major or student opportunity along side the main content of a page.  <\/p>\n\n\n\n<p>You can also use one card in the main content column, and if you do, it&#8217;ll display differently and fill the available width. It ends up looking similar to a <a href=\"https:\/\/www.clarku.edu\/wordpress\/design-elements\/panels\/\">panel block<\/a>, but the entire card is still a single link. You can force a card to render horizontally by using the special class, <code>horizontal<\/code>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">    <a\n        class=\"clarku-block-card \"\n        href=\"https:\/\/www.clarku.edu\/news\/2025\/01\/16\/how-can-healthy-soil-and-plants-improve-food-security\/\"\n    >\n                    <div class=\"clarku-block-card-img-container\">\n                <img decoding=\"async\"\n                \t\tloading=\"lazy\"\n                    alt=\"a researcher studies plant roots\"\n                    class=\"clarku-block-card-img clarku-block-card-img-full\"\n                    src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab.jpg\"\n                \/>\n            <\/div>\n                            <div\n                class=\"clarku-block-card-content\"\n            >\n                \n\n<h3 class=\"wp-block-heading\">Biology, B.S.<\/h3>\n\n\n\n<p>See why biology is one of Clark\u2019s most popular majors as you experience life as never before.<\/p>\n\n            <\/div>\n            <\/a>\n<\/div>\n<\/div>\n\n\n    <a\n        class=\"clarku-block-card \"\n        href=\"https:\/\/www.clarku.edu\/news\/2025\/01\/16\/how-can-healthy-soil-and-plants-improve-food-security\/\"\n    >\n                    <div class=\"clarku-block-card-img-container\">\n                <img decoding=\"async\"\n                \t\tloading=\"lazy\"\n                    alt=\"a researcher studies plant roots\"\n                    class=\"clarku-block-card-img clarku-block-card-img-full\"\n                    src=\"https:\/\/www.clarku.edu\/wordpress\/wp-content\/uploads\/sites\/32\/jack-lab.jpg\"\n                \/>\n            <\/div>\n                            <div\n                class=\"clarku-block-card-content\"\n            >\n                \n<div style=\"color:inherit\" class=\"eyebrow  has-text-align-left\">Biology<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Student research<\/h3>\n\n\n\n<p>In Professor Chandra Jack\u2019s lab, student researchers conduct how microbe interactions affect plant traits \u2014 research that could help lead to the development of new, more sustainable ways to boost food production and curb famine in a world beset by climate change.<\/p>\n\n            <\/div>\n            <\/a>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cards are links on steroids. Cards must link to something. Sometimes a few words in link text isn&#8217;t enough to communicate the idea, that&#8217;s where cards come in. Cards use images and additional text to more thoroughly describe the content that it links to. You can include an image, eyebrow headings, a summary and even [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"parent":13,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Cards - ClarkU 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:\/\/www.clarku.edu\/wordpress\/components\/cards\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cards\" \/>\n<meta property=\"og:description\" content=\"Cards are links on steroids. Cards must link to something. Sometimes a few words in link text isn&#8217;t enough to communicate the idea, that&#8217;s where cards come in. Cards use images and additional text to more thoroughly describe the content that it links to. You can include an image, eyebrow headings, a summary and even [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clarku.edu\/wordpress\/components\/cards\/\" \/>\n<meta property=\"og:site_name\" content=\"ClarkU WordPress\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-30T19:08:03+00:00\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/cards\\\/\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/cards\\\/\",\"name\":\"Cards - ClarkU WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/#website\"},\"datePublished\":\"2025-02-01T23:58:51+00:00\",\"dateModified\":\"2025-10-30T19:08:03+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/components\\\/cards\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/wp-json\\\/wp\\\/v2\\\/pages\\\/18#breadcrumbs\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":0,\"name\":\"ClarkU\",\"item\":\"https:\\\/\\\/www.clarku.edu\\\/\"},{\"@type\":\"ListItem\",\"position\":1,\"name\":\"ClarkU WordPress\",\"item\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/\",\"name\":\"ClarkU WordPress\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clarku.edu\\\/wordpress\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Cards - ClarkU 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:\/\/www.clarku.edu\/wordpress\/components\/cards\/","og_locale":"en_US","og_type":"article","og_title":"Cards","og_description":"Cards are links on steroids. Cards must link to something. Sometimes a few words in link text isn&#8217;t enough to communicate the idea, that&#8217;s where cards come in. Cards use images and additional text to more thoroughly describe the content that it links to. You can include an image, eyebrow headings, a summary and even [&hellip;]","og_url":"https:\/\/www.clarku.edu\/wordpress\/components\/cards\/","og_site_name":"ClarkU WordPress","article_modified_time":"2025-10-30T19:08:03+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.clarku.edu\/wordpress\/components\/cards\/","url":"https:\/\/www.clarku.edu\/wordpress\/components\/cards\/","name":"Cards - ClarkU WordPress","isPartOf":{"@id":"https:\/\/www.clarku.edu\/wordpress\/#website"},"datePublished":"2025-02-01T23:58:51+00:00","dateModified":"2025-10-30T19:08:03+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clarku.edu\/wordpress\/components\/cards\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/18#breadcrumbs","itemListElement":[{"@type":"ListItem","position":0,"name":"ClarkU","item":"https:\/\/www.clarku.edu\/"},{"@type":"ListItem","position":1,"name":"ClarkU WordPress","item":"https:\/\/www.clarku.edu\/wordpress"}]},{"@type":"WebSite","@id":"https:\/\/www.clarku.edu\/wordpress\/#website","url":"https:\/\/www.clarku.edu\/wordpress\/","name":"ClarkU WordPress","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clarku.edu\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":18,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":601,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/18\/revisions\/601"}],"up":[{"embeddable":true,"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/pages\/13"}],"wp:attachment":[{"href":"https:\/\/www.clarku.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}