Intro to Components

Components are the primary way pages are built in the Modern Campus CMS. They are pre-designed content blocks that let you add structured, styled content to a page without touching code, ensuring consistency, accessibility, and responsiveness across the entire site.

What’s a Component? Why Are They Used?

A component is a reusable, form-driven element. Instead of designing layouts manually, you fill out fields such as headings, text, images, or links, and the CMS renders that content using an approved layout and styling. Each component is purpose-built to present information in a clear, predictable way.

Components help maintain visual and structural consistency across stonybrook.edu, support accessibility and responsive behavior by default, reduce custom styling and layout errors, and make pages easier to update and maintain over time. They also allow editors to focus on content rather than design decisions.

Common Examples

You’ll regularly see components used for card-based navigation and related links, stats or key figures, banners and section dividers, image or media displays, and calls to action. Most pages combine multiple components to create a clear content flow.

How Components Work on a Page

When editing a page, components are added within sections. You choose a component from the available categories, complete its fields, and save. The CMS handles spacing, layout, and styling automatically, and the component adjusts for different screen sizes without extra work from the editor.

Best Practices

Use components for their intended purpose rather than trying to force a layout, review component-specific guidance before choosing one, avoid duplicating similar components on the same page, and keep content concise and balanced so components display cleanly.

Learn More

This Components section includes demos and how-to guides for each custom component available at Stony Brook, along with configuration tips and usage recommendations to help you choose the right tool for each page.