Intro to Snippets

Snippets are reusable layout and content building blocks that help you assemble pages more efficiently in Modern Campus CMS. Think of snippets as pre-built page sections — pieces of a page you can insert, customize, and move on.

Snippets help keep your site consistent, accessible, and aligned with Stony Brook’s design standards, especially when building structured page layouts.

What are Snippets?

Snippets are predefined layout patterns and content sections that can be reused across pages. They are most commonly used for layout structure, such as multi-column sections, background panels, or content groupings.

Snippets allow you to add consistent page sections without manually recreating layouts each time.

Why Use Snippets

Using snippets helps you:

• Build pages faster with fewer repetitive steps
• Maintain consistent spacing and layout across pages
• Reduce formatting and layout errors
• Focus on writing content instead of adjusting design

Snippets are especially useful when creating pages with multiple structured sections.

Snippets vs. Components

Snippets and components work together but serve different purposes.

Snippets

• Primarily layout-focused
• Used to structure page sections
• Less configurable
• Ideal for content organization

Components

• Content-focused or interactive
• Used for cards, carousels, feeds, and stats
• More configurable
• Ideal for displaying information in specific formats

Example:
A 2 Column Container snippet creates a consistent two-column layout.
A Cards component displays structured, styled content within that layout.

How to Insert a Snippet

1. Open the page in Edit mode.
2. Place your cursor where the snippet should appear.
3. Select Insert Snippet from the toolbar.
4. Choose the category 1-snippet and then pick the snippet you want to use from the list.
5. Replace the placeholder content with your own text, images, or links.
6. Preview and save your page.

Snippets Available

The snippets available for building page layouts include:

2 Column Container
3 Column Container
Centered 1 Column Section
Content Panel Over Background Image
Dept Sidebar Text Area
Dept Table Styler
Facts and Stats 3 or 4 column
Interior Hero
Tabbed Content Boxes
Video Section
ZigZag - Content and Image

Tips & Advice

• Use snippets to create layout structure, not standalone content
• Always add or edit content after inserting a snippet
• Avoid manually editing snippet structure or markup
• Preview your page after adding multiple snippets to check spacing and stacking
• Combine snippets with components for richer layouts