Style Guide | Page Design and Layout | Style and Format | Content Widgets | Additional Functionality
Card
In A Boxed Section with Gutter Spacing
In A Boxed Section with No Gutter Spacing
Instructions
Insert the Card snippet into the Boxed Sections snippet.
Image Auto Grid
Instructions
Use the Image Auto Grid snippet.
Image Gallery
This is the first image caption.
This is the second image caption.
This is the third image caption.
Instructions
Insert an Image Gallery Snippet onto your page.
Image Thumbnails With Gallery
Instructions
Image Thumbnails with Gallery are created using the Image Gallery Snippet.
Image With Caption
Left
When you use a class of left on the snippet, the image will go to the left side of the content area with the text wrapping on the right side.
Right
When you use a class of right on the snippet, the image will go to the right side of the content area with the text wrapping on the left side.
Middle
When you use a class of middle on the snippet, the image will go to the middle of the content area with no text wrapping.
Blank
When you leave the class blank on the snippet, the image will go to the left side of the content area with no text wrapping.
View the Image with Caption: on a Page with No Sidebars | on a Page with Left Nav | on a Page with Right Sidebar | on a Page with Both Sidebars
Instructions
Image with caption is created using the Image With Caption Snippet.
Row with Background
Image
You can put text over the background.
MTU Gold
This is the gold background.
Black
The system knows what color text to use for each background color.
Dark Gray
Dark gray is one color option.
Light Gray
Light gray is another color option.
Deep Gold
Deep gold is color option.
Teal
This is the teal background.
Copper
This is the copper background.
White
-
toutscan
-
goover
-
thebackground
Instructions
Use the Row w/Background Snippet.
Row With Left Image
Wrap
This is some text below the image. You can see what it does in conjunction with wrapping.
Title
One of the parameter option is wrapping. If you set wrapping to true, the text on the right will wrap beneath the content on the left if it gets too long.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nisl. Aenean ut posuere ex. Maecenas nec massa mauris. Donec mi mauris, dapibus ut risus ut, consectetur hendrerit tellus. Nullam scelerisque laoreet tellus. Mauris tristique mattis enim, sit amet congue ex dictum in. Fusce aliquam nisl est, ut euismod metus tempor non. Nulla aliquet congue pulvinar. Mauris bibendum felis ac aliquet dignissim. Pellentesque nec ornare urna, id fringilla justo.
Aenean volutpat pellentesque enim, non semper nulla tempor vel. Etiam sodales consequat diam et cursus. Cras at feugiat felis. Vestibulum quis ornare velit, a laoreet velit. Duis porta, nisi vel finibus pretium, lorem odio posuere enim, nec dictum nibh leo vitae ipsum. Nullam eget ex mattis nunc accumsan pellentesque fermentum a tellus. Phasellus at purus ac lacus feugiat lacinia. Nullam at enim sit amet tortor posuere venenatis. Donec at tempus magna, eu molestie tortor. Etiam hendrerit vulputate ipsum vitae fringilla. Aliquam in malesuada tellus. Cras aliquet luctus massa quis efficitur. Phasellus in turpis in metus rhoncus blandit ac eu orci. Praesent ut venenatis sem. Nunc suscipit, mi id cursus commodo, nisl arcu volutpat nulla, in blandit tellus nunc eget mi. Aenean quis augue elementum, ultricies lacus sed, iaculis purus.
No Wrap
This is some text below the image. You can see what it does in conjunction with no wrapping.
Title
One of the parameter option is wrapping. If you set wrapping to false, the text on the right will stay on the right, leaving blank space below the content on the left.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nisl. Aenean ut posuere ex. Maecenas nec massa mauris. Donec mi mauris, dapibus ut risus ut, consectetur hendrerit tellus. Nullam scelerisque laoreet tellus. Mauris tristique mattis enim, sit amet congue ex dictum in. Fusce aliquam nisl est, ut euismod metus tempor non. Nulla aliquet congue pulvinar. Mauris bibendum felis ac aliquet dignissim. Pellentesque nec ornare urna, id fringilla justo.
Aenean volutpat pellentesque enim, non semper nulla tempor vel. Etiam sodales consequat diam et cursus. Cras at feugiat felis. Vestibulum quis ornare velit, a laoreet velit. Duis porta, nisi vel finibus pretium, lorem odio posuere enim, nec dictum nibh leo vitae ipsum. Nullam eget ex mattis nunc accumsan pellentesque fermentum a tellus. Phasellus at purus ac lacus feugiat lacinia. Nullam at enim sit amet tortor posuere venenatis. Donec at tempus magna, eu molestie tortor. Etiam hendrerit vulputate ipsum vitae fringilla. Aliquam in malesuada tellus. Cras aliquet luctus massa quis efficitur. Phasellus in turpis in metus rhoncus blandit ac eu orci. Praesent ut venenatis sem. Nunc suscipit, mi id cursus commodo, nisl arcu volutpat nulla, in blandit tellus nunc eget mi. Aenean quis augue elementum, ultricies lacus sed, iaculis purus.
Horizontal Rule
Title
The other parameter is hr. Setting this to true will add a horizontal rule after each row that you create with the snippet.
Title
This is a second row created within the same snippet.
Instructions
Use the Row w/ Left Image Snippet.
Video
Title and Description
Title Only
Title
Description Only
This is the description.
No Title or Description
Instructions
Use the Video Snippet to embed videos or 360 images.