{"id":670,"date":"2022-02-07T15:18:37","date_gmt":"2022-02-07T20:18:37","guid":{"rendered":"https:\/\/www.marshall.edu\/marsha\/?page_id=670"},"modified":"2026-03-02T14:03:59","modified_gmt":"2026-03-02T19:03:59","slug":"color-block-section","status":"publish","type":"page","link":"https:\/\/www.marshall.edu\/marsha\/color-block-section\/","title":{"rendered":"Color Block Section"},"content":{"rendered":"

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.<\/p>\n\n\t\n\n\t

\n\t\t
\n\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
<\/svg><\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\t\t\t
\n\t\t\t\t
The color block shortcode is only available on the Full Width<\/strong> page template. It will not render on the default or sidebar templates.<\/p>\n

The color block should not<\/strong> 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.<\/div>\n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<\/div>\n\t<\/div>\n<\/div>\n\n

Color Block Shortcode<\/h2>\n

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

    Color Block Shortcode Examples<\/h2>\n

    Green with Button<\/h3>\n\n
    \n\n\t\t\t
    \n\t\t\tThis feature is only available by using the Full Width or Full Width (Hero) template.\n\t\t<\/div>\n\t\n\t
    \n\t\t
    \n\t\t\tShortcode<\/span>\n\t\t\t copied = false, 2000)\"\n\t\t\t\tclass=\"flex items-center gap-1.5 px-3 py-1.5 rounded text-[11px] font-medium cursor-pointer transition-all duration-150\"\n\t\t\t\t:class=\"copied\n\t\t\t\t\t? 'bg-green\/20 text-green border border-green\/30'\n\t\t\t\t\t: 'bg-white\/8 text-white\/60 border border-white\/10 hover:bg-white\/14 hover:text-white\/90'\"\n\t\t\t\tstyle=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\"\n\t\t\t>\n\t\t\t\t