Headline 1 (H1)
In MultiEdit, the Page Header is automatically configured as the page's H1 for ADA compliance. A web page must only contain one H1 element, so do not apply the H1 tag to any body content.
Headline 2 (H2) through Headline 6 (H6):
Heading tags establish a logical, visual hierarchy for your page content. Always progress sequentially from H2 to H3 to H4 (without skipping levels) to ensure the site passes automated accessibility scans and remains compliant for screen readers.
Headline 2 (H2)
Primary section dividers across the page.
Headline 3 (H3)
Sub-sections beneath an H2 section.
Headline 4 (H4)
Nested sub-topics underneath an H3 section.
Headline 5 (H5)
Minor sub-groupings within an H4 section.
Headline 6 (H6)
Lowest structural level for deep sub-content.
In addition to standard layout components and custom modules, content managers can apply utility CSS classes directly to on-page elements (such as text, images, and links) using the Class drop-down menu in the Modern Campus CMS editor.
These classes enforce visual alignment with the Â鶹ŮÀÉ brand and ensure responsive performance across all screen sizes.
Utility Class Reference Guide
| Element | Utility Class Name | Visual Style & Result | Usage Guidelines |
|---|---|---|---|
| Images |
|
Automatically resizes images to 100%Â container width. The rounded variant adds subtle corner radii.
|
Mandatory for all body images to ensure responsive scaling across mobile, tablet, and desktop screens. |
| Headings |
ruled-header
|
Adds an Â鶹ŮÀÉ Red horizontal accent line directly beneath the heading text. | Use as a visual divider between consecutive rows of same-sized headlines or to establish section boundaries. |
| Quotes |
blockquote
|
Formats text with an Â鶹ŮÀÉ Red border rule and an integrated quotation mark icon. | Use for standalone quotes, faculty/student testimonials, or high-impact callouts. |
| Primary Links |
primary-button
|
Converts standard text links into a solid Â鶹ŮÀÉ Blue action button. | Use for primary calls to action when custom download/document components are not required. |
| Secondary Links |
secondary-button
|
Converts standard text links into a solid Â鶹ŮÀÉ Red action button. | Use sparingly. Reserved for secondary, high-urgency, or contrasting calls to action. |
Implementation Rules & Best Practices
1. Responsive Image Handling
-
Always apply
fluid-imageorfluid-image-roundedwhen inserting images directly into the body copy. -
Unstyled images risk breaking page layouts on mobile devices by overflowing their container boundaries.
-
Ensure all uploaded images remain purely photographic with zero embedded text, names, or dates to prevent awkward cropping across screen sizes.
2. Button Governance & Layout Restraints
While primary-button (Blue) and secondary-button (Red) provide quick styling for inline links, their usage is strictly regulated:
-
Standalone Usage: Buttons should be used selectively for isolated actions (e.g., a single link directing a user to a registration form or external portal) when dedicated components like the Content Download Component or Documents Component are not necessary.
-
Prohibited Layouts:
-
Do not stack multiple buttons vertically in succession.
-
Do not line up multiple buttons horizontally across a page.
-
Do not clutter a single page section with excessive button choices.
-
-
Red Button Restraint: Because Â鶹ŮÀÉ Red (
secondary-button) is a high-contrast accent color reserved for high-priority visual cues, it must be used only once on a page to maintain its visual weight and impact.
3. Text & Header Styling Reference
Available in the editor for styling inline body text, section headers, and block quotes. Applying these classes establishes a clear visual hierarchy and keeps page formatting consistent with the university's brand guidelines.
Ruled Heading
Ruled header can be used to add a distinct visual break with the Â鶹ŮÀÉ red to break up long pages with visual monotony.Â
Quote or Testimonial
Quotes and testimonials are styled as wonderful callouts to break up the reading on the page. These are not spotlight stories (see that chapter for longer form testimonial type content).