CERN Accelerating science

Close menu

Hero header

Components - LAYOUT

Heading blocks are used on the top of certain pages to announce what the page is about. It consists of a photo background and the title of the page. A small description of what to expect in a page can be added optionally.  

Usage

CERN provided Drupal 8 sites:

  • Install and enable the Hero header module and all its dependencies under Extend
  • After installing you can add hero headers on all content types which use Paragraph components like the Landing Page
  • To create a hero header just choose Hero header from the Paragraph chooser (if there is one) and define your Hero frames
  • Each hero frame consists out of a background image, video or color, a title with an optional link and a subtitle
  • You can add multiple hero frames with the below button "Add Hero frame"
  • You can remove hero frames with clicking on the "Remove" button on each frame's top right corner
  • After defining the frames just click on save and your hero header is done

Other:

  • Just include one of the variant's HTML snippets
  • If you're experienced with HTML and CSS you even can customise it further!
Single heading variant

Headings COMPONENT

<div class="component-header">
<div data-quickedit-entity-id="paragraph/8" id="header-blocks" class="owl-carousel owl-theme component-header__carousel header-carousel owl-loaded owl-drag" data-quickedit-entity-instance-id="0">
<div class="header-block" style="background-color:rgb(0,0,0);">
<div class="header-block__title">
<h3 class="header-block__name" style="color:#FFFFFF;">
<span style="color:#FFFFFF;">About CERN</span>
</h3>
<span class="header-block__subhead" style="color:#FFFFFF;"><p><strong>What is the universe made of? How did it start?</strong> Physicists at CERN are seeking answers, using some of the world's most powerful particle accelerators</p></span>
</div>
<div class="header-block__veil"></div>
<div class="header-block__image" style="background:url('images/backgrounds/1900_1380_10.jpg') no-repeat center center / cover;"></div>
</div>
</div>
</div>
Show more code
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Source+Sans+Pro:400,600,700");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
.component-header__carousel {
clear: both; }
.component-header__carousel:before, .component-header__carousel:after {
content: "";
display: table; }
.component-header__carousel:after {
clear: both; }

/* ****************************************** divisions component */
.component-header {
position: relative; }
.component-header__carousel {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
min-height: 620px;
position: relative; }
.component-header__carousel *,
.component-header__carousel *::after,
.component-header__carousel *::before {
box-sizing: border-box; }
.component-header__carousel .owl-stage {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
align-items: stretch; }
.component-header__carousel .owl-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
align-items: stretch;
position: relative; }
.component-header__carousel .header-block {
color: #ffffff;
min-height: 670px;
width: 100%; }
.component-header__carousel .header-block__title {
position: absolute;
z-index: 1;
width: 80%;
right: 0;
left: 0;
margin: 15% auto; }
.component-header__carousel .header-block__title h3.header-block__name {
color: #ffffff;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1;
margin: 0 0 50px;
position: relative;
text-align: center; }
.component-header__carousel .header-block__title h3.header-block__name a {
color: #ffffff; }
.component-header__carousel .header-block__title h3.header-block__name:after {
background: #ffffff;
content: "";
display: block;
height: 2px;
position: absolute;
width: 135px;
right: 0;
left: 0;
margin: auto;
bottom: -23px; }
.component-header__carousel .header-block__veil {
height: 100%;
position: absolute;
z-index: 0;
width: 100%;
background-color: rgba(13, 13, 13, 0.5);
z-index: 0; }
.component-header__carousel .header-block__image {
position: absolute;
height: 100%;
width: 100%; }
.component-header__carousel .header-block__video {
height: 100%; }
.component-header__scroll {
display: block;
position: absolute;
right: 0;
left: 0;
margin: auto;
bottom: 50px; }

.owl-theme .owl-dots {
position: absolute;
left: 10%;
bottom: 5%; }
.owl-theme .owl-dots .owl-dot {
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
height: 18px;
margin: 0 10px;
width: 18px;
position: relative;
top: 2px; }
.owl-theme .owl-dots .owl-dot span {
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-opacity: 1;
-khtml-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1;
background: #ffffff;
height: 8px;
margin: 3px auto 0;
padding: 0;
width: 8px; }
.owl-theme .owl-dots .owl-dot.active, .owl-theme .owl-dots .owl-dot:hover {
border: 2px solid #f2a530;
top: 0; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background: #f2a530; }

@media only screen and (max-width: 767px) {
.owl-theme .owl-controls,
.owl-theme .owl-dots {
margin: 15px 0 0; }
.owl-theme .owl-controls .owl-page,
.owl-theme .owl-controls .owl-dot,
.owl-theme .owl-dots .owl-page,
.owl-theme .owl-dots .owl-dot {
height: 24px;
margin: 0 2px;
width: 24px; }
.owl-theme .owl-controls .owl-page span,
.owl-theme .owl-controls .owl-dot span,
.owl-theme .owl-dots .owl-page span,
.owl-theme .owl-dots .owl-dot span {
height: 14px;
width: 14px; }
.owl-theme .owl-controls .owl-page.active,
.owl-theme .owl-controls .owl-dot.active,
.owl-theme .owl-dots .owl-page.active,
.owl-theme .owl-dots .owl-dot.active {
border: 2px solid #f2a530; }
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls .owl-dot.active span,
.owl-theme .owl-dots .owl-page.active span,
.owl-theme .owl-dots .owl-dot.active span {
background: #f2a530; } }
Show more code
The zip file contains the orginal SCSS files
$(document).ready(function() {
$(".header-carousel").owlCarousel({
nav: false,
items: 1,
loop: false,
dots:true,
});
})
Show more code

You can change the background image by changing the next code:

<div class="header-block__image" style="background:url('images/backgrounds/1900_1380_10.jpg') no-repeat center center / cover;"></div>

You may choose any picture you want.

You can alter the applied veil in adding or removing the next code in front of the background image code:

<div class="header-block__veil"></div>

Multiple headings variant

Headings COMPONENT

<div class="component-header">
<div data-quickedit-entity-id="paragraph/8" id="header-blocks" class="owl-carousel owl-theme component-header__carousel header-carousel owl-loaded owl-drag" data-quickedit-entity-instance-id="0">
<div class="header-block" style="background-color:rgb(0,0,0);">
<div class="header-block__title">
<h3 class="header-block__name" style="color:#FFFFFF;">
<span style="color:#FFFFFF;">About CERN</span>
</h3>
<span class="header-block__subhead" style="color:#FFFFFF;"><p><strong>What is the universe made of? How did it start?</strong> Physicists at CERN are seeking answers, using some of the world's most powerful particle accelerators</p></span>
</div>
<div class="header-block__veil"></div>
<div class="header-block__image" style="background:url('images/backgrounds/1900_1380_20.jpg') no-repeat center center / cover;"></div>
</div>
<div class="header-block" style="background-color:rgb(0,0,0);">
<div class="header-block__title">
<h3 class="header-block__name" style="color:#FFFFFF;">
<span style="color:#FFFFFF;">About CERN</span>
</h3>
<span class="header-block__subhead" style="color:#FFFFFF;"><p><strong>What is the universe made of? How did it start?</strong> Physicists at CERN are seeking answers, using some of the world's most powerful particle accelerators</p></span>
</div>
<div class="header-block__veil"></div>
<div class="header-block__image" style="background:url('images/backgrounds/1900_1380_09.jpg') no-repeat center center / cover;"></div>
</div>
<div class="header-block" style="background-color:rgb(0,0,0);">
<div class="header-block__title">
<h3 class="header-block__name" style="color:#FFFFFF;">
<span style="color:#FFFFFF;">About CERN</span>
</h3>
<span class="header-block__subhead" style="color:#FFFFFF;"><p><strong>What is the universe made of? How did it start?</strong> Physicists at CERN are seeking answers, using some of the world's most powerful particle accelerators</p></span>
</div>
<div class="header-block__veil"></div>
<div class="header-block__image" style="background:url('images/backgrounds/1900_1380_16.jpg') no-repeat center center / cover;"></div>
</div>
<div class="header-block" style="background-color:rgb(0,0,0);">
<div class="header-block__title">
<h3 class="header-block__name" style="color:#FFFFFF;">
<span style="color:#FFFFFF;">About CERN</span>
</h3>
<span class="header-block__subhead" style="color:#FFFFFF;"><p><strong>What is the universe made of? How did it start?</strong> Physicists at CERN are seeking answers, using some of the world's most powerful particle accelerators</p></span>
</div>
<div class="header-block__veil"></div>
<div class="header-block__image" style="background:url('images/backgrounds/1900_1380_10.jpg') no-repeat center center / cover;"></div>
</div>
</div>
</div>
Show more code
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Source+Sans+Pro:400,600,700");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
.component-header__carousel {
clear: both; }
.component-header__carousel:before, .component-header__carousel:after {
content: "";
display: table; }
.component-header__carousel:after {
clear: both; }

/* ****************************************** divisions component */
.component-header {
position: relative; }
.component-header__carousel {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
min-height: 620px;
position: relative; }
.component-header__carousel *,
.component-header__carousel *::after,
.component-header__carousel *::before {
box-sizing: border-box; }
.component-header__carousel .owl-stage {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
align-items: stretch; }
.component-header__carousel .owl-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
align-items: stretch;
position: relative; }
.component-header__carousel .header-block {
color: #ffffff;
min-height: 670px;
width: 100%; }
.component-header__carousel .header-block__title {
position: absolute;
z-index: 1;
width: 80%;
right: 0;
left: 0;
margin: 15% auto; }
.component-header__carousel .header-block__title h3.header-block__name {
color: #ffffff;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1;
margin: 0 0 50px;
position: relative;
text-align: center; }
.component-header__carousel .header-block__title h3.header-block__name a {
color: #ffffff; }
.component-header__carousel .header-block__title h3.header-block__name:after {
background: #ffffff;
content: "";
display: block;
height: 2px;
position: absolute;
width: 135px;
right: 0;
left: 0;
margin: auto;
bottom: -23px; }
.component-header__carousel .header-block__veil {
height: 100%;
position: absolute;
z-index: 0;
width: 100%;
background-color: rgba(13, 13, 13, 0.5);
z-index: 0; }
.component-header__carousel .header-block__image {
position: absolute;
height: 100%;
width: 100%; }
.component-header__carousel .header-block__video {
height: 100%; }
.component-header__scroll {
display: block;
position: absolute;
right: 0;
left: 0;
margin: auto;
bottom: 50px; }

.owl-theme .owl-dots {
position: absolute;
left: 10%;
bottom: 5%; }
.owl-theme .owl-dots .owl-dot {
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
height: 18px;
margin: 0 10px;
width: 18px;
position: relative;
top: 2px; }
.owl-theme .owl-dots .owl-dot span {
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-opacity: 1;
-khtml-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1;
background: #ffffff;
height: 8px;
margin: 3px auto 0;
padding: 0;
width: 8px; }
.owl-theme .owl-dots .owl-dot.active, .owl-theme .owl-dots .owl-dot:hover {
border: 2px solid #f2a530;
top: 0; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background: #f2a530; }

@media only screen and (max-width: 767px) {
.owl-theme .owl-controls,
.owl-theme .owl-dots {
margin: 15px 0 0; }
.owl-theme .owl-controls .owl-page,
.owl-theme .owl-controls .owl-dot,
.owl-theme .owl-dots .owl-page,
.owl-theme .owl-dots .owl-dot {
height: 24px;
margin: 0 2px;
width: 24px; }
.owl-theme .owl-controls .owl-page span,
.owl-theme .owl-controls .owl-dot span,
.owl-theme .owl-dots .owl-page span,
.owl-theme .owl-dots .owl-dot span {
height: 14px;
width: 14px; }
.owl-theme .owl-controls .owl-page.active,
.owl-theme .owl-controls .owl-dot.active,
.owl-theme .owl-dots .owl-page.active,
.owl-theme .owl-dots .owl-dot.active {
border: 2px solid #f2a530; }
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls .owl-dot.active span,
.owl-theme .owl-dots .owl-page.active span,
.owl-theme .owl-dots .owl-dot.active span {
background: #f2a530; } }
Show more code
The zip file contains the orginal SCSS files
$(document).ready(function() {
$(".header-carousel").owlCarousel({
nav: false,
items: 1,
loop: false,
dots:true,
});
})
Show more code

You can add as many Hero Headings as you want. You just have to paste for each frame the given div block which includes class="header-block" completely.

Pay attention that you modify each frame according to your specific requirements.

Multiple headings with video variant

Headings COMPONENT

<div class="component-header">
<div data-quickedit-entity-id="paragraph/8" id="header-blocks" class="owl-carousel owl-theme component-header__carousel header-carousel owl-loaded owl-drag" data-quickedit-entity-instance-id="0">
<div class="header-block" style="background-color:rgb(0,0,0);">
<div class="header-block__title">
<h3 class="header-block__name" style="color:#FFFFFF;">
<span style="color:#FFFFFF;">About CERN</span>
</h3>
<span class="header-block__subhead" style="color:#FFFFFF;"><p><strong>What is the universe made of? How did it start?</strong> Physicists at CERN are seeking answers, using some of the world's most powerful particle accelerators</p></span>
</div>
<div class="header-block__veil"></div>
<div class="header-block__image" style="background:url('images/backgrounds/1900_1380_07.jpg') no-repeat center center / cover;"></div>
</div>
<div class="header-block" style="background-color:rgb(28, 93, 109);">
<div class="header-block__title">
<h3 class="header-block__name" style="color:#FFFFFF;">
<span style="color:#FFFFFF;">About CERN</span>
</h3>
<span class="header-block__subhead" style="color:#FFFFFF;"><p><strong>What is the universe made of? How did it start?</strong> Physicists at CERN are seeking answers, using some of the world's most powerful particle accelerators</p></span>
</div>
<div class="header-block__veil"></div>
</div>
<div class="header-block" style="background-color:rgb(0,0,0);">
<div class="header-block__title">
<h3 class="header-block__name" style="color:#FFFFFF;">
<span style="color:#FFFFFF;">About CERN</span>
</h3>
<span class="header-block__subhead" style="color:#FFFFFF;"><p><strong>What is the universe made of? How did it start?</strong> Physicists at CERN are seeking answers, using some of the world's most powerful particle accelerators</p></span>
</div>
<div class="header-block__veil"></div>
<div class="header-block__video">
<video controls="" autoplay="" loop="" width="100%" height="100%">
<source src="images/backgrounds/video-splash.mp4" type="video/mp4; length=6264674">
</video>
</div>
</div>
</div>
</div>
Show more code
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Source+Sans+Pro:400,600,700");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
.component-header__carousel {
clear: both; }
.component-header__carousel:before, .component-header__carousel:after {
content: "";
display: table; }
.component-header__carousel:after {
clear: both; }

/* ****************************************** divisions component */
.component-header {
position: relative; }
.component-header__carousel {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
min-height: 620px;
position: relative; }
.component-header__carousel *,
.component-header__carousel *::after,
.component-header__carousel *::before {
box-sizing: border-box; }
.component-header__carousel .owl-stage {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
align-items: stretch; }
.component-header__carousel .owl-item {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
align-items: stretch;
position: relative; }
.component-header__carousel .header-block {
color: #ffffff;
min-height: 670px;
width: 100%; }
.component-header__carousel .header-block__title {
position: absolute;
z-index: 1;
width: 80%;
right: 0;
left: 0;
margin: 15% auto; }
.component-header__carousel .header-block__title h3.header-block__name {
color: #ffffff;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1;
margin: 0 0 50px;
position: relative;
text-align: center; }
.component-header__carousel .header-block__title h3.header-block__name a {
color: #ffffff; }
.component-header__carousel .header-block__title h3.header-block__name:after {
background: #ffffff;
content: "";
display: block;
height: 2px;
position: absolute;
width: 135px;
right: 0;
left: 0;
margin: auto;
bottom: -23px; }
.component-header__carousel .header-block__veil {
height: 100%;
position: absolute;
z-index: 0;
width: 100%;
background-color: rgba(13, 13, 13, 0.5);
z-index: 0; }
.component-header__carousel .header-block__image {
position: absolute;
height: 100%;
width: 100%; }
.component-header__carousel .header-block__video {
height: 100%; }
.component-header__scroll {
display: block;
position: absolute;
right: 0;
left: 0;
margin: auto;
bottom: 50px; }

.owl-theme .owl-dots {
position: absolute;
left: 10%;
bottom: 5%; }
.owl-theme .owl-dots .owl-dot {
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
height: 18px;
margin: 0 10px;
width: 18px;
position: relative;
top: 2px; }
.owl-theme .owl-dots .owl-dot span {
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-opacity: 1;
-khtml-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1;
background: #ffffff;
height: 8px;
margin: 3px auto 0;
padding: 0;
width: 8px; }
.owl-theme .owl-dots .owl-dot.active, .owl-theme .owl-dots .owl-dot:hover {
border: 2px solid #f2a530;
top: 0; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background: #f2a530; }

@media only screen and (max-width: 767px) {
.owl-theme .owl-controls,
.owl-theme .owl-dots {
margin: 15px 0 0; }
.owl-theme .owl-controls .owl-page,
.owl-theme .owl-controls .owl-dot,
.owl-theme .owl-dots .owl-page,
.owl-theme .owl-dots .owl-dot {
height: 24px;
margin: 0 2px;
width: 24px; }
.owl-theme .owl-controls .owl-page span,
.owl-theme .owl-controls .owl-dot span,
.owl-theme .owl-dots .owl-page span,
.owl-theme .owl-dots .owl-dot span {
height: 14px;
width: 14px; }
.owl-theme .owl-controls .owl-page.active,
.owl-theme .owl-controls .owl-dot.active,
.owl-theme .owl-dots .owl-page.active,
.owl-theme .owl-dots .owl-dot.active {
border: 2px solid #f2a530; }
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls .owl-dot.active span,
.owl-theme .owl-dots .owl-page.active span,
.owl-theme .owl-dots .owl-dot.active span {
background: #f2a530; } }
Show more code
The zip file contains the orginal SCSS files
$(document).ready(function() {
$(".header-carousel").owlCarousel({
nav: false,
items: 1,
loop: false,
dots:true,
});
})
Show more code

In order to implement a video background you have to implement the next code

<div class="header-block__video"> <video controls="" autoplay="" loop="" width="100%" height="100%"> <source src="images/backgrounds/video-splash.mp4" type="video/mp4; length=6264674"> </video> </div>

Bear in mind that it is best practice to use only small video files, especially for mobile usage!