Website Feature Components
This page is a collection of text treatments and graphical elements that you can request for your pages.
If you would like to request an element, please contact Tony Goins at tgoins10@cscc.edu. We will need to install new components from our end.
The components on this page should be editable using OmniUpdate, but contact us if you need help.
Backgrounds
These backgrounds can be used to make a piece of content stand out. Our style is to use only one or two colored boxes per page, to prevent the page from becoming too busy.
Core Blue Background - #007298
core-blue-back
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id nibh urna. Mauris eu vehicula metus, eu accumsan erat. Proin vel sagittis lacus. Duis massa velit, ultricies a sodales vitae, pretium et eros. Suspendisse maximus tincidunt diam vel ultrices. Ut lacinia non dolor et eleifend. Phasellus quis interdum sem. Quisque rhoncus tortor sit amet mi condimentum imperdiet. Duis posuere nulla sit amet orci facilisis, ut venenatis leo luctus.
Dark Blue Background - #003E52
dark-blue-back
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id nibh urna. Mauris eu vehicula metus, eu accumsan erat. Proin vel sagittis lacus. Duis massa velit, ultricies a sodales vitae, pretium et eros. Suspendisse maximus tincidunt diam vel ultrices. Ut lacinia non dolor et eleifend. Phasellus quis interdum sem. Quisque rhoncus tortor sit amet mi condimentum imperdiet. Duis posuere nulla sit amet orci facilisis, ut venenatis leo luctus.
Light Blue Background - #99DAEA
light-blue-back
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id nibh urna. Mauris eu vehicula metus, eu accumsan erat. Proin vel sagittis lacus. Duis massa velit, ultricies a sodales vitae, pretium et eros. Suspendisse maximus tincidunt diam vel ultrices. Ut lacinia non dolor et eleifend. Phasellus quis interdum sem. Quisque rhoncus tortor sit amet mi condimentum imperdiet. Duis posuere nulla sit amet orci facilisis, ut venenatis leo luctus.
Content Containers
Right Floated Box
This box shows content overlaid on a photo. It is used to emphasize featured content.
This box is optional and can be used for a call to action.
50% Picture Box
This is another feature box that places a box of content next to a photo. Unlike the floated box, the entire photo is visible at all times. On mobile devices, the photo expands to fill the entire width of the screen.
- List 1
- List 2
- List 3
Link Picture Boxes
Picture boxes are used for a list of things with roughly the same level of importance.
Photo Slideshow
Icon Boxes
Use this if you have a series of items with icons. Typically there would be 3-5 of these.
PNG Left Icon Text Block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id nibh urna. Mauris eu vehicula metus, eu accumsan erat. Proin vel sagittis lacus.
OUTLINED SVG Left Icon Text Block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id nibh urna. Mauris eu vehicula metus, eu accumsan erat. Proin vel sagittis lacus.
FILLED SVG Left Icon Text Block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id nibh urna. Mauris eu vehicula metus, eu accumsan erat. Proin vel sagittis lacus.
Media Embed
Left Embed
This is a box that can be floated in your content. Typically this would be a feature story or some kind of sidebar. Be aware that many users will mistake this for an ad, so do not rely on it for key content.
On a mobile device, this box will take up the whole column.
Content Next To Media embed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum diam vel ligula elementum, eget tempus leo lobortis. Aliquam aliquet pretium odio sed scelerisque. Proin ultrices, massa at mollis sollicitudin, erat sem pharetra neque, nec hendrerit nibh augue bibendum arcu. Aenean a pellentesque nibh. Nullam vehicula eleifend sapien ac rutrum. Suspendisse et nisl aliquam, vulputate nulla sit amet, sollicitudin lorem. Sed sagittis ornare nibh a feugiat. Etiam at maximus turpis. Suspendisse venenatis malesuada finibus.
Curabitur arcu orci, lacinia sed ante at, dignissim placerat nunc. Phasellus convallis urna vel accumsan convallis. Ut eu diam in magna egestas dapibus vel quis eros. Suspendisse porta sem in odio pellentesque, vel porta purus tristique. Phasellus maximus venenatis purus, sit amet facilisis risus. Ut nec nulla nunc. Integer nec urna justo. Maecenas a risus sapien. In sollicitudin quis neque a sollicitudin. Quisque ac posuere nisl, in commodo nisl. Morbi viverra neque sem. Mauris orci erat, fringilla a placerat quis, faucibus vitae felis. Integer tempus eros ipsum, a malesuada risus iaculis eu. Praesent ultricies magna eget mattis gravida. Nam ullamcorper ex eget libero ultricies, sit amet maximus nisi fermentum. Pellentesque pretium, tortor ut accumsan finibus, dui nibh volutpat eros, ac rutrum mauris justo eget nisi.
Right Embed
We can also float to the right.
Ut mattis enim non pretium tempor. Sed bibendum posuere risus vitae tempor. Ut rutrum metus aliquam, porta lacus vitae, semper sapien. Nullam ornare nisi ac risus hendrerit, vel vulputate risus posuere. In vel arcu eu ex ultricies varius scelerisque vel risus. Proin elementum quis eros non posuere. Aenean vel tincidunt leo, et sollicitudin diam. Aenean egestas purus et purus feugiat, non mollis nisi aliquam. Duis tristique tincidunt sapien vestibulum accumsan.
Small Feature Box
Featured Content
This is a feature that takes up the whole column, with a picture.
Strip of Statistics or Icons
Talk to us about obtaining icons. We need to make sure icons match our site styles.
$1,111
First Stat Content
$222
Second Stat Content
333%
Third Stat Content
Video Callout
This is useful when you don't want to embed the whole video or playlist, because the whole video would be too large.
A Day in the Life of Otis, an Intel Manufacturing Technician
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget quam eget leo commodo pulvinar et a est. Nullam porttitor ipsum sed commodo ultrices. Donec eget malesuada elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse ut congue tortor. Maecenas placerat nulla id semper tristique.
Quote with photo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget quam eget leo commodo pulvinar et a est. Nullam porttitor ipsum sed commodo ultrices.
NAME TITLE
Snippet-ized Components
Headshot Gallery
John Doe
Doer of Things
John Doe
Doer of Things
John Doe
Doer of Things