Cards Wrapper Shortcode
Use [mu_cards] to wrap a group of [mu_card] 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, or4. Without this attribute, cards will stack and grow to fill available width. - Extra Classes (class): Optional. Any additional CSS classes to apply to the wrapper element (e.g.
max-w-5xl mx-auto). - Preheading (preheading): Optional. Small uppercase text displayed above the heading.
- Heading (heading): Optional. A heading displayed above the card group.
- Subheading (subheading): Optional. Descriptive text displayed below the heading.
Card Shortcode
mu_card Parameters
- Image (image): This is the URL of the image to be used. This image must be in your site’s Media Library for it to load properly. Note: Your images should be between 450 and 600 pixels in width.
- RequiredTitle (title): This should be the title of the card, it’ll display in semibold directly below the image and before the card content.
- Button Text (button_text): 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. Note: All button text should be calls to action and should not include “Click Here” in the copy.
- Button Link (button_link): This should be the full URL of the page you want to link to from the button.
- Card Basis (card_basis): Optional. A CSS flex-basis utility class controlling the card’s width within a flex row. This is set automatically when using
[mu_cards per_row="..."]— you generally do not need to set this manually.
Dos
- Keep the title brief, 3 to 5 words
- Use the proper sized image
- Keep the card body limited to at most a couple paragraphs
- Use
[mu_cards per_row="2|3|4"]to control card layout
Don'ts
- Use cards for the majority of a page’s content
- Use different size images in a collection of cards
- Include anything other than text, lists, or links in the content
- Set
card_basismanually when using[mu_cards]
Cards Shortcode Examples
Basic Cards Example (no fixed per-row)
Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Shortcode
[mu_cards]
[mu_card title="Drinko Library"]
Lorem ipsum dolor sit amet, consectetur <a href="/marsha/">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
[mu_card title="Drinko Library"]
Lorem ipsum dolor sit amet, consectetur <a href="/marsha/">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
[mu_card title="Drinko Library"]
Lorem ipsum dolor sit amet, consectetur <a href="/marsha/">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
[/mu_cards]Three Cards Per Row Example
Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Shortcode
[mu_cards per_row="3"]
[mu_card title="Drinko Library"]
Lorem ipsum dolor sit amet, consectetur <a href="/marsha/">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
[mu_card title="Drinko Library"]
Lorem ipsum dolor sit amet, consectetur <a href="/marsha/">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
[mu_card title="Drinko Library"]
Lorem ipsum dolor sit amet, consectetur <a href="/marsha/">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
[/mu_cards]Basic Card with Image Example
Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Shortcode
[mu_cards]
[mu_card image="https://www.marshall.edu/marsha/files/2026/03/docs-1.jpg" title="Drinko Library"]
Lorem ipsum dolor sit amet, consectetur <a href="/marsha/">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
[/mu_cards]Card with Image and Button Example
Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Shortcode
[mu_cards]
[mu_card image="https://www.marshall.edu/marsha/files/2026/03/docs-1.jpg" title="Drinko Library" button_text="Visit Drinko Library" button_link="#"]
Lorem ipsum dolor sit amet, consectetur <a href="/marsha/">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
[/mu_cards]Card with Image, Icon and Button Example
Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Shortcode
[mu_cards]
[mu_card icon="checkmark" image="https://www.marshall.edu/marsha/files/2026/03/docs-2.jpg" title="Drinko Library" button_text="Visit Drinko Library" button_link="#"]
Lorem ipsum dolor sit amet, consectetur <a href="/marsha/">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
[/mu_cards]Cards with Heading Example
Our Facilities
Explore Campus
Discover the spaces and resources available to Marshall students.
Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Student Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Recreation Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Shortcode
[mu_cards per_row="3" preheading="Our Facilities" heading="Explore Campus" subheading="Discover the spaces and resources available to Marshall students."]
[mu_card image="https://www.marshall.edu/marsha/files/2026/03/docs-1.jpg" title="Drinko Library" button_text="Learn More" button_link="#"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
[mu_card image="https://www.marshall.edu/marsha/files/2026/03/docs-2.jpg" title="Student Center" button_text="Learn More" button_link="#"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
[mu_card image="https://www.marshall.edu/marsha/files/2026/03/docs-3.jpg" title="Recreation Center" button_text="Learn More" button_link="#"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
[/mu_cards]