Snippets

In the CMS there are many elements that you can use to customize your page based on
your content needs. This poses an opportunity and an risk. Because there are so many
ways to display information it can be confusing for you to know what to pick. The
following page offers a "best practice" guide for the snippets available to you. As
they say in fashion, less is more, so don't over do it--you don't want your visuals
or page layout of to get in the way of the content. Content is king and should always
be thought of first; accessorize with snippets. Use them to aide in making your content
easy to read and digest, not complicate.

Column Snippets

Two Column Layout

This snippet can be used on a full span page, like shown, or on a page with a sidebar.

Headline Here

Copy goes here for the column. In this snippet the images get to stay pretty large
and you have the ability to have two content blocks in one line.

Headline Here

Copy goes here for the column. In this snippet the images get to stay pretty large
and you have the ability to have two content blocks in one line.

Two Column Striped Layout

Similar to the Two Column Layout, the Two Column Striped widget creates two columns
with multiple rows. Every odd numbered row will have a light-grey background.

This snippet would replace the use of a table. Because columns stack on devices with
smaller screens, information should move horizontally from one column to the next,
not vertically down rows. You can preview what this example will look like on mobile
devices by resizing this browser window to become more narrow.

This is the left-most column and would appear above 'Right Content' on devices with
smaller screens.

This is the right-most column and would appear below 'Left Content' on devices with
smaller screens.

Tier 3 Room and Board

$0.02

Cost of a Great Education

Priceless

Three Column Layout

This snippet is best used in a full-page layout, not in a page with a sidebar--unless
you use this beginning on row four of the page.

When you have a sidebar page, the first three rows are held within the confines of
the smaller page size of the sidebar. Rows four and five are full width/larger page
size.

Headline

Running some copy under a series of images or icons gives the user easy access and
keeps you from having three items running down your page.

Headline

Running some copy under a series of images or icons gives the user easy access and
keeps you from having three items running down your page.

Headline

Running some copy under a series of images or icons gives the user easy access and
keeps you from having three items running down your page.

Four Column Layout

This snippet is best used in a full-page layout, not in a page with a sidebar, unless
you use this starting on row four of the page. Since the column widths are so small,
it's best to keep these to the treatment below, with or without an icon. Long paragraphs
of copy should not be divided into skinny columns--it's too hard to read on a computer
screen, especially on mobile. Because the copy length is so short, it looks better
to center the copy as well, by way of styles in your WYSIWYG editor toolbar.

When you have a sidebar page, the first three rows are held within the confines of
the smaller page size of the sidebar. Rows four and five are full width/larger page
size.

Headline

Due to width of this column it is best to keep these descriptions short and sweet.

Headline

Due to width of this column it is best to keep these descriptions short and sweet.

Headline

Due to width of this column it is best to keep these descriptions short and sweet.

Headline

Due to width of this column it is best to keep these descriptions short and sweet.

Variable Column Layout

This snippet is best used in a full-page layout, not in a page with a sidebar, unless
you use this starting on row four of the page. Most of your column needs will be addressed
in the three options above, but in some instances strange column widths are necessary
or preferred. For example:

You'll need the following code names to change the column widths listed on the left
(medium-2 and medium-10 in the example below). Your content will go on the right.
It does get a bit confusing, as this snippet is based on 12 columns, not the same
structure as the ones above. So one column is pretty small in width and 12 columns
would be the entire width of the editable part of the page.

When dividing out your columns, you always have to have a total of 12 in the end.
So there is some math involved, but nothing complicated. Here I have a column of two and
ten. Which equals 12.

This column layout was chosen because I have a lot to say in the copy about the beaker
and the importance of it to science. So in this instance I wanted to have the content
on the right with plenty of room to be able to read the longer content with ease.

Equalized Panels

When your page requires a couple boxes that have content in them, equalized panel
snippet works wonderfully. For this snippet the length of your content is not important
to keep the same because the boxes will adjust to accommodate the tallest content.

Tabs

Tabs are a great way to "hide" a lot of content you want on your page. The viewer
will only see the tab selected. You can divide your content out into similar topics.
Recent articles, research, program requirements, etc.

The tabs come in Honeycomb, shown below and Butter. Butter is a slightly lighter color,
same family of color though.

So much good content can go in this tab and will prevent your content from flowing
down your page and making it longer than it needs to be.

It is also a great way to group like types of information. For instance, current headlines,
articles on a certain topic, etc.

Same with this tab. It can be a long list of all your latest research. Because why
not!

Item Number One

Item Number Two

Item Number Three

Item Number Four

Our Laboratory #1

This is a description of the laboratory and how fantastic it is to have this at UNC.

Our Laboratory #2

This is a description of the laboratory and how fantastic it is to have this at UNC.

Our Laboratory #3

This is a description of the laboratory and how fantastic it is to have this at UNC.

Headline for Article Here

This is the description for the article headline above. This article can link out
to another page, it can be really long, the full article. Up to you, but it will be
hidden until clicked active in the tab above by the user!

Headline for Article Here

This is the description for the article headline above. This article can link out
to another page, it can be really long, the full article. Up to you, but it will be
hidden until clicked active in the tab above by the user!

Headline for Article Here

This is the description for the article headline above. This article can link out
to another page, it can be really long, the full article. Up to you, but it will be
hidden until clicked active in the tab above by the user!

Accordion

Accordions are also a great way to "hide" a lot of content you want on your page.
The viewer will only see the section selected. You can divide your content out into
similar topics. Recent articles, research, program requirements, etc.

This is the description for the article headline above. This article can link out
to another page, it can be really long, the full article. Up to you, but it will be
hidden until clicked active in the tab above by the user!

Headline for Article Here

This is the description for the article headline above. This article can link out
to another page, it can be really long, the full article. Up to you, but it will be
hidden until clicked active in the tab above by the user!

Headline for Article Here

This is the description for the article headline above. This article can link out
to another page, it can be really long, the full article. Up to you, but it will be
hidden until clicked active in the tab above by the user!

Read More

You might not want to immediately display all content on a page. Similar to the Tabs
and Accordion snippet, you can use the Read More snippet to hide smaller chunks of
content while giving the visitor the option, if desired, to continue reading.

The Read More snippet could be used alongside a faculty spotlight containing a short
biography, or any supporting element on a page. It's important to think about how
the snippet will be used, as the expanded content could drastically alter the appearance
of the remaining content on a page.

While this snippet appears best when used in smaller columns, keep in mind that a
large amount of content placed into this snippet will extend the page and create white
space in the adjacent columns. You should never add a page's entire content to a Read
More snippet.

You can find an example of the read more snippet to the right of this text, or below
on smaller screens. Notice the white space created once expanded.

Below is the Read More snippet. This area is 4 columns wide.

Content that is placed here will show the first 100px (about three text lines) and
fade into the background color. A read more link will be placed at the top that allows
the user to continue reading the content.

Call Out Panel

This is a highlight box that you can use when you need to call attention to a specific
thing. This could be an upcoming event, due date, announcement, link to a resource
or some other highlight.

You should never use this to color an entire region, but rather just for a small bit
of copy and possibly graphic. If you would like to make an entire panel a color, we
have this option for you to do on section #4 and will put the color desired in the
properties of the page.

Below are two examples of the call out panel used correctly and incorrectly. Remember
if you add importance of everything, nothing will be important. Use this once on a
page, two times max.

Good Example of How to Use a Call Out Panel

This would be the copy of why someone would want to come to this great event! It would
discuss who will be there, what they will learn and possibly have the agenda below
like shown.

9 a.m. - Check-inDetails about Checkin would go here, location, etc.

10 a.m. - Speaker OneSpeaker one information would go here and what they would present on.

12 p.m. - LunchNom Nom Nom, talk about what they will get to eat.

1 p.m. - Speaker TwoSpeaker one information would go here and what they would present on.

3 p.m. - Speaker TwoSpeaker one information would go here and what they would present on.

6 p.m. - Closing RemarksWhat a great day this was!

Event Headline

Where:University CenterAspen C

When:February 21, 20169 a.m. - 6 p.m.

Bad Example of How to Use a Call Out Panel

This would be the copy of why someone would want to come to this great event! It would
discuss who will be there, what they will learn and possibly have the agenda below
like shown.

9 a.m. - Check-inDetails about Checkin would go here, location, etc.

10 a.m. - Speaker OneSpeaker one information would go here and what they would present on.

12 p.m. - LunchNom Nom Nom, talk about what they will get to eat.

1 p.m. - Speaker TwoSpeaker one information would go here and what they would present on.

3 p.m. - Speaker TwoSpeaker one information would go here and what they would present on.

6 p.m. - Closing RemarksWhat a great day this was!

Event Headline

Where:University CenterAspen C

When:February 21, 20169 a.m. - 6 p.m.

Timeline

You may encounter a scenario where it would be handy to graphically display a series
of events. The Timeline snippet can show a passage of time, or a sequence of events,
for certain processes containing two or more steps (events).

Timelines should always contain at least two events. When you first insert a timeline,
Event Titles are H2s with the "Headings - Small" style applied. Please change the
heading to be appropriate for your specific use.

Web Design Summit Schedule

8:00 - 8:30 am

Registration

Designing for the web is fun! During the

8:30 - 10 am

Opening Ceremony

Listen to Deborah, lead of Web Design, introduce the many changes to our web presence
and how it will better our workflows.

10 am - Noon

Main Event

This is what we've been waiting for. We've come a long way. Learn how the CMS will
make our lives so much easier.

Noon - 2:30pm

Lunch

Enjoy a delicious meal from our great catering departlement. Spend this time to discuss
possible questions and ideas you might have for the breakout session.

2:30 - 3:30 pm

Breakout Session

After a short discussion, you will be grouped with other designers to discuss possible
ideas for this upcoming semester.