![document icon](/_resources/images/buttons/mycsusm.png)
Media Spotlight
Description
Usage
- Place within a Section Row Layout snippet.
- Limit to 3 on a page.
- Try to have other components or sections in between multiple Media Spotlights
Options
- Theme: Adds a background color and proper heading level colors to the section and component.
- Component Type: [Small, Large, Tall Text]. Design layout. Excamples below.
- Media Placement: [Right, Left]. Placement of image / video.
- Media Type: [Image, Video]. Image or Video
- Alternative Text: Alt Text for media.
- Tag: (Optional) Useful for multiple spotlights or to categorize the type of spotlight (Student News, Faculty Spotlight, Feature...)
- Title: (Optional)
- Date: (Optional)
- Summary: (Optional)
- Group (Call to Action) [+Add New Group]: Up to 2 Call to Action buttons.
- Link Location: Full URL (or page chooser within OU Campus)
- Link Text: Text to display on button
Version Gallery
The media spotlight has 3 versions (Small, Large, Text Large)
Each has options for display (Image left or right, 5 color themes, image or video)
Small
Lorem Ipsum
Small Default
Duis 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.
![Craven Hall](/patternlibrary/img/craven.jpg)
Lorem Ipsum
Small Default
Duis 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.
![Library Exterior](/patternlibrary/img/library.jpg)
Small Deep Cobalt
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Large
![O-Team](https://www.csusm.edu/dibs/images/oteam-hero.jpg)
Lorem ipsum
Large Spotlight
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident.
![Ladies speaking on terrace](https://www.csusm.edu/iits/services/web/images/inteernships.jpg)
Ut Diam Mauris
Exepteur Sint Proident
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Text-Tall
![Markstein Hall](/patternlibrary/img/mark.jpg)
Text-Tall
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis
sem at nibh elementum imperdiet.
- Nulla quis
- Elementum imperdiet
- Praesent libero
- Sed nisi
- Nulla quis sem
- Dapibus diam