Web pattern library, style and technical reference
Container Templates
Area header
The Area header component allows for a standardised top-line header and section navigation to be added to a page header. It includes space for a section heeading and upto 4 sub-section links.
This component can be used by applying the Area header container template to a WYSIWYG content area in your page header.
Asset setup
| Asset type |
WYSIWYG content container on a Standard Page |
| Container template |
Area header |
Asset configuration
| Field |
Type |
Value |
Default |
Usage |
Section label
Optional |
Text |
|
- none - |
|
Section label highlight
Optional |
Select |
Dynamic based on 'Section label' |
- none - |
Used for selecting which word(s) are highlighted in blue in the label. |
Is H1?
Required |
Select |
|
Is H1 |
Allows you to specify whether or not to make the 'section label' a H1 or not. Setting this to 'Not H1' will instead out put a div, the styling does not change. |
Nav label 1
Optional |
Text |
|
- none - |
The label to display for the first link. |
Nav link 1
Optional |
Related asset |
|
- none - |
The asset for the first link to point to. |
Nav label 2
Optional |
Text |
|
- none - |
The label to display for the second link. |
Nav link 2
Optional |
Related asset |
|
- none - |
The asset for the second link to point to. |
Nav label 3
Optional |
Text |
|
- none - |
The label to display for the third link. |
Nav link 3
Optional |
Related asset |
|
- none - |
The asset for the third link to point to. |
Nav label 4
Optional |
Text |
|
- none - |
The label to display for the fourth link. |
Nav link 4
Optional |
Related asset |
|
- none - |
The asset for the fourth link to point to. |
Example
Related assets
Resource
| Stylesheet |
uon-area-header.css |
Loaded as part of the unicorn.min.css library (#432456) |
Content container template
| Content container template |
#425537 - Area header |
|
| Metadata schema |
#425538 - Area header - Metadata schema |
|
| Paint layout |
#425539 - Area header - Paint layout |
|
| Simple edit layout |
#425547 - Area header - Edit layout |
|
Code
CSS
/*********************************/
/** UON Area Header **/
/** -- March 2018 **/
/** -- Dean Robinson (djr145) **/
/*********************************/
#uon-area-header {padding:0 20px;background:#F6F7F9;/* only for overlapping logo header */}
#uon-area-header {position:-webkit-sticky;position:sticky;z-index:11;top:-30px;box-shadow:0 1px 0 rgba(0,0,0,0.1);} /* sticky header nonsense */
@supports (-webkit-backdrop-filter:saturate(50) blur(50px)) {
#uon-area-header {background:rgba(246,247,249,0.9);-webkit-backdrop-filter:saturate(50) blur(50px);}
}
#uon-area-header + #uon-body {margin-top:20px;}
#uon-area-header.dark-area-header {background:#2D3138;}
#uon-area-header .inner {display:flex;justify-content:space-between;padding-top:30px;position:relative;/* only for overlapping logo header */}
#uon-area-header .uon-area-header-title {font-family:'FuseV2';font-weight:900;text-transform:uppercase;color:#5B6270;margin:0;line-height:30px;font-size:30px;margin:25px 0;}
#uon-area-header.dark-area-header .uon-area-header-title {color:#FFF;}
#uon-area-header .uon-area-header-title a {color:inherit;text-decoration:none;line-height:inherit;border-bottom:0 none;}
#uon-area-header .uon-area-header-title a:hover {color:#1090D5;}
#uon-area-header .uon-area-header-title span {color:#1090D5;}
#uon-area-header .uon-area-header-nav {font-family:'FuseV2';font-weight:900;text-transform:uppercase;font-size:14px;margin:25px 0;flex-grow:1;text-align:right;}
#uon-area-header .uon-area-header-nav a {color:#5B6270;margin-left:20px;padding-left:20px;line-height:30px;display:inline-block;border-left:2px solid rgba(0,0,0,0.05);text-decoration:none;position:relative;}
#uon-area-header.dark-area-header .uon-area-header-nav a {color:#FFF;border-left-color:#5B6270;}
#uon-area-header .uon-area-header-nav a:hover {color:#2D3138;}
#uon-area-header .uon-area-header-nav a:hover::after {content:"";height:3px;background:#C6CAD1;position:absolute;left:20px;right:0;bottom:0;border-radius:3px;}
#uon-area-header .uon-area-header-nav a.active {color:#2D3138;}
#uon-area-header .uon-area-header-nav a.active::after {content:"";height:3px;background:#1090D5;position:absolute;left:20px;right:0;bottom:0;border-radius:3px;}
#uon-area-header.dark-area-header .uon-area-header-nav a:hover {color:#ECEDEF;}
#uon-area-header .uon-area-header-nav a:first-child {margin-left:0;padding-left:20px;border-left:0;}
#uon-area-header #uon-area-header-nav-toggle {display:none;position:absolute;top:10px;right:-10px;}
#uon-area-header #uon-area-header-nav-toggle.open .fa::before {content:"";}
@media screen and (max-width:760px) {
#uon-area-header {top:60px;}
#uon-area-header .inner {padding:0;flex-direction:column;}
#uon-area-header .uon-area-header-title {line-height:24px;font-size:24px;margin:15px 65px 15px 0;}
#uon-area-header .uon-area-header-nav {display:none;text-align:left;margin:0 0 20px;}
#uon-area-header .uon-area-header-nav a, #uon-area-header .uon-area-header-nav a:first-child {display:block;margin-left:0;padding-left:0;border-left:0;}
#uon-area-header .uon-area-header-nav a:hover::after {height:auto;width:3px;right:auto;left:-10px;top:5px;bottom:5px;}
#uon-area-header .uon-area-header-nav a.active::after {height:auto;width:3px;right:auto;left:-10px;top:5px;bottom:5px;}
#uon-area-header #uon-area-header-nav-toggle {display:block;}
}
/*********************************/
/** UON Area Header - Degrees **/
/** -- September 2019 **/
/** -- Dean Robinson (djr145) **/
/*********************************/
#uon-area-header.uon-area-header-degrees .uon-area-header-title small {display:none;font-weight:300;font-size:16px;line-height:16px;margin:-5px 0;text-transform:none;}
#uon-area-header.uon-area-header-degrees .uon-area-header-title small strong {display:block;font-weight:900;font-size:22px;line-height:24px;text-transform:uppercase;}
#uon-area-header.uon-area-header-degrees .uon-area-header-title.fixed small {display:block;}
#uon-area-header.uon-area-header-degrees .uon-area-header-title.fixed a {display:none;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav a.uon-area-header-nav-button {background:#1090D5;color:#FFF;font-weight:600;font-size:18px;border-radius:3px;border:0 none;padding:5px 15px;text-transform:none;margin-top:-5px;margin-bottom:-5px;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav a.uon-area-header-nav-button:hover {background:#2D3138;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav a.uon-area-header-nav-button:hover::after {display:none;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav a.uon-area-header-nav-button .fa-angle-right {margin-left:5px;font-weight:bold;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav .uon-area-header-nav-split-button {margin-left:20px;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav .uon-area-header-nav-split-button a {border:2px solid #5B6270;font-weight:600;font-size:18px;padding:3px 13px;text-transform:none;margin:-5px 0;border-radius:3px;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav .uon-area-header-nav-split-button a:hover {background:#5B6270;color:#FFF;border-color:#5B6270;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav .uon-area-header-nav-split-button a:hover:after {display:none;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav .uon-area-header-nav-split-button a:last-child {margin-left:10px;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav .uon-area-header-nav-split-button a.compare-add .fa-star,
#uon-area-header.uon-area-header-degrees .uon-area-header-nav .uon-area-header-nav-split-button a.compare-add .fa-star-o {margin-right:5px;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav .uon-area-header-nav-split-button a.compare-add-saved {background:#096;border-color:#096;color:#FFF;}
#uon-area-header.uon-area-header-degrees .button-count {font-size:12px;color:#FFF;background:#5B6270;border-radius:10px;margin-left:5px;vertical-align:top;padding:2px 10px;}
#uon-area-header.uon-area-header-degrees a:hover .button-count {background:#FFF;color:#5B6270;}
@media screen and (max-width:920px) {
#uon-area-header.uon-area-header-degrees .uon-area-header-nav .uon-area-header-nav-link {display:none;}
}
@media screen and (max-width:768px) {
#uon-area-header.uon-area-header-degrees .uon-area-header-title {display:none;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav {display:flex;justify-content:space-between;margin:10px 0;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav .uon-area-header-nav-split-button {display:flex;margin:0;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav .uon-area-header-nav-split-button a {font-size:16px;margin:0;padding:0px 8px;}
#uon-area-header.uon-area-header-degrees .uon-area-header-nav a.uon-area-header-nav-button {font-size:16px;margin:0;padding:2px 10px;}
}
