{"id":519,"date":"2021-11-10T13:21:05","date_gmt":"2021-11-10T18:21:05","guid":{"rendered":"https:\/\/www.marshall.edu\/website\/?page_id=519"},"modified":"2026-03-02T14:28:48","modified_gmt":"2026-03-02T19:28:48","slug":"link-card","status":"publish","type":"page","link":"https:\/\/www.marshall.edu\/marsha\/link-card\/","title":{"rendered":"Link Card"},"content":{"rendered":"<h2>Link Cards Wrapper Shortcode<\/h2>\n<p>Use <code>&#091;mu_link_cards&#093;<\/code> to wrap a group of <code>&#091;mu_link_card&#093;<\/code> shortcodes. The wrapper handles layout so you no longer need to use rows and columns to display link cards side by side.<\/p>\n<h3>mu_link_cards Parameters<\/h3>\n<ul>\n<li><strong>Link Cards Per Row (per_row):<\/strong> Controls how many link cards appear per row at larger screen sizes. Accepts <code>2<\/code>, <code>3<\/code>, or <code>4<\/code>. Without this attribute, link 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<\/ul>\n<h2>Link Card Shortcode<\/h2>\n<h3>mu_link_card Parameters<\/h3>\n<ul>\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>URL (url): <\/strong>This should be the full URL of the page you want to link to.<\/li>\n<li><strong>Background Image (background_image):<\/strong> Optional. The URL of an image to use as the card background.<\/li>\n<li><strong>Background Position (background_position):<\/strong> Optional. CSS background-position value for the background image (e.g. <code>50% 30%<\/code>). Defaults to <code>0% 0%<\/code>.<\/li>\n<\/ul>\n<h2>Link Card Shortcode Examples<\/h2>\n<h3>Three Link 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<div class=\"flex flex-wrap justify-center gap-8 link-cards-per-row-3\">\n\t\n<div class=\"link-card flex flex-col\">\n\t<a class=\"block bg-green h-full text-white hc:text-gray-900 contrast-more:text-gray-900 group py-8 px-6 rounded-2xl no-underline transition-all duration-300 ease-out hover:shadow-xl hover:shadow-green\/25 relative overflow-hidden w-full\" href=\"https:\/\/marshall.test\/marsha\/admissions\/\">\n\t\t\n\t\t<span class=\"block text-xl font-bold uppercase tracking-wider w-full text-center mb-2\">Admissions Website<\/span>\n\n\t\t<span class=\"bg-white\/15 text-white w-8 h-8 rounded-full flex items-center justify-center mx-auto mt-4 transition-all duration-300 ease-out group-hover:translate-x-1\">\n\t\t\t<svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n\t\t<\/span>\n\t<\/a>\n<\/div>\n\n<div class=\"link-card flex flex-col\">\n\t<a class=\"block bg-green h-full text-white hc:text-gray-900 contrast-more:text-gray-900 group py-8 px-6 rounded-2xl no-underline transition-all duration-300 ease-out hover:shadow-xl hover:shadow-green\/25 relative overflow-hidden w-full\" href=\"https:\/\/marshall.test\/marsha\/admissions\/forms\/\">\n\t\t\n\t\t<span class=\"block text-xl font-bold uppercase tracking-wider w-full text-center mb-2\">Admissions Forms<\/span>\n\n\t\t<span class=\"bg-white\/15 text-white w-8 h-8 rounded-full flex items-center justify-center mx-auto mt-4 transition-all duration-300 ease-out group-hover:translate-x-1\">\n\t\t\t<svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n\t\t<\/span>\n\t<\/a>\n<\/div>\n\n<div class=\"link-card flex flex-col\">\n\t<a class=\"block bg-green h-full text-white hc:text-gray-900 contrast-more:text-gray-900 group py-8 px-6 rounded-2xl no-underline transition-all duration-300 ease-out hover:shadow-xl hover:shadow-green\/25 relative overflow-hidden w-full\" href=\"https:\/\/marshall.test\/marsha\/admissions\/contact-us\/\">\n\t\t\n\t\t<span class=\"block text-xl font-bold uppercase tracking-wider w-full text-center mb-2\">Contact Admissions<\/span>\n\n\t\t<span class=\"bg-white\/15 text-white w-8 h-8 rounded-full flex items-center justify-center mx-auto mt-4 transition-all duration-300 ease-out group-hover:translate-x-1\">\n\t\t\t<svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n\t\t<\/span>\n\t<\/a>\n<\/div>\n\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_link_cards per_row=&quot;3&quot;]\n[mu_link_card url=&quot;https:\/\/marshall.test\/marsha\/admissions\/&quot;]Admissions Website[\/mu_link_card]\n[mu_link_card url=&quot;https:\/\/marshall.test\/marsha\/admissions\/forms\/&quot;]Admissions Forms[\/mu_link_card]\n[mu_link_card url=&quot;https:\/\/marshall.test\/marsha\/admissions\/contact-us\/&quot;]Contact Admissions[\/mu_link_card]\n[\/mu_link_cards]<\/code><\/pre>\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n<h3>Link Cards with Background Images 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<div class=\"flex flex-wrap justify-center gap-8 link-cards-per-row-3\">\n\t\n<a href=\"https:\/\/marshall.test\/marsha\/admissions\/\" class=\"link-card group block no-underline overflow-hidden relative rounded-2xl min-h-64 transition-all duration-300 ease-out hover:-translate-y-2 hover:shadow-xl\">\n\n\t\t<div class=\"absolute inset-0 z-0 overflow-hidden\">\n\t\t<img\n\t\t\tclass=\"h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n\t\t\tstyle=\"object-position: 0% 0%\"\n\t\t\tsrc=\"https:\/\/www.marshall.edu\/marsha\/files\/2026\/03\/docs-1.jpg\"\n\t\t\talt=\"Admissions Website\"\n\t\t\/>\n\t<\/div>\n\n\t\t<div class=\"absolute inset-0 z-1 bg-linear-to-t from-gray-900\/70 via-gray-900\/35 to-gray-900\/10 transition-all duration-300 group-hover:from-gray-900\/75 group-hover:via-gray-900\/40\"><\/div>\n\n\t\t<div class=\"relative z-2 flex flex-col items-center justify-end h-full w-full px-6 py-7\">\n\t\t<span class=\"text-white font-bold text-xl text-center uppercase tracking-wide lg:text-2xl\">Admissions Website<\/span>\n\n\t\t<div class=\"bg-green h-0.75 w-8 mt-2.5 mx-auto rounded-full transition-all duration-300 ease-out group-hover:w-14\"><\/div>\n\n\t\t<span class=\"flex items-center justify-center w-9 h-9 rounded-full bg-green mt-3.5 transition-all duration-300 ease-out lg:opacity-0 lg:translate-y-2 lg:group-hover:opacity-100 lg:group-hover:translate-y-0\">\n\t\t\t<svg class=\"w-4 h-4 text-white\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n\t\t<\/span>\n\t<\/div>\n\n<\/a>\n\n<a href=\"https:\/\/marshall.test\/marsha\/admissions\/forms\/\" class=\"link-card group block no-underline overflow-hidden relative rounded-2xl min-h-64 transition-all duration-300 ease-out hover:-translate-y-2 hover:shadow-xl\">\n\n\t\t<div class=\"absolute inset-0 z-0 overflow-hidden\">\n\t\t<img\n\t\t\tclass=\"h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n\t\t\tstyle=\"object-position: 0% 0%\"\n\t\t\tsrc=\"https:\/\/www.marshall.edu\/marsha\/files\/2026\/03\/docs-2.jpg\"\n\t\t\talt=\"Admissions Forms\"\n\t\t\/>\n\t<\/div>\n\n\t\t<div class=\"absolute inset-0 z-1 bg-linear-to-t from-gray-900\/70 via-gray-900\/35 to-gray-900\/10 transition-all duration-300 group-hover:from-gray-900\/75 group-hover:via-gray-900\/40\"><\/div>\n\n\t\t<div class=\"relative z-2 flex flex-col items-center justify-end h-full w-full px-6 py-7\">\n\t\t<span class=\"text-white font-bold text-xl text-center uppercase tracking-wide lg:text-2xl\">Admissions Forms<\/span>\n\n\t\t<div class=\"bg-green h-0.75 w-8 mt-2.5 mx-auto rounded-full transition-all duration-300 ease-out group-hover:w-14\"><\/div>\n\n\t\t<span class=\"flex items-center justify-center w-9 h-9 rounded-full bg-green mt-3.5 transition-all duration-300 ease-out lg:opacity-0 lg:translate-y-2 lg:group-hover:opacity-100 lg:group-hover:translate-y-0\">\n\t\t\t<svg class=\"w-4 h-4 text-white\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n\t\t<\/span>\n\t<\/div>\n\n<\/a>\n\n<a href=\"https:\/\/marshall.test\/marsha\/admissions\/contact-us\/\" class=\"link-card group block no-underline overflow-hidden relative rounded-2xl min-h-64 transition-all duration-300 ease-out hover:-translate-y-2 hover:shadow-xl\">\n\n\t\t<div class=\"absolute inset-0 z-0 overflow-hidden\">\n\t\t<img\n\t\t\tclass=\"h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n\t\t\tstyle=\"object-position: 0% 0%\"\n\t\t\tsrc=\"https:\/\/www.marshall.edu\/marsha\/files\/2026\/03\/docs-3.jpg\"\n\t\t\talt=\"Contact Admissions\"\n\t\t\/>\n\t<\/div>\n\n\t\t<div class=\"absolute inset-0 z-1 bg-linear-to-t from-gray-900\/70 via-gray-900\/35 to-gray-900\/10 transition-all duration-300 group-hover:from-gray-900\/75 group-hover:via-gray-900\/40\"><\/div>\n\n\t\t<div class=\"relative z-2 flex flex-col items-center justify-end h-full w-full px-6 py-7\">\n\t\t<span class=\"text-white font-bold text-xl text-center uppercase tracking-wide lg:text-2xl\">Contact Admissions<\/span>\n\n\t\t<div class=\"bg-green h-0.75 w-8 mt-2.5 mx-auto rounded-full transition-all duration-300 ease-out group-hover:w-14\"><\/div>\n\n\t\t<span class=\"flex items-center justify-center w-9 h-9 rounded-full bg-green mt-3.5 transition-all duration-300 ease-out lg:opacity-0 lg:translate-y-2 lg:group-hover:opacity-100 lg:group-hover:translate-y-0\">\n\t\t\t<svg class=\"w-4 h-4 text-white\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n\t\t<\/span>\n\t<\/div>\n\n<\/a>\n\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_link_cards per_row=&quot;3&quot;]\n[mu_link_card url=&quot;https:\/\/marshall.test\/marsha\/admissions\/&quot; background_image=&quot;http:\/\/www.marshall.edu\/marsha\/files\/2026\/03\/docs-1.jpg&quot;]Admissions Website[\/mu_link_card]\n[mu_link_card url=&quot;https:\/\/marshall.test\/marsha\/admissions\/forms\/&quot; background_image=&quot;http:\/\/www.marshall.edu\/marsha\/files\/2026\/03\/docs-2.jpg&quot;]Admissions Forms[\/mu_link_card]\n[mu_link_card url=&quot;https:\/\/marshall.test\/marsha\/admissions\/contact-us\/&quot; background_image=&quot;http:\/\/www.marshall.edu\/marsha\/files\/2026\/03\/docs-3.jpg&quot;]Contact Admissions[\/mu_link_card]\n[\/mu_link_cards]<\/code><\/pre>\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Link Cards Wrapper Shortcode Use &#091;mu_link_cards&#093; to wrap a group of &#091;mu_link_card&#093; shortcodes. The wrapper handles layout so you no longer need to use rows and columns to display link cards side by side. mu_link_cards Parameters Link Cards Per Row (per_row): Controls how many link cards appear per row at larger screen sizes. Accepts 2,<\/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-519","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/pages\/519","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=519"}],"version-history":[{"count":4,"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/pages\/519\/revisions"}],"predecessor-version":[{"id":878,"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/pages\/519\/revisions\/878"}],"wp:attachment":[{"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/media?parent=519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}