University Marketing and Communications

Image and Multimedia Widgets

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.

Back to widget index

Image Auto Grid

Arcelor Mittal logo
Black & Veatch logo.

GM logo.

Greenheck logo.
Jackson Insurance logo.
Systems Control logo.

Instructions

Use the Image Auto Grid snippet.

Back to widget index

Night photo of the husky statue on campus.

Title 1

This is the first image caption.

Students at a table with a laptop.

Title 2

This is the second image caption.

Campus in the winter with the Keweenaw Waterway in front..

Title 3

This is the third image caption.

Instructions

Insert an Image Gallery Snippet onto your page.

Back to widget index

Image Thumbnails With Gallery

Instructions

Image Thumbnails with Gallery are created using the Image Gallery Snippet.

Back to widget index

Image With Caption

Left

Night photo of the husky statue on campus.
This is a banner450 image on the page with the Class set to 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

Night photo of the husky statue on campus.
This is a banner450 image on the page with the Class set to 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

Night photo of the husky statue on campus.
This is a banner450 image on the page with the Class set to 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

Night photo of the husky statue on campus.
This is a banner450 image on the page with the Class 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.

Back to widget index

With Gallery

Night photo of the husky statue on campus.

The pop-up could come from text.

Without Gallery

Night photo of the husky statue on campus.

The pop-up could come from text.

Instructions

Use the Pop-up Images Snippet.

Back to widget index

Row with Background

Image

You can put text over the background.

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.

Khaki

This is the khaki background.

Light Gray

Light gray is another color options.

White

  • touts
    can
  • go
    over
  • the
    background

Instructions

Use the Row w/Background Snippet.

Back to widget index

Row With Left Image

Wrap

Night photo of the husky statue on campus.

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

Night photo of the husky statue on campus.

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

Night photo of the husky statue on campus.

Title

The other parameter is hr. Setting this to true will add a horizontal rule after each row that you create with the snippet.


Night photo of the husky statue on campus.

Title

This is a second row created within the same snippet.


Instructions

Use the Row w/ Left Image Snippet.

Back to widget index

Video

Title and Description

Play Title Field video
Preview image for Title Field video

Title Field

Description Field

Title Only

Play Title video
Preview image for Title video

Title

Description Only

No Title or Description

Instructions

Use the Video Snippet to embed videos or 360 images.

Back to widget index