{"id":495,"date":"2021-11-10T12:59:34","date_gmt":"2021-11-10T17:59:34","guid":{"rendered":"https:\/\/www.marshall.edu\/website\/?page_id=495"},"modified":"2026-03-03T15:03:16","modified_gmt":"2026-03-03T20:03:16","slug":"cards","status":"publish","type":"page","link":"https:\/\/www.marshall.edu\/marsha\/cards\/","title":{"rendered":"Cards"},"content":{"rendered":"<h2>Cards Wrapper Shortcode<\/h2>\n<p>Use <code>&#091;mu_cards&#093;<\/code> to wrap a group of <code>&#091;mu_card&#093;<\/code> shortcodes. The wrapper handles layout so you no longer need to use rows and columns to display cards side by side.<\/p>\n<h3>mu_cards Parameters<\/h3>\n<ul>\n<li><strong>Cards Per Row (per_row):<\/strong> Controls how many cards appear per row at larger screen sizes. Accepts <code>2<\/code>, <code>3<\/code>, or <code>4<\/code>. Without this attribute, cards will stack and grow to fill available width.<\/li>\n<li><strong>Extra Classes (class):<\/strong> Optional. Any additional CSS classes to apply to the wrapper element (e.g. <code>max-w-5xl mx-auto<\/code>).<\/li>\n<li><strong>Preheading (preheading):<\/strong> Optional. Small uppercase text displayed above the heading.<\/li>\n<li><strong>Heading (heading):<\/strong> Optional. A heading displayed above the card group.<\/li>\n<li><strong>Subheading (subheading):<\/strong> Optional. Descriptive text displayed below the heading.<\/li>\n<\/ul>\n<h2>Card Shortcode<\/h2>\n<h3>mu_card Parameters<\/h3>\n<ul>\n<li><strong>Image (image): <\/strong>This is the URL of the image to be used. This image <strong>must be in your site&#8217;s Media Library<\/strong> for it to load properly. <strong>Note: Your images should be between 450 and 600 pixels in width.<\/strong><\/li>\n<li><span class=\"inline bg-red-100 text-red-700 font-bold px-2 py-1 rounded-sm uppercase text-xs mr-2 my-1\">Required<\/span><strong>Title (title): <\/strong>This should be the title of the card, it&#8217;ll display in semibold directly below the image and before the card content.<\/li>\n<li><strong>Button Text (button_text): <\/strong>You can also include information for a button that will display at the bottom of the card. The button text value will be the text that shows on the button. <strong>Note: All button text should be calls to action and should not include &#8220;Click Here&#8221; in the copy.<\/strong><\/li>\n<li><strong>Button Link (button_link): <\/strong>This should be the full URL of the page you want to link to from the button.<\/li>\n<li><strong>Card Basis (card_basis):<\/strong> Optional. A CSS flex-basis utility class controlling the card&#8217;s width within a flex row. This is set automatically when using <code>&#091;mu_cards per_row=\"...\"&#093;<\/code> \u2014 you generally do not need to set this manually.<\/li>\n<\/ul>\n\n\n\n<div class=\"flex flex-wrap justify-center items-stretch gap-8 cards-per-row-2\">\n\t\n\n\t\t\t<div class=\"card flex flex-col rounded-lg overflow-hidden relative transition-all duration-200 ease-out shadow-sm self-stretch\">\n\t\n\t\t\t\t<div class=\"absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-green to-green-bright\"><\/div>\n\n\t\t<div class=\"p-6 pb-0 pt-7 bg-gray-50\">\n\t\t\t\t\t\t\t<div class=\"inline-flex items-center justify-center w-10 h-10 rounded-lg mb-4 bg-green\/10\">\n\t\t\t\t\t<svg data-slot=\"icon\" class=\"h-[18px] w-[18px] shrink-0 text-green\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"uppercase font-bold text-lg tracking-wider leading-tight text-gray-900\">\n\t\t\t\tDos\n\t\t\t<\/div>\n\n\t\t\t<div class=\"h-0.75 mt-4 w-10 bg-green\"><\/div>\n\t\t<\/div>\n\n\t\t\n\t\t<div class=\"px-6 pt-4 pb-7 flex flex-1 flex-col styled-list text-[15px] bg-gray-50 text-gray-500\">\n\t\t\t\t\t\t\t<div class=\"flex-1\">\n<ul>\n<li>Keep the title brief, 3 to 5 words<\/li>\n<li>Use the proper sized image<\/li>\n<li>Keep the card body limited to at most a couple paragraphs<\/li>\n<li>Use <code>&#091;mu_cards per_row=\"2|3|4\"&#093;<\/code> to control card layout<\/li>\n<\/ul>\n<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\n\t\t\t<\/div>\n\t\n\n\t\t\t<div class=\"card flex flex-col rounded-lg overflow-hidden relative transition-all duration-200 ease-out shadow-sm self-stretch\">\n\t\n\t\t\t\t<div class=\"absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-green to-green-bright\"><\/div>\n\n\t\t<div class=\"p-6 pb-0 pt-7 bg-gray-50\">\n\t\t\t\t\t\t\t<div class=\"inline-flex items-center justify-center w-10 h-10 rounded-lg mb-4 bg-green\/10\">\n\t\t\t\t\t<svg data-slot=\"icon\" class=\"h-[18px] w-[18px] shrink-0 text-green\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M4.929 4.929 19.07 19.071\"\/><\/svg>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"uppercase font-bold text-lg tracking-wider leading-tight text-gray-900\">\n\t\t\t\tDon&#039;ts\n\t\t\t<\/div>\n\n\t\t\t<div class=\"h-0.75 mt-4 w-10 bg-green\"><\/div>\n\t\t<\/div>\n\n\t\t\n\t\t<div class=\"px-6 pt-4 pb-7 flex flex-1 flex-col styled-list text-[15px] bg-gray-50 text-gray-500\">\n\t\t\t\t\t\t\t<div class=\"flex-1\">\n<ul>\n<li>Use cards for the majority of a page&#8217;s content<\/li>\n<li>Use different size images in a collection of cards<\/li>\n<li>Include anything other than text, lists, or links in the content<\/li>\n<li>Set <code>card_basis<\/code> manually when using <code>&#091;mu_cards&#093;<\/code><\/li>\n<\/ul>\n<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\n\t\t\t<\/div>\n\t\n\n<\/div>\n\n<h2>Cards Shortcode Examples<\/h2>\n<h3>Basic Cards Example (no fixed per-row)<\/h3>\n\n<div x-data=\"{ copied: false, rawCode: '' }\" x-init=\"rawCode = $refs.codeSource.textContent\" class=\"mb-12\">\n\n\t\t\t<div class=\"px-6 py-6 border border-b-0 rounded-t-lg border-gray-200 bg-white\">\n\t\t\t\n\n\n<div class=\"flex flex-wrap justify-center items-stretch gap-8 cards-per-row-3\">\n\t\n\n\t\t\t<div class=\"card flex flex-col rounded-lg overflow-hidden relative transition-all duration-200 ease-out shadow-sm self-stretch\">\n\t\n\t\t\t\t<div class=\"absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-green to-green-bright\"><\/div>\n\n\t\t<div class=\"p-6 pb-0 pt-7 bg-gray-50\">\n\t\t\t\n\t\t\t<div class=\"uppercase font-bold text-lg tracking-wider leading-tight text-gray-900\">\n\t\t\t\tDrinko Library\n\t\t\t<\/div>\n\n\t\t\t<div class=\"h-0.75 mt-4 w-10 bg-green\"><\/div>\n\t\t<\/div>\n\n\t\t\n\t\t<div class=\"px-6 pt-4 pb-7 flex flex-1 flex-col styled-list text-[15px] bg-gray-50 text-gray-500\">\n\t\t\t\t\t\t\t<div class=\"flex-1\">\nLorem ipsum dolor sit amet, consectetur <a href=\"\/marsha\/\">adipiscing elit<\/a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br \/>\n<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\n\t\t\t<\/div>\n\t\n\n\t\t\t<div class=\"card flex flex-col rounded-lg overflow-hidden relative transition-all duration-200 ease-out shadow-sm self-stretch\">\n\t\n\t\t\t\t<div class=\"absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-green to-green-bright\"><\/div>\n\n\t\t<div class=\"p-6 pb-0 pt-7 bg-gray-50\">\n\t\t\t\n\t\t\t<div class=\"uppercase font-bold text-lg tracking-wider leading-tight text-gray-900\">\n\t\t\t\tDrinko Library\n\t\t\t<\/div>\n\n\t\t\t<div class=\"h-0.75 mt-4 w-10 bg-green\"><\/div>\n\t\t<\/div>\n\n\t\t\n\t\t<div class=\"px-6 pt-4 pb-7 flex flex-1 flex-col styled-list text-[15px] bg-gray-50 text-gray-500\">\n\t\t\t\t\t\t\t<div class=\"flex-1\">\nLorem ipsum dolor sit amet, consectetur <a href=\"\/marsha\/\">adipiscing elit<\/a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br \/>\n<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\n\t\t\t<\/div>\n\t\n\n\t\t\t<div class=\"card flex flex-col rounded-lg overflow-hidden relative transition-all duration-200 ease-out shadow-sm self-stretch\">\n\t\n\t\t\t\t<div class=\"absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-green to-green-bright\"><\/div>\n\n\t\t<div class=\"p-6 pb-0 pt-7 bg-gray-50\">\n\t\t\t\n\t\t\t<div class=\"uppercase font-bold text-lg tracking-wider leading-tight text-gray-900\">\n\t\t\t\tDrinko Library\n\t\t\t<\/div>\n\n\t\t\t<div class=\"h-0.75 mt-4 w-10 bg-green\"><\/div>\n\t\t<\/div>\n\n\t\t\n\t\t<div class=\"px-6 pt-4 pb-7 flex flex-1 flex-col styled-list text-[15px] bg-gray-50 text-gray-500\">\n\t\t\t\t\t\t\t<div class=\"flex-1\">\nLorem ipsum dolor sit amet, consectetur <a href=\"\/marsha\/\">adipiscing elit<\/a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br \/>\n<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\n\t\t\t<\/div>\n\t\n\n<\/div>\n\n\t\t<\/div>\n\t\n\t<div class=\"\">\n\t\t<div class=\"flex items-center justify-between px-4 py-2.5\" style=\"background: #181825; border-bottom: 1px solid rgba(255,255,255,.06);\">\n\t\t\t<span class=\"text-[11px] font-medium tracking-wide text-white\/40\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\">Shortcode<\/span>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\t@click=\"navigator.clipboard.writeText(rawCode); copied = true; setTimeout(() => copied = false, 2000)\"\n\t\t\t\tclass=\"flex items-center gap-1.5 px-3 py-1.5 rounded text-[11px] font-medium cursor-pointer transition-all duration-150\"\n\t\t\t\t:class=\"copied\n\t\t\t\t\t? 'bg-green\/20 text-green border border-green\/30'\n\t\t\t\t\t: 'bg-white\/8 text-white\/60 border border-white\/10 hover:bg-white\/14 hover:text-white\/90'\"\n\t\t\t\tstyle=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\"\n\t\t\t>\n\t\t\t\t<template x-if=\"!copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/>\n\t\t\t\t\t\t<path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<template x-if=\"copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<span x-text=\"copied ? 'Copied!' : 'Copy'\"><\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t\t<div class=\"rounded-b-lg overflow-x-auto\" style=\"background: #1e1e2e;\">\n\t\t\t<pre class=\"px-5 py-4\"><code x-ref=\"codeSource\" class=\"language-bbcode text-[13px] leading-relaxed\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace; color: #cdd6f4;\">[mu_cards]\n[mu_card title=&quot;Drinko Library&quot;]\nLorem ipsum dolor sit amet, consectetur &lt;a href=&quot;\/marsha\/&quot;&gt;adipiscing elit&lt;\/a&gt;, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br \/&gt;\n[\/mu_card]\n[mu_card title=&quot;Drinko Library&quot;]\nLorem ipsum dolor sit amet, consectetur &lt;a href=&quot;\/marsha\/&quot;&gt;adipiscing elit&lt;\/a&gt;, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br \/&gt;\n[\/mu_card]\n[mu_card title=&quot;Drinko Library&quot;]\nLorem ipsum dolor sit amet, consectetur &lt;a href=&quot;\/marsha\/&quot;&gt;adipiscing elit&lt;\/a&gt;, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br \/&gt;\n[\/mu_card]\n[\/mu_cards]<\/code><\/pre>\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n<h3>Three Cards Per Row Example<\/h3>\n\n<div x-data=\"{ copied: false, rawCode: '' }\" x-init=\"rawCode = $refs.codeSource.textContent\" class=\"mb-12\">\n\n\t\t\t<div class=\"px-6 py-6 border border-b-0 rounded-t-lg border-gray-200 bg-white\">\n\t\t\t\n\n\n<div class=\"flex flex-wrap justify-center items-stretch gap-8 cards-per-row-3\">\n\t\n\n\t\t\t<div class=\"card flex flex-col rounded-lg overflow-hidden relative transition-all duration-200 ease-out shadow-sm self-stretch\">\n\t\n\t\t\t\t<div class=\"absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-green to-green-bright\"><\/div>\n\n\t\t<div class=\"p-6 pb-0 pt-7 bg-gray-50\">\n\t\t\t\n\t\t\t<div class=\"uppercase font-bold text-lg tracking-wider leading-tight text-gray-900\">\n\t\t\t\tDrinko Library\n\t\t\t<\/div>\n\n\t\t\t<div class=\"h-0.75 mt-4 w-10 bg-green\"><\/div>\n\t\t<\/div>\n\n\t\t\n\t\t<div class=\"px-6 pt-4 pb-7 flex flex-1 flex-col styled-list text-[15px] bg-gray-50 text-gray-500\">\n\t\t\t\t\t\t\t<div class=\"flex-1\">\nLorem ipsum dolor sit amet, consectetur <a href=\"\/marsha\/\">adipiscing elit<\/a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br \/>\n<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\n\t\t\t<\/div>\n\t\n\n\t\t\t<div class=\"card flex flex-col rounded-lg overflow-hidden relative transition-all duration-200 ease-out shadow-sm self-stretch\">\n\t\n\t\t\t\t<div class=\"absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-green to-green-bright\"><\/div>\n\n\t\t<div class=\"p-6 pb-0 pt-7 bg-gray-50\">\n\t\t\t\n\t\t\t<div class=\"uppercase font-bold text-lg tracking-wider leading-tight text-gray-900\">\n\t\t\t\tDrinko Library\n\t\t\t<\/div>\n\n\t\t\t<div class=\"h-0.75 mt-4 w-10 bg-green\"><\/div>\n\t\t<\/div>\n\n\t\t\n\t\t<div class=\"px-6 pt-4 pb-7 flex flex-1 flex-col styled-list text-[15px] bg-gray-50 text-gray-500\">\n\t\t\t\t\t\t\t<div class=\"flex-1\">\nLorem ipsum dolor sit amet, consectetur <a href=\"\/marsha\/\">adipiscing elit<\/a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br \/>\n<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\n\t\t\t<\/div>\n\t\n\n\t\t\t<div class=\"card flex flex-col rounded-lg overflow-hidden relative transition-all duration-200 ease-out shadow-sm self-stretch\">\n\t\n\t\t\t\t<div class=\"absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-green to-green-bright\"><\/div>\n\n\t\t<div class=\"p-6 pb-0 pt-7 bg-gray-50\">\n\t\t\t\n\t\t\t<div class=\"uppercase font-bold text-lg tracking-wider leading-tight text-gray-900\">\n\t\t\t\tDrinko Library\n\t\t\t<\/div>\n\n\t\t\t<div class=\"h-0.75 mt-4 w-10 bg-green\"><\/div>\n\t\t<\/div>\n\n\t\t\n\t\t<div class=\"px-6 pt-4 pb-7 flex flex-1 flex-col styled-list text-[15px] bg-gray-50 text-gray-500\">\n\t\t\t\t\t\t\t<div class=\"flex-1\">\nLorem ipsum dolor sit amet, consectetur <a href=\"\/marsha\/\">adipiscing elit<\/a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br \/>\n<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\n\t\t\t<\/div>\n\t\n\n<\/div>\n\n\t\t<\/div>\n\t\n\t<div class=\"\">\n\t\t<div class=\"flex items-center justify-between px-4 py-2.5\" style=\"background: #181825; border-bottom: 1px solid rgba(255,255,255,.06);\">\n\t\t\t<span class=\"text-[11px] font-medium tracking-wide text-white\/40\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\">Shortcode<\/span>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\t@click=\"navigator.clipboard.writeText(rawCode); copied = true; setTimeout(() => copied = false, 2000)\"\n\t\t\t\tclass=\"flex items-center gap-1.5 px-3 py-1.5 rounded text-[11px] font-medium cursor-pointer transition-all duration-150\"\n\t\t\t\t:class=\"copied\n\t\t\t\t\t? 'bg-green\/20 text-green border border-green\/30'\n\t\t\t\t\t: 'bg-white\/8 text-white\/60 border border-white\/10 hover:bg-white\/14 hover:text-white\/90'\"\n\t\t\t\tstyle=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\"\n\t\t\t>\n\t\t\t\t<template x-if=\"!copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/>\n\t\t\t\t\t\t<path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<template x-if=\"copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<span x-text=\"copied ? 'Copied!' : 'Copy'\"><\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t\t<div class=\"rounded-b-lg overflow-x-auto\" style=\"background: #1e1e2e;\">\n\t\t\t<pre class=\"px-5 py-4\"><code x-ref=\"codeSource\" class=\"language-bbcode text-[13px] leading-relaxed\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace; color: #cdd6f4;\">[mu_cards per_row=&quot;3&quot;]\n[mu_card title=&quot;Drinko Library&quot;]\nLorem ipsum dolor sit amet, consectetur &lt;a href=&quot;\/marsha\/&quot;&gt;adipiscing elit&lt;\/a&gt;, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br \/&gt;\n[\/mu_card]\n[mu_card title=&quot;Drinko Library&quot;]\nLorem ipsum dolor sit amet, consectetur &lt;a href=&quot;\/marsha\/&quot;&gt;adipiscing elit&lt;\/a&gt;, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br \/&gt;\n[\/mu_card]\n[mu_card title=&quot;Drinko Library&quot;]\nLorem ipsum dolor sit amet, consectetur &lt;a href=&quot;\/marsha\/&quot;&gt;adipiscing elit&lt;\/a&gt;, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br \/&gt;\n[\/mu_card]\n[\/mu_cards]<\/code><\/pre>\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n<h3>Basic Card with Image Example<\/h3>\n\n<div x-data=\"{ copied: false, rawCode: '' }\" x-init=\"rawCode = $refs.codeSource.textContent\" class=\"mb-12\">\n\n\t\t\t<div class=\"px-6 py-6 border border-b-0 rounded-t-lg border-gray-200 bg-white\">\n\t\t\t\n\n\n<div class=\"flex flex-wrap justify-center items-stretch gap-8 cards-per-row-3\">\n\t\n\n\t\t\t<div class=\"card flex flex-col rounded-lg overflow-hidden relative transition-all duration-200 ease-out shadow-sm self-stretch\">\n\t\n\t\t\t\t<div class=\"absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-green to-green-bright\"><\/div>\n\n\t\t<div class=\"p-6 pb-0 pt-7 bg-gray-50\">\n\t\t\t\n\t\t\t<div class=\"uppercase font-bold text-lg tracking-wider leading-tight text-gray-900\">\n\t\t\t\tDrinko Library\n\t\t\t<\/div>\n\n\t\t\t<div class=\"h-0.75 mt-4 w-10 bg-green\"><\/div>\n\t\t<\/div>\n\n\t\t\t\t\t<div class=\"relative bg-gray-50\">\n\t\t\t\t<div class=\"px-6 pt-4\">\n\t\t\t\t\t<div class=\"relative rounded-lg overflow-hidden\">\n\t\t\t\t\t\t<div aria-hidden=\"true\" class=\"absolute inset-0 z-1 m-4 border rounded-lg pointer-events-none border-green\"><\/div>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc=\"https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-1.jpg\"\n\t\t\t\t\t\t\tsrcset=\"https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-1-300x200.jpg&#x20;300w,&#x20;https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-1.jpg&#x20;800w\"\n\t\t\t\t\t\t\talt=\"Drinko Library\"\n\t\t\t\t\t\t\tclass=\"w-full object-cover h-48\"\n\t\t\t\t\t\t\tstyle=\"object-position: 51% 43%;\"\n\t\t\t\t\t\t\/>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\t\t<div class=\"px-6 pt-4 pb-7 flex flex-1 flex-col styled-list text-[15px] bg-gray-50 text-gray-500\">\n\t\t\t\t\t\t\t<div class=\"flex-1\">\nLorem ipsum dolor sit amet, consectetur <a href=\"\/marsha\/\">adipiscing elit<\/a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br \/>\n<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\n\t\t\n\t\t\t<\/div>\n\t\n\n<\/div>\n\n\t\t<\/div>\n\t\n\t<div class=\"\">\n\t\t<div class=\"flex items-center justify-between px-4 py-2.5\" style=\"background: #181825; border-bottom: 1px solid rgba(255,255,255,.06);\">\n\t\t\t<span class=\"text-[11px] font-medium tracking-wide text-white\/40\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\">Shortcode<\/span>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\t@click=\"navigator.clipboard.writeText(rawCode); copied = true; setTimeout(() => copied = false, 2000)\"\n\t\t\t\tclass=\"flex items-center gap-1.5 px-3 py-1.5 rounded text-[11px] font-medium cursor-pointer transition-all duration-150\"\n\t\t\t\t:class=\"copied\n\t\t\t\t\t? 'bg-green\/20 text-green border border-green\/30'\n\t\t\t\t\t: 'bg-white\/8 text-white\/60 border border-white\/10 hover:bg-white\/14 hover:text-white\/90'\"\n\t\t\t\tstyle=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\"\n\t\t\t>\n\t\t\t\t<template x-if=\"!copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/>\n\t\t\t\t\t\t<path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<template x-if=\"copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<span x-text=\"copied ? 'Copied!' : 'Copy'\"><\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t\t<div class=\"rounded-b-lg overflow-x-auto\" style=\"background: #1e1e2e;\">\n\t\t\t<pre class=\"px-5 py-4\"><code x-ref=\"codeSource\" class=\"language-bbcode text-[13px] leading-relaxed\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace; color: #cdd6f4;\">[mu_cards]\n[mu_card image=&quot;https:\/\/www.marshall.edu\/marsha\/files\/2026\/03\/docs-1.jpg&quot; title=&quot;Drinko Library&quot;]\nLorem ipsum dolor sit amet, consectetur &lt;a href=&quot;\/marsha\/&quot;&gt;adipiscing elit&lt;\/a&gt;, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br \/&gt;\n[\/mu_card]\n[\/mu_cards]<\/code><\/pre>\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n<h3>Card with Image and Button Example<\/h3>\n\n<div x-data=\"{ copied: false, rawCode: '' }\" x-init=\"rawCode = $refs.codeSource.textContent\" class=\"mb-12\">\n\n\t\t\t<div class=\"px-6 py-6 border border-b-0 rounded-t-lg border-gray-200 bg-white\">\n\t\t\t\n\n\n<div class=\"flex flex-wrap justify-center items-stretch gap-8 cards-per-row-3\">\n\t\n\n\t\t\t<div class=\"card flex flex-col rounded-lg overflow-hidden relative transition-all duration-200 ease-out shadow-sm self-stretch\">\n\t\n\t\t\t\t<div class=\"absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-green to-green-bright\"><\/div>\n\n\t\t<div class=\"p-6 pb-0 pt-7 bg-gray-50\">\n\t\t\t\n\t\t\t<div class=\"uppercase font-bold text-lg tracking-wider leading-tight text-gray-900\">\n\t\t\t\tDrinko Library\n\t\t\t<\/div>\n\n\t\t\t<div class=\"h-0.75 mt-4 w-10 bg-green\"><\/div>\n\t\t<\/div>\n\n\t\t\t\t\t<div class=\"relative bg-gray-50\">\n\t\t\t\t<div class=\"px-6 pt-4\">\n\t\t\t\t\t<div class=\"relative rounded-lg overflow-hidden\">\n\t\t\t\t\t\t<div aria-hidden=\"true\" class=\"absolute inset-0 z-1 m-4 border rounded-lg pointer-events-none border-green\"><\/div>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc=\"https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-1.jpg\"\n\t\t\t\t\t\t\tsrcset=\"https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-1-300x200.jpg&#x20;300w,&#x20;https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-1.jpg&#x20;800w\"\n\t\t\t\t\t\t\talt=\"Drinko Library\"\n\t\t\t\t\t\t\tclass=\"w-full object-cover h-48\"\n\t\t\t\t\t\t\tstyle=\"object-position: 51% 43%;\"\n\t\t\t\t\t\t\/>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\t\t<div class=\"px-6 pt-4 pb-7 flex flex-1 flex-col styled-list text-[15px] bg-gray-50 text-gray-500\">\n\t\t\t\t\t\t\t<div class=\"flex-1\">\nLorem ipsum dolor sit amet, consectetur <a href=\"\/marsha\/\">adipiscing elit<\/a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br \/>\n<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div class=\"px-6 py-5 border-t border-gray-900\/5 bg-gray-100\/80\">\n\t\t\t\t\t<a\n\t\thref=\"#\"\n\t\t\n\t\ttarget=\"_self\"\n\t\tclass=\"right-arrow arrow--sm \"\n\t\t\t\t\t>\n\t\t<span class=\"arrow-text\">Visit Drinko Library<\/span>\n\t\t<span class=\"arrow-wrapper\"><span class=\"arrow\"><\/span><\/span>\n\t<\/a>\n\n\t\t\t<\/div>\n\t\t\n\t\t\n\t\t\t<\/div>\n\t\n\n<\/div>\n\n\t\t<\/div>\n\t\n\t<div class=\"\">\n\t\t<div class=\"flex items-center justify-between px-4 py-2.5\" style=\"background: #181825; border-bottom: 1px solid rgba(255,255,255,.06);\">\n\t\t\t<span class=\"text-[11px] font-medium tracking-wide text-white\/40\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\">Shortcode<\/span>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\t@click=\"navigator.clipboard.writeText(rawCode); copied = true; setTimeout(() => copied = false, 2000)\"\n\t\t\t\tclass=\"flex items-center gap-1.5 px-3 py-1.5 rounded text-[11px] font-medium cursor-pointer transition-all duration-150\"\n\t\t\t\t:class=\"copied\n\t\t\t\t\t? 'bg-green\/20 text-green border border-green\/30'\n\t\t\t\t\t: 'bg-white\/8 text-white\/60 border border-white\/10 hover:bg-white\/14 hover:text-white\/90'\"\n\t\t\t\tstyle=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\"\n\t\t\t>\n\t\t\t\t<template x-if=\"!copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/>\n\t\t\t\t\t\t<path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<template x-if=\"copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<span x-text=\"copied ? 'Copied!' : 'Copy'\"><\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t\t<div class=\"rounded-b-lg overflow-x-auto\" style=\"background: #1e1e2e;\">\n\t\t\t<pre class=\"px-5 py-4\"><code x-ref=\"codeSource\" class=\"language-bbcode text-[13px] leading-relaxed\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace; color: #cdd6f4;\">[mu_cards]\n[mu_card image=&quot;https:\/\/www.marshall.edu\/marsha\/files\/2026\/03\/docs-1.jpg&quot; title=&quot;Drinko Library&quot; button_text=&quot;Visit Drinko Library&quot; button_link=&quot;#&quot;]\nLorem ipsum dolor sit amet, consectetur &lt;a href=&quot;\/marsha\/&quot;&gt;adipiscing elit&lt;\/a&gt;, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br \/&gt;\n[\/mu_card]\n[\/mu_cards]<\/code><\/pre>\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n<h3>Card with Image, Icon and Button Example<\/h3>\n\n<div x-data=\"{ copied: false, rawCode: '' }\" x-init=\"rawCode = $refs.codeSource.textContent\" class=\"mb-12\">\n\n\t\t\t<div class=\"px-6 py-6 border border-b-0 rounded-t-lg border-gray-200 bg-white\">\n\t\t\t\n\n\n<div class=\"flex flex-wrap justify-center items-stretch gap-8 cards-per-row-3\">\n\t\n\n\t\t\t<div class=\"card flex flex-col rounded-lg overflow-hidden relative transition-all duration-200 ease-out shadow-sm self-stretch\">\n\t\n\t\t\t\t<div class=\"absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-green to-green-bright\"><\/div>\n\n\t\t<div class=\"p-6 pb-0 pt-7 bg-gray-50\">\n\t\t\t\t\t\t\t<div class=\"inline-flex items-center justify-center w-10 h-10 rounded-lg mb-4 bg-green\/10\">\n\t\t\t\t\t<svg data-slot=\"icon\" class=\"h-[18px] w-[18px] shrink-0 text-green\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"uppercase font-bold text-lg tracking-wider leading-tight text-gray-900\">\n\t\t\t\tDrinko Library\n\t\t\t<\/div>\n\n\t\t\t<div class=\"h-0.75 mt-4 w-10 bg-green\"><\/div>\n\t\t<\/div>\n\n\t\t\t\t\t<div class=\"relative bg-gray-50\">\n\t\t\t\t<div class=\"px-6 pt-4\">\n\t\t\t\t\t<div class=\"relative rounded-lg overflow-hidden\">\n\t\t\t\t\t\t<div aria-hidden=\"true\" class=\"absolute inset-0 z-1 m-4 border rounded-lg pointer-events-none border-green\"><\/div>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc=\"https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-2.jpg\"\n\t\t\t\t\t\t\tsrcset=\"https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-2-300x200.jpg&#x20;300w,&#x20;https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-2.jpg&#x20;800w\"\n\t\t\t\t\t\t\talt=\"Drinko Library\"\n\t\t\t\t\t\t\tclass=\"w-full object-cover h-48\"\n\t\t\t\t\t\t\tstyle=\"object-position: 50% 50%;\"\n\t\t\t\t\t\t\/>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\t\t<div class=\"px-6 pt-4 pb-7 flex flex-1 flex-col styled-list text-[15px] bg-gray-50 text-gray-500\">\n\t\t\t\t\t\t\t<div class=\"flex-1\">\nLorem ipsum dolor sit amet, consectetur <a href=\"\/marsha\/\">adipiscing elit<\/a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br \/>\n<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div class=\"px-6 py-5 border-t border-gray-900\/5 bg-gray-100\/80\">\n\t\t\t\t\t<a\n\t\thref=\"#\"\n\t\t\n\t\ttarget=\"_self\"\n\t\tclass=\"right-arrow arrow--sm \"\n\t\t\t\t\t>\n\t\t<span class=\"arrow-text\">Visit Drinko Library<\/span>\n\t\t<span class=\"arrow-wrapper\"><span class=\"arrow\"><\/span><\/span>\n\t<\/a>\n\n\t\t\t<\/div>\n\t\t\n\t\t\n\t\t\t<\/div>\n\t\n\n<\/div>\n\n\t\t<\/div>\n\t\n\t<div class=\"\">\n\t\t<div class=\"flex items-center justify-between px-4 py-2.5\" style=\"background: #181825; border-bottom: 1px solid rgba(255,255,255,.06);\">\n\t\t\t<span class=\"text-[11px] font-medium tracking-wide text-white\/40\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\">Shortcode<\/span>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\t@click=\"navigator.clipboard.writeText(rawCode); copied = true; setTimeout(() => copied = false, 2000)\"\n\t\t\t\tclass=\"flex items-center gap-1.5 px-3 py-1.5 rounded text-[11px] font-medium cursor-pointer transition-all duration-150\"\n\t\t\t\t:class=\"copied\n\t\t\t\t\t? 'bg-green\/20 text-green border border-green\/30'\n\t\t\t\t\t: 'bg-white\/8 text-white\/60 border border-white\/10 hover:bg-white\/14 hover:text-white\/90'\"\n\t\t\t\tstyle=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\"\n\t\t\t>\n\t\t\t\t<template x-if=\"!copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/>\n\t\t\t\t\t\t<path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<template x-if=\"copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<span x-text=\"copied ? 'Copied!' : 'Copy'\"><\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t\t<div class=\"rounded-b-lg overflow-x-auto\" style=\"background: #1e1e2e;\">\n\t\t\t<pre class=\"px-5 py-4\"><code x-ref=\"codeSource\" class=\"language-bbcode text-[13px] leading-relaxed\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace; color: #cdd6f4;\">[mu_cards]\n[mu_card icon=&quot;checkmark&quot; image=&quot;https:\/\/www.marshall.edu\/marsha\/files\/2026\/03\/docs-2.jpg&quot; title=&quot;Drinko Library&quot; button_text=&quot;Visit Drinko Library&quot; button_link=&quot;#&quot;]\nLorem ipsum dolor sit amet, consectetur &lt;a href=&quot;\/marsha\/&quot;&gt;adipiscing elit&lt;\/a&gt;, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br \/&gt;\n[\/mu_card]\n[\/mu_cards]<\/code><\/pre>\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n<h3>Cards with Heading Example<\/h3>\n\n<div x-data=\"{ copied: false, rawCode: '' }\" x-init=\"rawCode = $refs.codeSource.textContent\" class=\"mb-12\">\n\n\t\t\t<div class=\"px-6 py-6 border border-b-0 rounded-t-lg border-gray-200 bg-white\">\n\t\t\t\t<div class=\"block__preheading\">Our Facilities<\/div>\n\n\n\t<h2 class=\"block__heading\">Explore Campus<\/h2>\n\n\n\t<div class=\"block__subheading\">Discover the spaces and resources available to Marshall students.<\/div>\n\n\n<div class=\"flex flex-wrap justify-center items-stretch gap-8 cards-per-row-3 mt-8 lg:mt-12\">\n\t\n\n\t\t\t<div class=\"card flex flex-col rounded-lg overflow-hidden relative transition-all duration-200 ease-out shadow-sm self-stretch\">\n\t\n\t\t\t\t<div class=\"absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-green to-green-bright\"><\/div>\n\n\t\t<div class=\"p-6 pb-0 pt-7 bg-gray-50\">\n\t\t\t\n\t\t\t<div class=\"uppercase font-bold text-lg tracking-wider leading-tight text-gray-900\">\n\t\t\t\tDrinko Library\n\t\t\t<\/div>\n\n\t\t\t<div class=\"h-0.75 mt-4 w-10 bg-green\"><\/div>\n\t\t<\/div>\n\n\t\t\t\t\t<div class=\"relative bg-gray-50\">\n\t\t\t\t<div class=\"px-6 pt-4\">\n\t\t\t\t\t<div class=\"relative rounded-lg overflow-hidden\">\n\t\t\t\t\t\t<div aria-hidden=\"true\" class=\"absolute inset-0 z-1 m-4 border rounded-lg pointer-events-none border-green\"><\/div>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc=\"https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-1.jpg\"\n\t\t\t\t\t\t\tsrcset=\"https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-1-300x200.jpg&#x20;300w,&#x20;https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-1.jpg&#x20;800w\"\n\t\t\t\t\t\t\talt=\"Drinko Library\"\n\t\t\t\t\t\t\tclass=\"w-full object-cover h-48\"\n\t\t\t\t\t\t\tstyle=\"object-position: 51% 43%;\"\n\t\t\t\t\t\t\/>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\t\t<div class=\"px-6 pt-4 pb-7 flex flex-1 flex-col styled-list text-[15px] bg-gray-50 text-gray-500\">\n\t\t\t\t\t\t\t<div class=\"flex-1\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br \/>\n<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div class=\"px-6 py-5 border-t border-gray-900\/5 bg-gray-100\/80\">\n\t\t\t\t\t<a\n\t\thref=\"#\"\n\t\t\n\t\ttarget=\"_self\"\n\t\tclass=\"right-arrow arrow--sm \"\n\t\t\t\t\t>\n\t\t<span class=\"arrow-text\">Learn More<\/span>\n\t\t<span class=\"arrow-wrapper\"><span class=\"arrow\"><\/span><\/span>\n\t<\/a>\n\n\t\t\t<\/div>\n\t\t\n\t\t\n\t\t\t<\/div>\n\t\n\n\t\t\t<div class=\"card flex flex-col rounded-lg overflow-hidden relative transition-all duration-200 ease-out shadow-sm self-stretch\">\n\t\n\t\t\t\t<div class=\"absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-green to-green-bright\"><\/div>\n\n\t\t<div class=\"p-6 pb-0 pt-7 bg-gray-50\">\n\t\t\t\n\t\t\t<div class=\"uppercase font-bold text-lg tracking-wider leading-tight text-gray-900\">\n\t\t\t\tStudent Center\n\t\t\t<\/div>\n\n\t\t\t<div class=\"h-0.75 mt-4 w-10 bg-green\"><\/div>\n\t\t<\/div>\n\n\t\t\t\t\t<div class=\"relative bg-gray-50\">\n\t\t\t\t<div class=\"px-6 pt-4\">\n\t\t\t\t\t<div class=\"relative rounded-lg overflow-hidden\">\n\t\t\t\t\t\t<div aria-hidden=\"true\" class=\"absolute inset-0 z-1 m-4 border rounded-lg pointer-events-none border-green\"><\/div>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc=\"https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-2.jpg\"\n\t\t\t\t\t\t\tsrcset=\"https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-2-300x200.jpg&#x20;300w,&#x20;https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-2.jpg&#x20;800w\"\n\t\t\t\t\t\t\talt=\"Student Center\"\n\t\t\t\t\t\t\tclass=\"w-full object-cover h-48\"\n\t\t\t\t\t\t\tstyle=\"object-position: 50% 50%;\"\n\t\t\t\t\t\t\/>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\t\t<div class=\"px-6 pt-4 pb-7 flex flex-1 flex-col styled-list text-[15px] bg-gray-50 text-gray-500\">\n\t\t\t\t\t\t\t<div class=\"flex-1\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br \/>\n<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div class=\"px-6 py-5 border-t border-gray-900\/5 bg-gray-100\/80\">\n\t\t\t\t\t<a\n\t\thref=\"#\"\n\t\t\n\t\ttarget=\"_self\"\n\t\tclass=\"right-arrow arrow--sm \"\n\t\t\t\t\t>\n\t\t<span class=\"arrow-text\">Learn More<\/span>\n\t\t<span class=\"arrow-wrapper\"><span class=\"arrow\"><\/span><\/span>\n\t<\/a>\n\n\t\t\t<\/div>\n\t\t\n\t\t\n\t\t\t<\/div>\n\t\n\n\t\t\t<div class=\"card flex flex-col rounded-lg overflow-hidden relative transition-all duration-200 ease-out shadow-sm self-stretch\">\n\t\n\t\t\t\t<div class=\"absolute top-0 left-0 right-0 h-1 bg-linear-to-r from-green to-green-bright\"><\/div>\n\n\t\t<div class=\"p-6 pb-0 pt-7 bg-gray-50\">\n\t\t\t\n\t\t\t<div class=\"uppercase font-bold text-lg tracking-wider leading-tight text-gray-900\">\n\t\t\t\tRecreation Center\n\t\t\t<\/div>\n\n\t\t\t<div class=\"h-0.75 mt-4 w-10 bg-green\"><\/div>\n\t\t<\/div>\n\n\t\t\t\t\t<div class=\"relative bg-gray-50\">\n\t\t\t\t<div class=\"px-6 pt-4\">\n\t\t\t\t\t<div class=\"relative rounded-lg overflow-hidden\">\n\t\t\t\t\t\t<div aria-hidden=\"true\" class=\"absolute inset-0 z-1 m-4 border rounded-lg pointer-events-none border-green\"><\/div>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc=\"https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-3.jpg\"\n\t\t\t\t\t\t\tsrcset=\"https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-3-300x200.jpg&#x20;300w,&#x20;https&#x3A;&#x2F;&#x2F;www.marshall.edu&#x2F;marsha&#x2F;files&#x2F;2026&#x2F;03&#x2F;docs-3.jpg&#x20;800w\"\n\t\t\t\t\t\t\talt=\"Recreation Center\"\n\t\t\t\t\t\t\tclass=\"w-full object-cover h-48\"\n\t\t\t\t\t\t\tstyle=\"object-position: 35% 23%;\"\n\t\t\t\t\t\t\/>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\n\t\t<div class=\"px-6 pt-4 pb-7 flex flex-1 flex-col styled-list text-[15px] bg-gray-50 text-gray-500\">\n\t\t\t\t\t\t\t<div class=\"flex-1\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br \/>\n<\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div class=\"px-6 py-5 border-t border-gray-900\/5 bg-gray-100\/80\">\n\t\t\t\t\t<a\n\t\thref=\"#\"\n\t\t\n\t\ttarget=\"_self\"\n\t\tclass=\"right-arrow arrow--sm \"\n\t\t\t\t\t>\n\t\t<span class=\"arrow-text\">Learn More<\/span>\n\t\t<span class=\"arrow-wrapper\"><span class=\"arrow\"><\/span><\/span>\n\t<\/a>\n\n\t\t\t<\/div>\n\t\t\n\t\t\n\t\t\t<\/div>\n\t\n\n<\/div>\n\n\t\t<\/div>\n\t\n\t<div class=\"\">\n\t\t<div class=\"flex items-center justify-between px-4 py-2.5\" style=\"background: #181825; border-bottom: 1px solid rgba(255,255,255,.06);\">\n\t\t\t<span class=\"text-[11px] font-medium tracking-wide text-white\/40\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\">Shortcode<\/span>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\t@click=\"navigator.clipboard.writeText(rawCode); copied = true; setTimeout(() => copied = false, 2000)\"\n\t\t\t\tclass=\"flex items-center gap-1.5 px-3 py-1.5 rounded text-[11px] font-medium cursor-pointer transition-all duration-150\"\n\t\t\t\t:class=\"copied\n\t\t\t\t\t? 'bg-green\/20 text-green border border-green\/30'\n\t\t\t\t\t: 'bg-white\/8 text-white\/60 border border-white\/10 hover:bg-white\/14 hover:text-white\/90'\"\n\t\t\t\tstyle=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\"\n\t\t\t>\n\t\t\t\t<template x-if=\"!copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/>\n\t\t\t\t\t\t<path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<template x-if=\"copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<span x-text=\"copied ? 'Copied!' : 'Copy'\"><\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t\t<div class=\"rounded-b-lg overflow-x-auto\" style=\"background: #1e1e2e;\">\n\t\t\t<pre class=\"px-5 py-4\"><code x-ref=\"codeSource\" class=\"language-bbcode text-[13px] leading-relaxed\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace; color: #cdd6f4;\">[mu_cards per_row=&quot;3&quot; preheading=&quot;Our Facilities&quot; heading=&quot;Explore Campus&quot; subheading=&quot;Discover the spaces and resources available to Marshall students.&quot;]\n[mu_card image=&quot;https:\/\/www.marshall.edu\/marsha\/files\/2026\/03\/docs-1.jpg&quot; title=&quot;Drinko Library&quot; button_text=&quot;Learn More&quot; button_link=&quot;#&quot;]\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br \/&gt;\n[\/mu_card]\n[mu_card image=&quot;https:\/\/www.marshall.edu\/marsha\/files\/2026\/03\/docs-2.jpg&quot; title=&quot;Student Center&quot; button_text=&quot;Learn More&quot; button_link=&quot;#&quot;]\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br \/&gt;\n[\/mu_card]\n[mu_card image=&quot;https:\/\/www.marshall.edu\/marsha\/files\/2026\/03\/docs-3.jpg&quot; title=&quot;Recreation Center&quot; button_text=&quot;Learn More&quot; button_link=&quot;#&quot;]\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br \/&gt;\n[\/mu_card]\n[\/mu_cards]<\/code><\/pre>\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Cards Wrapper Shortcode Use &#091;mu_cards&#093; to wrap a group of &#091;mu_card&#093; shortcodes. The wrapper handles layout so you no longer need to use rows and columns to display cards side by side. mu_cards Parameters Cards Per Row (per_row): Controls how many cards appear per row at larger screen sizes. Accepts 2, 3, or 4. Without<\/p>\n","protected":false},"author":203,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-sidebar-left.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-495","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/pages\/495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/users\/203"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/comments?post=495"}],"version-history":[{"count":16,"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/pages\/495\/revisions"}],"predecessor-version":[{"id":892,"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/pages\/495\/revisions\/892"}],"wp:attachment":[{"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/media?parent=495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}