Marsha Docs

Card Shortcode

Note on Card

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:

  • RequiredImage (image): This is the URL of the image to be used. 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.

Card Shortcode Examples

Basic Card Example

Shortcode
HTML
Drinko Library
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[mu_card image="http://www.marshall.edu/ucomm/files/drinko.jpg" title="Drinko Library"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/mu_card]
<div class="border border-gray-200 rounded shadow flex flex-col max-w-md">
    <img src="http://www.marshall.edu/ucomm/files/drinko.jpg">
    <div class="px-6 py-6">
        <div class="font-semibold text-xl">Drinko Library</div>
        <div class="my-2">
            Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard

Card with Button Example

Shortcode
HTML
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="http://www.marshall.edu/ucomm/files/drinko.jpg" title="Drinko Library" button_text="Visit Drinko Library" button_link="#"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/mu_card]
<div class="border border-gray-200 rounded shadow flex flex-col max-w-md">
    <img src="http://www.marshall.edu/ucomm/files/drinko.jpg">
    <div class="px-6 py-6">
        <div class="font-semibold text-xl">Drinko Library</div>
    <div class="my-2">
        Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <a href="#" class="btn btn-green mt-5">Visit Drinko Library</a>
    </div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard