Marsha Docs

Color Block Section

The color block displays a full-width gradient section with a title, optional body text, an optional image, and up to two call-to-action buttons.

The color block shortcode is only available on the Full Width page template. It will not render on the default or sidebar templates.

The color block should not be the first element on a page, and your page should not consist primarily of color blocks. Use them to break up sections alongside other components or body text.

Color Block Shortcode

mu_color_block Parameters

  • RequiredColor (color): The background gradient. Accepts green (default) or gray.
  • RequiredTitle (title): The section heading. Rendered as an h2 — do not add a separate h2 before the shortcode.
  • Subtitle (subtitle): Optional. A short line of text displayed below the title. Limited to 325 characters.
  • Image (image): Optional. URL of an image displayed to the left of the content on desktop and above it on mobile.
  • Primary Button Text (primary_button_text): Optional. Text for the primary button. Should be a call to action (e.g. Learn More, Apply Now).
  • Primary Button URL (primary_button_url): Optional. URL for the primary button.
  • Secondary Button Text (secondary_button_text): Optional. Text for the secondary button.
  • Secondary Button URL (secondary_button_url): Optional. URL for the secondary button.
  • Arrow (arrow): Optional. Set to white to display a downward-pointing white arrow at the top of the section, visually connecting it to the section above.
  • Size (size): Optional. Controls the height of the block. Accepts normal (default), tall, short, or thin.
  • Content: Optional. Body text or HTML placed between the opening and closing tags, displayed below the title.

Color Block Shortcode Examples

Green with Button

This feature is only available by using the Full Width or Full Width (Hero) template.
Shortcode 
[mu_color_block color="green" title="Ready to Apply?" primary_button_text="Start Your Application" primary_button_url="https://www.marshall.edu/admissions/apply/"]Marshall University offers more than 240 degree programs across eight colleges. Find the right fit for you.[/mu_color_block]

Green with Arrow and Image

This feature is only available by using the Full Width or Full Width (Hero) template.
Shortcode 
[mu_color_block color="green" arrow="white" title="Your Next Steps" image="https://www.marshall.edu/wp-content/uploads/campus.jpg" primary_button_text="Apply Now" primary_button_url="https://www.marshall.edu/admissions/apply/" secondary_button_text="Request Info" secondary_button_url="https://www.marshall.edu/admissions/request-info/"]Ready to become a member of the Thundering Herd? We’re here to help you every step of the way.[/mu_color_block]

Gray with Subtitle

This feature is only available by using the Full Width or Full Width (Hero) template.
Shortcode 
[mu_color_block color="gray" title="Stay Up To Date" subtitle="Find out what's happening at Marshall throughout the year."]This is content inside the color block.[/mu_color_block]