CERN Accelerating science

Close menu

Featured banner

Components - LAYOUT

The division elements are used to create divisions in large texts, divide 2 different types of contents or highlight short parts of content. It consists of a photo background and a text, a quote, icons or links. 

Usage

CERN provided Drupal 8 sites:

  • Install and enable the Featured banner module and all its dependencies under Extend
  • After installing you can add featured banners on all content types which use Paragraph components like the Landing Page
  • To create a featured banner just choose Featured banner from the Paragraph chooser (if there is one) and define your properties
  • You can define properties like the background image (either upload one or choose one from CDS), the block position, the used colors, the text and the used link
  • After defining the properties just click on save and your featured banner 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!
Background variant

Divisions COMPONENT

<div class="component-division bottomright" style="background:url('images/1900_1060_11.jpg') no-repeat center center / cover">
<div class="component-division__text" style="background-color: rgba(28, 44, 56, 0.8);">
<div class="component-division__text__link">
<a href="#" title="Bene Dignissim Ea Enim Haero Jumentum Quis Refero">
<span style="color:#FFFFFF">Bene Dignissim Ea Enim Haero Jumentum Quis Refero</span>
</a>
</div>
<div class="component-division__text__text">
<span style="color:#FFFFFF">
<p>Mollit perferendis dicta augue aute eum lectus asperiores volutpat</p>
</span>
</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-division {
clear: both; }
.component-division:before, .component-division:after {
content: "";
display: table; }
.component-division:after {
clear: both; }

/* ****************************************** divisions component */
.component-division {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
min-height: 620px;
position: relative; }
.component-division *,
.component-division *::after,
.component-division *::before {
box-sizing: border-box; }
.component-division__veil {
height: 100%;
position: absolute;
z-index: 0;
width: 100%; }
.component-division__text {
position: absolute;
z-index: 1;
margin: 10% 6%;
padding: 3% 6% 3% 3%;
width: 46%; }
.component-division__text__link {
font-size: 30px;
font-weight: 600; }
.component-division__text__link a {
background: url("../images/arrow-orange.png") no-repeat 3px 11px/auto 50%;
color: #0855a0;
padding: 0 0 0 15px;
text-decoration: none; }
.component-division__text__link + .component-division__text__text {
padding: 0 0 0 15px; }
.component-division__text h2:first-child, .component-division__text h3:first-child, .component-division__text h4:first-child, .component-division__text h5:first-child, .component-division__text h6:first-child {
margin-top: 0; }
.component-division__text p:last-child {
margin: 0; }
.component-division.topright .component-division__veil {
background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3)); }
.component-division.topright .component-division__text {
top: 0;
right: 0; }
.component-division.topleft .component-division__veil {
background-image: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.3)); }
.component-division.topleft .component-division__text {
top: 0;
left: 0; }
.component-division.bottomright .component-division__veil {
background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3)); }
.component-division.bottomright .component-division__text {
bottom: 0;
right: 0; }
.component-division.bottomleft .component-division__veil {
background-image: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.3)); }
.component-division.bottomleft .component-division__text {
bottom: 0;
left: 0; }

@media only screen and (max-width: 767px) {
.component-division {
min-height: 10px; }
.component-division__veil {
position: relative; }
.component-division__text {
margin: 5%;
padding: 3% 6% 3% 3%;
position: relative;
width: 90%; } }
Show more code
The zip file contains the orginal SCSS files

You can change the background image on the divider chaging the next code:

<div class="component-division topright" style="background:url('images/backgrounds/1900_1380_01.jpg') no-repeat center center / cover">

Load any image you want.

Text color and background variant

Divisions COMPONENT

<div class="component-division topright" style="background:url('images/backgrounds/1900_1380_01.jpg') no-repeat center center / cover">
<div class="component-division__veil"></div>
<div class="component-division__text" style="background-color:rgba(8,85,160,0.8); color:#FFFFFF">
<div class="component-division__text__text">
<p>“Physics is not a descriptive science in which you just observe nature and make a catalogue of the facts. The goal is to understand the logic behind the facts and discover nature's inner workings” says Giudice.</p>
</div>
</div>
</div>
<div class="component-division topright" style="background:url('images/backgrounds/1900_1380_01.jpg') no-repeat center center / cover">
<div class="component-division__veil"></div>
<div class="component-division__text" style="background-color:rgba(255,255,255,0.8); color:#666666">
<div class="component-division__text__text">
<p>“Physics is not a descriptive science in which you just observe nature and make a catalogue of the facts. The goal is to understand the logic behind the facts and discover nature's inner workings” says Giudice.</p>
</div>
</div>
</div>
<div class="component-division topright" style="background:url('images/backgrounds/1900_1380_01.jpg') no-repeat center center / cover">
<div class="component-division__veil"></div>
<div class="component-division__text" style="background-color:rgba(158, 84, 154, 0.8); color:#FFFFFF">
<div class="component-division__text__text">
<p>“Physics is not a descriptive science in which you just observe nature and make a catalogue of the facts. The goal is to understand the logic behind the facts and discover nature's inner workings” says Giudice.</p>
</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-division {
clear: both; }
.component-division:before, .component-division:after {
content: "";
display: table; }
.component-division:after {
clear: both; }

/* ****************************************** divisions component */
.component-division {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
min-height: 620px;
position: relative; }
.component-division *,
.component-division *::after,
.component-division *::before {
box-sizing: border-box; }
.component-division__veil {
height: 100%;
position: absolute;
z-index: 0;
width: 100%; }
.component-division__text {
position: absolute;
z-index: 1;
margin: 10% 6%;
padding: 3% 6% 3% 3%;
width: 46%; }
.component-division__text__link {
font-size: 30px;
font-weight: 600; }
.component-division__text__link a {
background: url("../images/arrow-orange.png") no-repeat 3px 11px/auto 50%;
color: #0855a0;
padding: 0 0 0 15px;
text-decoration: none; }
.component-division__text__link + .component-division__text__text {
padding: 0 0 0 15px; }
.component-division__text h2:first-child, .component-division__text h3:first-child, .component-division__text h4:first-child, .component-division__text h5:first-child, .component-division__text h6:first-child {
margin-top: 0; }
.component-division__text p:last-child {
margin: 0; }
.component-division.topright .component-division__veil {
background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3)); }
.component-division.topright .component-division__text {
top: 0;
right: 0; }
.component-division.topleft .component-division__veil {
background-image: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.3)); }
.component-division.topleft .component-division__text {
top: 0;
left: 0; }
.component-division.bottomright .component-division__veil {
background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3)); }
.component-division.bottomright .component-division__text {
bottom: 0;
right: 0; }
.component-division.bottomleft .component-division__veil {
background-image: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.3)); }
.component-division.bottomleft .component-division__text {
bottom: 0;
left: 0; }

@media only screen and (max-width: 767px) {
.component-division {
min-height: 10px; }
.component-division__veil {
position: relative; }
.component-division__text {
margin: 5%;
padding: 3% 6% 3% 3%;
position: relative;
width: 90%; } }
Show more code
The zip file contains the orginal SCSS files

You can change the text block background and text color.
You need to change this code to do that:

<div class="component-division__text" style="background-color:rgba(255,255,255,1); color:#666666">

If you have a link to other content you need to change this code to:

<span style="color:#666666">Our history</span>

Text position variant

Divisions COMPONENT

<div class="component-division topright" style="background:url('images/backgrounds/1900_1380_01.jpg') no-repeat center center / cover">
<div class="component-division__veil"></div>
<div class="component-division__text" style="background-color:rgba(8,85,160,0.8); color:#FFFFFF">
<div class="component-division__text__text">
<p>“Physics is not a descriptive science in which you just observe nature and make a catalogue of the facts. The goal is to understand the logic behind the facts and discover nature's inner workings” says Giudice.</p>
</div>
</div>
</div>
<div class="component-division bottomright" style="background:url('images/backgrounds/1900_1380_01.jpg') no-repeat center center / cover">
<div class="component-division__veil"></div>
<div class="component-division__text" style="background-color:rgba(8,85,160,0.8); color:#FFFFFF">
<div class="component-division__text__text">
<p>“Physics is not a descriptive science in which you just observe nature and make a catalogue of the facts. The goal is to understand the logic behind the facts and discover nature's inner workings” says Giudice.</p>
</div>
</div>
</div>
<div class="component-division topleft" style="background:url('images/backgrounds/1900_1380_01.jpg') no-repeat center center / cover">
<div class="component-division__veil"></div>
<div class="component-division__text" style="background-color:rgba(8,85,160,0.8); color:#FFFFFF">
<div class="component-division__text__text">
<p>“Physics is not a descriptive science in which you just observe nature and make a catalogue of the facts. The goal is to understand the logic behind the facts and discover nature's inner workings” says Giudice.</p>
</div>
</div>
</div>
<div class="component-division bottomleft" style="background:url('images/backgrounds/1900_1380_01.jpg') no-repeat center center / cover">
<div class="component-division__veil"></div>
<div class="component-division__text" style="background-color:rgba(8,85,160,0.8); color:#FFFFFF">
<div class="component-division__text__text">
<p>“Physics is not a descriptive science in which you just observe nature and make a catalogue of the facts. The goal is to understand the logic behind the facts and discover nature's inner workings” says Giudice.</p>
</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-division {
clear: both; }
.component-division:before, .component-division:after {
content: "";
display: table; }
.component-division:after {
clear: both; }

/* ****************************************** divisions component */
.component-division {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
min-height: 620px;
position: relative; }
.component-division *,
.component-division *::after,
.component-division *::before {
box-sizing: border-box; }
.component-division__veil {
height: 100%;
position: absolute;
z-index: 0;
width: 100%; }
.component-division__text {
position: absolute;
z-index: 1;
margin: 10% 6%;
padding: 3% 6% 3% 3%;
width: 46%; }
.component-division__text__link {
font-size: 30px;
font-weight: 600; }
.component-division__text__link a {
background: url("../images/arrow-orange.png") no-repeat 3px 11px/auto 50%;
color: #0855a0;
padding: 0 0 0 15px;
text-decoration: none; }
.component-division__text__link + .component-division__text__text {
padding: 0 0 0 15px; }
.component-division__text h2:first-child, .component-division__text h3:first-child, .component-division__text h4:first-child, .component-division__text h5:first-child, .component-division__text h6:first-child {
margin-top: 0; }
.component-division__text p:last-child {
margin: 0; }
.component-division.topright .component-division__veil {
background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3)); }
.component-division.topright .component-division__text {
top: 0;
right: 0; }
.component-division.topleft .component-division__veil {
background-image: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.3)); }
.component-division.topleft .component-division__text {
top: 0;
left: 0; }
.component-division.bottomright .component-division__veil {
background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3)); }
.component-division.bottomright .component-division__text {
bottom: 0;
right: 0; }
.component-division.bottomleft .component-division__veil {
background-image: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.3)); }
.component-division.bottomleft .component-division__text {
bottom: 0;
left: 0; }

@media only screen and (max-width: 767px) {
.component-division {
min-height: 10px; }
.component-division__veil {
position: relative; }
.component-division__text {
margin: 5%;
padding: 3% 6% 3% 3%;
position: relative;
width: 90%; } }
Show more code
The zip file contains the orginal SCSS files

You can change the text block position.
You have four options: Left top, Left bottom, Right top and Right bottom

In order to do that you need to change te next code:

<div class="component-division lefttop" style="background:url('images/backgrounds/1900_1380_05.jpg') no-repeat center center / cover">

You need to change "lefttop" (Left top position) to "leftbottom" (Left bottom position), "righttop" (Right top position) or "rightbottom" (Right bottom position)