Building a Public Page

This guide covers using the design system to build public-facing pages, typically within a CMS like WordPress or Drupal. The CMS handles the HTML document shell, asset loading, and often the header and footer — your job is to author page content using the correct design system markup and classes.

If you are building content for the LMS, see Building LMS Content instead.

How the Design System Integrates with Your CMS

In most setups, the design system CSS, JavaScript, and Google Fonts are loaded globally by the CMS theme. This means:

• You do not need to add <link> or <script> tags to each page.
• The University Header, site Header, and Footer are typically rendered by the theme, not by individual page content.
• The no-js / js class swap and the cmp-skip-to-content link are handled at the theme level.

Your focus is on the content inside <main> — the body of the page.

If your CMS setup does not load the design system globally, see the Installation and Setup page for the CDN links to add.

Page Structure

The CMS theme typically renders the structural shell. The content you author goes inside the main content area:

<!-- Rendered by the CMS theme: -->
<!-- <a class="cmp-skip-to-content" href="#main-content">Skip to main content</a> -->
<!-- <div class="js-site"> -->
<!--   University Header -->
<!--   Site Header -->

<main id="main-content">
  <!-- Your page content goes here -->
</main>

<!-- Rendered by the CMS theme: -->
<!--   Footer -->
<!-- </div> -->

If your CMS gives you control over the full page template, include the structural components as described above. See the component pages for the full markup:

• University Header
• Header
• Footer

Controlling Content Width

Wrap your content in a width-constraining object class to keep it centered and readable:

Class	Max width	Best for
obj-reading-width	60 rem (960 px)	Long-form prose, articles
obj-content-width	75 rem (1200 px)	Mixed content, cards, forms
obj-limit-width	90 rem (1440 px)	Full-width sections, hero areas

<div class="obj-reading-width util-margin-vert-xl">
  <h1>Page Title</h1>
  <p>
    Introductory paragraph. The design system styles headings and paragraphs
    automatically — no extra classes needed for basic typography.
  </p>

  <h2>Section Heading</h2>
  <p class="cmp-paragraph util-margin-bottom-lg">
    Use <code>cmp-paragraph</code> for styled paragraph blocks and utility
    classes like <code>util-margin-bottom-lg</code> to control spacing.
  </p>
</div>

Spacing

Use spacing utilities to control margins and padding. The spacing scale provides consistent rhythm:

Value	Size
none	0
xs	0.25 rem
sm	0.5 rem
md	1 rem
lg	1.5 rem
xl	2.5 rem
xxl	3.5 rem

Common patterns:

<!-- Vertical margin on a section -->
<section class="util-margin-vert-xl">...</section>

<!-- Bottom margin on an element, reduced at print -->
<div class="util-margin-bottom-xxl util-margin-bottom-lg@print">...</div>

<!-- Horizontal padding -->
<div class="util-pad-horiz-md">...</div>

Adding Components

Components are self-contained UI patterns. Each component page in the documentation shows the required HTML structure. Here is an example using a content section with a video embed:

<div class="obj-reading-width util-margin-vert-xxl util-margin-vert-lg@print">
  <h2>Why UGA Online?</h2>
  <p class="cmp-paragraph util-margin-bottom-xl">
    As a University of Georgia graduate, you earn a degree from a top public
    research university.
  </p>

  <div class="cmp-media">
    <iframe
      src="https://cdnapisec.kaltura.com/p/..."
      title="University of Georgia online learning"
      allowfullscreen
    ></iframe>
  </div>
</div>

For interactive components — accordions, carousels, tabs — the design system JavaScript initializes them automatically when scripts.js loads. Just provide the correct HTML structure and js- hook classes, and the script handles the rest.

Browse all available components in the Components section of the sidebar.

Full-Width Color Bands

To create a full-width background color band with constrained content inside, combine a background utility on an outer wrapper with a width object on an inner container:

<div class="util-background-light-gray util-pad-vert-xxl util-display-none@print">
  <div class="obj-content-width">
    <h2>Request Information</h2>
    <!-- form or other content -->
  </div>
</div>

This pattern is used for sections like the Request Info form band on the Homepage demo. Depending on your CMS template, you may need to ensure the outer wrapper is outside any width-constraining container so it can span the full viewport.

Complete Example

For a fully assembled page showing all of these pieces working together, see the Demo Pages.