Marsha Docs

Cards

Note on Cards
Cards should only be used within columns. You can learn about creating columns in this documentation.

Card Shortcode Parameters

The parameters for the Card shortcode:

  • 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: If you are using the card shortcode in columns and you want your titles to align horizontally, all of your images for each card should be the exact same size. 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.
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
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

Card Shortcode Examples

Basic Card Example

Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[mu_card title="Drinko Library"]
Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
Copy Code to Clipboard

Basic Card with Image Example

Drinko Library
Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[mu_card image="https://www.marshall.edu/marsha/files/2021/11/drinko.jpeg" title="Drinko Library"]
Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
Copy Code to Clipboard

Card with Image and Button Example

Drinko Library
Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Visit Drinko Library
[mu_card image="https://www.marshall.edu/marsha/files/2021/11/drinko.jpeg" title="Drinko Library" button_text="Visit Drinko Library" button_link="#"]
Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
Copy Code to Clipboard

Card with Image, Icon and Button Example

Drinko Library
Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Visit Drinko Library
[mu_card icon="checkmark" image="https://www.marshall.edu/marsha/files/2021/11/drinko.jpeg" title="Drinko Library" button_text="Visit Drinko Library" button_link="#"]
Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
[/mu_card]
Copy Code to Clipboard