New web
Web pattern library, style and technical reference
Container Templates
Content Promo Banner
Documentation under development The Content Promo Banner component allows for...
This component can be used by applying the Content Promo Banner container template to a WYSIWYG content area.
The content promo banner component is part of our standardised Unicorn Component Library for the UON website.
Asset setup
| Asset type | WYSIWYG content container on a Standard Page |
|---|---|
| Container template | Media gallery |
| Content asset | A folder containing images and/or link assets. Asset ID gets entered into the 'Gallery folder' configuration field. |
Asset configuration
| Field | Type | Value | Default | Usage |
|---|---|---|---|---|
| Gallery folder Required |
Related Asset | - none - | Referenced Asset must be a folder containing images and/or link assets (for YouTube videos) | |
| Heading (H2) Optional |
Text | - none - | ||
| Menu label Optional |
Text | - none - | Used to display a menu link in the horizontal inline menu, for example on degrees and study areas. Can be the same value as 'Heading', or customised to suite the menu. Only applicable if a 'Heading' has been specified. | |
| Intro Optional |
WYSIWYG | - none - | Allows you to provide an introductory sentence/paragraph to explain the contents of the gallery to users. | |
| Layout Required |
Select |
|
Slideshow carousel | Defines the layout of the gallery, see examples below to see how each style works and displays. |
| Hide all captions Required |
Select |
|
No | This will hide all captions from images in a slideshow. Only applicable when the selected 'Layout' value is 'Slideshow carousel' |
Examples
Related assets
Resources
| Stylesheet | uon-content-promo-banner.css | Loaded as part of the unicorn.min.css library (#432456) |
|---|
Content container template
| Content container template | #491674 - Content Promo Banner | |
|---|---|---|
| Metadata schema | #491676 - Content Promo Banner - Metadata schema | |
| Paint layout | #491677 - Content Promo Banner - Paint layout | |
| Simple edit layout | #491685 - Content Promo Banner - Edit layout |
Code
/*********************************/
/** UON Content Promo Banner **/
/** -- November 2018 **/
/** -- Dean Robinson (djr145) **/
/*********************************/
.uon-content-promo-banner {background-color:#2D3138;background-size:cover;display:block;color:#FFF;text-decoration:none;border-radius:3px;transition:0.1s all;margin:80px 0;background-position:center center;position:relative;}
.uon-content-promo-banner:first-child {margin-top:0;}
.uon-content-promo-banner:last-child {margin-bottom:0;}
.uon-content-promo-banner.uon-content-promo-banner-light {background-color:#ECEDEF;color:#2D3138;}
.uon-content-promo-banner:hover {transform:scale(1.02);box-shadow:0 0 0 3px #1090D5;}
.uon-content-promo-banner-inner {padding:40px;}
.uon-content-promo-banner-tint {background:linear-gradient(120deg,rgba(0,0,0,0.75),rgba(0,0,0,0) 60%);text-shadow:1px 1px 0 rgba(0,0,0,0.5),0 0 20px rgba(0,0,0,0.5);border-radius:3px 0 0 3px;}
.uon-content-promo-banner-light .uon-content-promo-banner-tint {background:linear-gradient(120deg,rgba(255,255,255,0.75),rgba(255,255,255,0) 60%);text-shadow:none;}
.uon-content-promo-banner .headline-60px, .uon-content-promo-banner .headline-50px, .uon-content-promo-banner .headline-40px {margin-bottom:0;}
.uon-content-promo-banner .headline-36px, .uon-content-promo-banner .headline-30px, .uon-content-promo-banner .headline-20px {margin:10px 0 0;}
.uon-content-promo-banner .headline-40px, .uon-content-promo-banner .headline-36px, .uon-content-promo-banner .headline-30px {line-height:0.9;}
.uon-content-promo-banner .headline-20px {line-height:1;}
.uon-content-promo-banner .headline-36px:first-child, .uon-content-promo-banner .headline-30px:first-child, .uon-content-promo-banner .headline-20px:first-child {margin-top:0;line-height:1;}
.uon-content-promo-banner .uon-content-promo-banner-detail {margin:40px 0 0;}
.uon-content-promo-banner .uon-content-promo-banner-detail p {position:relative;margin:0;font-family:Heuristica,Georgia,serif;font-size:18px;}
.uon-content-promo-banner .uon-content-promo-banner-detail p::before {content:"";position:absolute;left:0;top:-20px;width:100px;height:4px;border-radius:4px;background:#1090D5;}
.uon-content-promo-banner p:last-child {margin-top:15px;margin-bottom:0;}
.uon-content-promo-banner:hover p .button, .uon-content-promo-banner p .button:hover,
.uon-content-promo-banner:hover .uon-content-promo-banner-detail p span.button, .uon-content-promo-banner .uon-content-promo-banner-detail p span.button:hover {background:#1090D5;border-color:#1090D5;color:#FFF;}
@media screen and (max-width:760px) {
.uon-content-promo-banner {background-position:left center;}
.uon-content-promo-banner .uon-content-promo-banner-inner {padding:20px;width:auto;}
.uon-content-promo-banner .headline-60px, .uon-content-promo-banner .headline-50px {font-size:40px;}
.uon-content-promo-banner .headline-36px, .uon-content-promo-banner .headline-30px {font-size:20px;}
.uon-content-promo-banner .uon-content-promo-banner-detail {font-size:18px;margin:15px 0;}
.uon-content-promo-banner .uon-content-promo-banner-detail p::before {display:none;}
}