Snippets
Snippets are pieces of pre-coded HTML that you to customize with your content. Snippets provide an easy way to layout and organize content.
Snippets provide a fill-in-the-blank framework that you customize with your own content. Snippets are a fantastic tool to provide structure and organization to webpage content as well as ways layout content in different ways.
Insert a Snippet
- In Modern Campus CMS, navigate to the page and editable region where you want to insert a snippet.
- Click to place your cursor where you want the snippet to appear.
- Click the puzzle piece icon in the toolbar.
- Select the snippet you want to insert, then click the blue "Insert" button.
- The snippet will now appear in the editable area of the webpage.
- Edit the content in the snippet.
- Click the save icon to save all your edits.
Intro Section & Main Body Snippets
The snippets in this section can be used in either the Intro Section (narrower 1st Region) or Main Body section (wider 2nd Region) of a page. These snippets should not be used in the Sidebar Section or the Full-Width 3rd Region.
CTA Snippet
- Has a specific style for the H2
- All body text automatically bolded
- Works best in the Intro section
H2 Heading for CTA Snippet
All body text is automatically bolded. H2 heading will appear as larger bolded text.
Teal button
Photo with Caption
- Works with vertical and horizontal photos
- No specific image dimentions required
Accordion
- Number of dropdowns can be increased or decreased
- Works well in both Intro and Main Body regions
Optional Title for Accordions
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
Text Cards
- Number of cards cannot be changed
Title (Required) - Will be styled as H2
Intro Text (Optional)
Heading - Will be styled as H3
Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading - Will be styled as H3
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et.
Heading - Will be styled as H3
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.
Tabs
- Number of tabs can be increased or decreased, but make sure that the Tab Titles don't wrap
Tabs Heading - Required, syled as H2
Optional Intro Text
H3 Subheading - Optional
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Optional text
H3 Subheading - Optional
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Optional text
H3 Subheading - Optional
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Optional text
Secondary Promo Section
- Number of items can be increased or decreased
- Recommended image dimentions: 445 x 330px
- Horizontal images work best
Heading or Title - Required, Styled as an H2.
Title - Required. Leave as paragraph text, H3 style will be applied.
Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Title - Required. Leave as paragraph text, H3 style will be applied.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.
Title - Required. Leave as paragraph text, H3 style will be applied.
Urna condimentum mattis pellentesque id nibh tortor id aliquet lectus. Euismod quis viverra nibh cras pulvinar mattis. Sed pulvinar proin gravida hendrerit lectus. Diam volutpat commodo sed egestas egestas.
Triple Feature
- Number of featured items cannot be changed
- Images must all be same size
- Recommended image size: 550 x 375px
Title, Required - Do not add additional styles. Styled as H2.
Linked Title - Do not add addtional styles, automatically styled as H3
July 4 2019Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Linked Title - Do not add addtional styles, automatically styled as H3
July 5 2019Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Linked Title - Do not add addtional styles, automatically styled as H3
July 6 2019Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Full-Width Snippets
The snippets in this section are mean to be used in full-width editable reigons, which are not on all pages.
Checkerboard Container Snippet with 2 Checkerboard Item Snippets
- Can be used as main body or full-width snippet
- Recommended image size: 1260 x 760px
- Linked text does not display well in the body copy, recommend using a white button instead
Checkerboard Item Heading - H2
Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum.
Checkerboard Item Heading - H2
Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum.
Spotlight
Optional Subheading
- Recommended image size: 440 x 700px
- Works best in full-width regions, but can go into main body editable region
Four Year Plan Snippet Heading - Required
Generic Differentiators Snippet Heading - Required, Styled as H2
Generic Differentiators
- Vertical or horizontal images can be used, just ensure all are same size
- Recommended vertical image size: 330 x 445px
- Recommended horizontal image size: 445 x 330px
H3 Heading
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
H3 Heading
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.