Component Library
Every block below is rendered live from the same stylesheet that builds this site. Resize the viewport, switch on the editor x‑ray to see what is locked, and read the contrast audit under each block. This is what "editors cannot break the brand" looks like in practice.
Masthead
Gutenberg pattern · Drupal SDCA headline the editor writes
One supporting sentence the editor also writes. Everything else, from the tint to the type, is set by the system.
Call to actionEditors can change
- Kicker, headline, supporting text
- Button label and destination
Locked by the system
- Odyssey-derived tint, type pairing, spacing
- One masthead per page, enforced
Figures band
Dark room variantEditors can change
- Figures, labels, and source note
- Three or four columns
Locked by the system
- Arch Black field, Lake Herrick labels
- No red text on black, per the UGA brand rule
Notice banner
Advisory · UrgentSample notice: representative copy for demonstration. The editor picks the variant and writes the message.
Sample urgent notice: the Bulldog Red key is reserved for messages that earn it.
Editors can change
- Message text and optional link
- Variant: advisory or urgent
Locked by the system
- Key colors and placement rules
- No stacking more than two notices
Accordion
Native disclosure, keyboard-firstHow does this block stay accessible?
Can an editor nest layouts inside it?
What happens on mobile?
Editors can change
- Questions, answers, row order
Locked by the system
- Disclosure semantics and hit areas
- Marker styling, I‑Bar register
Pull quote
I-Bar element, from the UGA kitA sample quotation an editor might feature, set the only way the system allows: beside a pillar of the Arch.Sample attribution, demonstration only
Editors can change
- Quotation and attribution
Locked by the system
- The I‑Bar rule, italic register, measure
Data table
Responsive, scoped headers| Measure | Figure | As of |
|---|---|---|
| Enrollment | 43,887 | Fall 2025 |
| Undergraduates | 32,824 | Fall 2025 |
| R&D expenditures | $654 million | FY2025 |
| Endowment | $2.18 billion | 2025 |
Editors can change
- Rows, columns, caption
Locked by the system
- Header styling and stripe rhythm
- Horizontal scroll fallback on small screens
Event list
Date-led rows- SampleA lecture an editor might list Sample venue, demonstration data
- SampleAn information session Sample venue, demonstration data
- SampleA gallery opening Sample venue, demonstration data
Editors can change
- Events, dates, venues, links
Locked by the system
- Date lockup in Bulldog Red, row rhythm
Call-to-action banner
One per page, enforcedThe one thing this page wants you to do
Sample supporting line. The system allows exactly one of these per page, so it still means something.
Editors can change
- Headline, supporting line, button
Locked by the system
- Bulldog Red field, white separation rule
- Frequency: one per page
What the x-ray shows
Switch on the editor x‑ray above and every block reveals its governance: which properties are design tokens, which rules come straight from the UGA brand guide (no red text on black, accents held under roughly 20 percent of a layout, the I‑Bar used as the emphasis element), and which constraints are enforced at the editor level rather than by policy memo.
In WordPress, these locks are real: block patterns with lock attributes, a curated block allowlist, and theme.json tokens in place of free color pickers. In Drupal, the same blocks ship as single-directory components with Layout Builder restrictions. Either way, a campus editor can publish for years without ever being able to drift off brand.
Type & palette, by the book
The palette uses UGA's official color names and values: Arch Black, Bulldog Red, Chapel Bell White, with Stegeman, Creamery, and Sanford as neutrals and Lake Herrick, Olympic, Odyssey, Hedges, and Glory Glory as accents. Every text pair on this site is published with its measured contrast ratio.
Production typography is Oswald (light and medium, the only approved weights) with Merriweather for body copy, exactly as the Visual Identity System prescribes. This demonstration sets headlines in Barlow Condensed, a condensed grotesk in the same register, so that Stoa's portfolio prototypes remain typographically distinct from one another; the body face here is Merriweather, UGA's own approved serif.
Ships through your pipeline
Pantheon
- Custom upstream or repository-based workflow, dev to test to live
- Multidev environments for each campus-unit engagement
- Automated core updates ride the upstream; blocks version independently
WPEngine
- User Portal deploys with staged environments
- Git-driven pipeline for the theme and block package
- SFTP access reserved for controlled hotfixes
Components ship as one versioned package per platform: a WordPress theme with block patterns and theme.json tokens, or a Drupal theme with single-directory components and Twig templates. Central accounts stay central; unit deployments follow each department's designated pipeline.