CMS Style Guide

Ornate door

The CMS Style Guide is a user-friendly resource designed to help you navigate and utilize the various configurable layouts within our content management system.

Each page in this guide illustrates different component layouts, with descriptions and examples to demonstrate how they can be adapted for various types of content. With clear instructions and videos that show how to implement and modify layouts, along with practical use cases, the style guide will empower you to:

  • Choose the right layout for each content type.
  • Customize layouts to fit the needs of your audience.
  • Maintain a cohesive and visually appealing design across all pages.

Whether you’re an experienced editor or new to the system, this guide will help you optimize your content presentation and enhance the experience for our site visitors.

Full-Width Layout and Components

Components allow content editors to build flexible and dynamic page layouts by using predefined content blocks such as text, images, and videos. Instead of relying on a single WYSIWYG editor, editors can combine and reorder these blocks to create rich, structured layouts. This modular approach provides greater flexibility for content creation while maintaining design consistency and responsiveness across the site.

Example Full-Width Page

The image shows a webpage from St. Edward's University titled "Visit." It features a large banner with a photo of a campus building and the sun shining through trees. Below, there's a section about "Campus Tours and Events," highlighting information on campus tours with a link for further exploration. The design is clean with a modern layout and large imagery.

The full-page layout used for Visit Us illustrates many components: Flexible Page Hero, Content Reveal, Accordions, WYSIWYG, Story Grid, Card Grid, and Link List.

Full-Width Components