Marsha Docs

Alert Shortcode

The icon box allows you to post a feature box with an SVG icon and title that links to a different page.

You can use any of the icons included below. if there's a certain icon you want to use, but it is not listed below contact webmaster@marshall.edu.

Note: This shortcode, if used in the body of the page, should be used with the columns shortcode. There should not be more than 4 icon boxes per row.

Icon Box Shortcode Parameters

The parameters for the icon box shortcode:

  • RequiredTitle (title): The title parameter is required and will should be no more than 2-3 words.
  • RequiredLink (link): The link field is required and should be the full URL path of the page you wish to link.
  • RequiredIcons (icon): The icon will display above the title, centered in the box. (see list below).

Icons

Table listing the available icons to use with the icon box shortcode.
Icon Title Icon Example
calendar
announcement
wifi
question
list
coffee
book
teacher
computer
email
phone
building
cap
chart
users
certificate

Icon Box Shortcode Examples

Icon Box with Computer Icon

Shortcode
HTML
[mu_icon_box title="Online Learning" icon="computer" link="http://www.marshall.edu/online-learning/"]
<div class="bg-green hover:bg-green-dark py-6 rounded">
    <a class="text-white hover:no-underline" href="http://www.marshall.edu/online-learning/">
        <svg class=" fill-current h-24 w-24 mt-4 mx-auto mb-3 lg:mb-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"></path></svg>
        <div class="text-xl font-semibold uppercase w-full text-center">Online Learning</div>
    </a>
</div>
Copy Code to Clipboard
Copy Code to Clipboard

Icon Box with Computer Icon

Shortcode
HTML
[efsrow]
    [efscolumn sm="12" lg="4"][mu_icon_box title="Online Learning" icon="computer" link="http://www.marshall.edu/online-learning/"][/efscolumn]
    [efscolumn sm="12" lg="4"][mu_icon_box title="FAQs" icon="question" link="https://www.marshall.edu/recruitment/faqs/"][/efscolumn]
    [efscolumn sm="12" lg="4"][mu_icon_box title="Bookstore" icon="book" link="https://www.bkstr.com/marshallstore/home"][/efscolumn]
[/efsrow]
<div class="marsha-row flex flex-wrap -mx-2 lg:-mx-6 my-6 ">
    <div class="columns small-12 medium-12 large-4 lg:px-6 mt-6 lg:mt-0">
        <div class="">
            <div class="bg-green hover:bg-green-dark py-6 rounded">
                <a class="text-white hover:no-underline" href="http://www.marshall.edu/online-learning/">
                    <svg class=" fill-current h-24 w-24 mt-4 mx-auto mb-3 lg:mb-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"></path></svg>
                    <div class="text-xl font-semibold uppercase w-full text-center">Online Learning</div>
                </a>
            </div>
        </div>
    </div>
    <div class="columns small-12 medium-12 large-4 lg:px-6 mt-6 lg:mt-0">
        <div class="">
            <div class="bg-green hover:bg-green-dark py-6 rounded">
                <a class="text-white hover:no-underline" href="https://www.marshall.edu/recruitment/faqs/">
                    <svg class=" fill-current h-24 w-24 mt-4 mx-auto mb-3 lg:mb-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm2-13c0 .28-.21.8-.42 1L10 9.58c-.57.58-1 1.6-1 2.42v1h2v-1c0-.29.21-.8.42-1L13 9.42c.57-.58 1-1.6 1-2.42a4 4 0 1 0-8 0h2a2 2 0 1 1 4 0zm-3 8v2h2v-2H9z"></path></svg>
                    <div class="text-xl font-semibold uppercase w-full text-center">FAQs</div>
                </a>
            </div>
        </div>
    </div>
    <div class="columns small-12 medium-12 large-4 lg:px-6 mt-6 lg:mt-0">
        <div class="">
            <div class="bg-green hover:bg-green-dark py-6 rounded">
                <a class="text-white hover:no-underline" href="https://www.bkstr.com/marshallstore/home">
                    <svg class=" fill-current h-24 w-24 mt-4 mx-auto mb-3 lg:mb-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"></path></svg>
                    <div class="text-xl font-semibold uppercase w-full text-center">Bookstore</div>
                </a>
            </div>
        </div>
    </div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard