CERN Accelerating science

Close menu

Article box

Components - BOXES
Download files1007.84 KB

A preview card is used to present a preview of content that redirects the user to another page. It consists of a background picture, the title of the page or article to which the card redirects, the content type (e.g. opinion, news, ..) and the date it was released. 

Usage

CERN provided Drupal 8 sites:

  • Install and enable the Article box module and all its dependencies under Extend
  • After installing you can add article boxes on all content types which use Paragraph components like the Landing Page
  • To create an article box just choose Article box from the Paragraph chooser (if there is one) and define your properties
  • You can define properties like the image (either upload one or choose one from CDS), the used colors, the text and the used link
  • After defining the properties just click on save and your article box is done
  • You can combine your article box with other box types and create your own custom "box plane"

Other:

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

Preview card COMPONENT

<div class="component-preview-cards box-pattern simple-display" style="background:url('images/0710029_02-A4-at-144-dpi.jpg') no-repeat center center / cover">
<div class="component-preview-cards__veil"></div>
<div class="component-preview-cards__box_wrapper">
<div class="component-preview-cards__box">
<div class="preview-card__title">
<h3 class="standard-title">
<a href="#" hreflang="en" title="CERN people gallery">
<span style="color:#FFFFFF">CERN people gallery</span>
</a>
</h3>
</div>
<div class="preview-card__body"></div>
<div class="preview-cards__subtext">
<div class="preview-card__category" style="color:#FFFFFF">CERN People</div>
<div class="preview-card__date" style="color:#FFFFFF">3 July, 18</div>
</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-preview-cards.portrait .preview-card__box .preview-card__category:after, .component-preview-cards.landscape .preview-card__box .preview-card__category:after {
border-right: 1px solid #ffffff;
height: 10px;
content: '';
display: inline-block;
width: 1px;
margin: 0 8px; }

/* ****************************************** preview card */
.component-preview-cards {
position: relative;
display: inline-block; }
.component-preview-cards .material-icons {
display: none; }
.component-preview-cards__veil {
background-image: -webkit-gradient(linear, left bottom, left top, from(#000609), to(transparent));
background-image: -webkit-linear-gradient(bottom, #000609, transparent);
background-image: -o-linear-gradient(bottom, #000609, transparent);
background-image: linear-gradient(to top, #000609, transparent);
bottom: 0;
min-height: 195px;
position: absolute;
width: 100%;
z-index: 0; }
.component-preview-cards__icon.video {
font-family: 'Material Icons';
width: 30px;
height: 30px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
color: white; }
.component-preview-cards__icon.video .type_video {
display: block;
font-size: 50px; }
.component-preview-cards__icon.image {
font-family: 'Material Icons';
width: 30px;
height: 30px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
color: white; }
.component-preview-cards__icon.image .type_image {
display: block;
font-size: 50px; }
.component-preview-cards.portrait {
width: 100%;
height: 210px; }
.component-preview-cards.portrait .preview-card__box {
position: absolute;
top: 55%;
left: 38px;
width: 80%;
display: inline-block; }
.component-preview-cards.portrait .preview-card__box .preview-card__title h3 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 20px;
margin: 0; }
.component-preview-cards.portrait .preview-card__box .preview-card__title h3 a {
border-bottom: 0; }
.component-preview-cards.portrait .preview-card__box .preview-card__title:before {
background: url(../images/arrow-orange-little.png) 0 2px no-repeat;
content: '';
width: 12px;
height: 20px;
display: inline-block;
margin-left: -12px;
position: relative;
top: 30px; }
.component-preview-cards.portrait .preview-card__box .preview-card__category {
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
color: #ffffff;
line-height: 18px; }
.component-preview-cards.portrait .preview-card__box .preview-card__date {
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
color: #ffffff;
line-height: 18px; }
.component-preview-cards.landscape {
width: 40%;
height: 390px; }
.component-preview-cards.landscape .preview-card__box {
position: absolute;
top: 70%;
left: 38px;
width: 80%;
display: inline-block; }
.component-preview-cards.landscape .preview-card__box .preview-card__title h3 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 20px;
margin: 0; }
.component-preview-cards.landscape .preview-card__box .preview-card__title h3 a {
border-bottom: 0; }
.component-preview-cards.landscape .preview-card__box .preview-card__title:before {
background: url(../images/arrow-orange-little.png) 0 2px no-repeat;
content: '';
width: 12px;
height: 20px;
display: inline-block;
margin-left: -12px;
position: relative;
top: 30px; }
.component-preview-cards.landscape .preview-card__box .preview-card__category {
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
color: #ffffff;
line-height: 18px; }
.component-preview-cards.landscape .preview-card__box .preview-card__date {
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
color: #ffffff;
line-height: 18px; }
@media screen and (max-width: 767px) {
.component-preview-cards.landscape {
width: 100%; } }
Show more code
The zip file contains the orginal SCSS files

Copy/paste the provided HTML code to where you want. You just have to edit the information to suit your needs.

Type variant

Preview card COMPONENT

<div id="preview-card" class="component-preview-cards portrait" style="background:url('images/1900_1380_01.jpg') no-repeat center center / cover">
<div class="component-preview-cards__veil"></div>
<div class="component-preview-cards__icon video">
<i class="material-icons type_video">play_arrow</i>
<i class="material-icons type_image">photo</i>
</div>
<div class="preview-card__box">
<div class="preview-card__title">
<h3>
<a href="#" title="Are theoreticians just football fanatics?">
<span style="color:#FFFFFF">Are theoreticians just football fanatics?</span>
</a>
</h3>
</div>
<div class="preview-card__category">
In theory
</div>
<div class="preview-card__date">
14 March, 17
</div>
</div>
</div>

<div id="preview-card--2" class="component-preview-cards portrait" style="background:url('images/1900_1380_02.jpg') no-repeat center center / cover">
<div class="component-preview-cards__veil"></div>
<div class="component-preview-cards__icon image">
<i class="material-icons type_video">play_arrow</i>
<i class="material-icons type_image">photo</i>
</div>
<div class="preview-card__box">
<div class="preview-card__title">
<h3>
<a href="#" title="Welcome to the Theory corridor">
<span style="color:#D7D7D7">Welcome to the Theory corridor</span>
</a>
</h3>
</div>
<div class="preview-card__category">
In theory
</div>
<div class="preview-card__date">
14 March, 17
</div>
</div>
</div>

<div id="preview-card--3" class="component-preview-cards portrait" style="background:url('images/1900_1380_13.jpg') no-repeat center center / cover">
<div class="component-preview-cards__veil"></div>
<div class="component-preview-cards__icon ">
<i class="material-icons type_video">play_arrow</i>
<i class="material-icons type_image">photo</i>
</div>
<div class="preview-card__box">
<div class="preview-card__title">
<h3>
<a href="#" title="Why are theoreticians filled with wanderlust?">
<span style="color:#D7D7D7">Why are theoreticians filled with wanderlust?</span>
</a>
</h3>
</div>
<div class="preview-card__category">
In theory
</div>
<div class="preview-card__date">
9 July, 17
</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-preview-cards.portrait .preview-card__box .preview-card__category:after, .component-preview-cards.landscape .preview-card__box .preview-card__category:after {
border-right: 1px solid #ffffff;
height: 10px;
content: '';
display: inline-block;
width: 1px;
margin: 0 8px; }

/* ****************************************** preview card */
.component-preview-cards {
position: relative;
display: inline-block; }
.component-preview-cards .material-icons {
display: none; }
.component-preview-cards__veil {
background-image: -webkit-gradient(linear, left bottom, left top, from(#000609), to(transparent));
background-image: -webkit-linear-gradient(bottom, #000609, transparent);
background-image: -o-linear-gradient(bottom, #000609, transparent);
background-image: linear-gradient(to top, #000609, transparent);
bottom: 0;
min-height: 195px;
position: absolute;
width: 100%;
z-index: 0; }
.component-preview-cards__icon.video {
font-family: 'Material Icons';
width: 30px;
height: 30px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
color: white; }
.component-preview-cards__icon.video .type_video {
display: block;
font-size: 50px; }
.component-preview-cards__icon.image {
font-family: 'Material Icons';
width: 30px;
height: 30px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
color: white; }
.component-preview-cards__icon.image .type_image {
display: block;
font-size: 50px; }
.component-preview-cards.portrait {
width: 100%;
height: 210px; }
.component-preview-cards.portrait .preview-card__box {
position: absolute;
top: 55%;
left: 38px;
width: 80%;
display: inline-block; }
.component-preview-cards.portrait .preview-card__box .preview-card__title h3 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 20px;
margin: 0; }
.component-preview-cards.portrait .preview-card__box .preview-card__title h3 a {
border-bottom: 0; }
.component-preview-cards.portrait .preview-card__box .preview-card__title:before {
background: url(../images/arrow-orange-little.png) 0 2px no-repeat;
content: '';
width: 12px;
height: 20px;
display: inline-block;
margin-left: -12px;
position: relative;
top: 30px; }
.component-preview-cards.portrait .preview-card__box .preview-card__category {
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
color: #ffffff;
line-height: 18px; }
.component-preview-cards.portrait .preview-card__box .preview-card__date {
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
color: #ffffff;
line-height: 18px; }
.component-preview-cards.landscape {
width: 40%;
height: 390px; }
.component-preview-cards.landscape .preview-card__box {
position: absolute;
top: 70%;
left: 38px;
width: 80%;
display: inline-block; }
.component-preview-cards.landscape .preview-card__box .preview-card__title h3 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 20px;
margin: 0; }
.component-preview-cards.landscape .preview-card__box .preview-card__title h3 a {
border-bottom: 0; }
.component-preview-cards.landscape .preview-card__box .preview-card__title:before {
background: url(../images/arrow-orange-little.png) 0 2px no-repeat;
content: '';
width: 12px;
height: 20px;
display: inline-block;
margin-left: -12px;
position: relative;
top: 30px; }
.component-preview-cards.landscape .preview-card__box .preview-card__category {
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
color: #ffffff;
line-height: 18px; }
.component-preview-cards.landscape .preview-card__box .preview-card__date {
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
color: #ffffff;
line-height: 18px; }
@media screen and (max-width: 767px) {
.component-preview-cards.landscape {
width: 100%; } }
Show more code
The zip file contains the orginal SCSS files

You can change the type of each card, and the showed icon, just changing a class:

<div class="component-preview-cards__icon video">
<div class="component-preview-cards__icon image">
<div class="component-preview-cards__icon">

Set "video" for the video icon
Set "image" for the image icon
Set no class to show no icon

Display variant

Preview card COMPONENT

<div id="preview-card" class="component-preview-cards landscape" style="background:url('images/1900_1380_01.jpg') no-repeat center center / cover">
<div class="component-preview-cards__veil"></div>
<div class="component-preview-cards__icon video">
<i class="material-icons type_video">play_arrow</i>
<i class="material-icons type_image">photo</i>
</div>
<div class="preview-card__box">
<div class="preview-card__title">
<h3>
<a href="#" title="Are theoreticians just football fanatics?">
<span style="color:#FFFFFF">Are theoreticians just football fanatics?</span>
</a>
</h3>
</div>
<div class="preview-card__category">
In theory
</div>
<div class="preview-card__date">
14 March, 17
</div>
</div>
</div>

<div id="preview-card--2" class="component-preview-cards landscape" style="background:url('images/1900_1380_02.jpg') no-repeat center center / cover">
<div class="component-preview-cards__veil"></div>
<div class="component-preview-cards__icon image">
<i class="material-icons type_video">play_arrow</i>
<i class="material-icons type_image">photo</i>
</div>
<div class="preview-card__box">
<div class="preview-card__title">
<h3>
<a href="#" title="Welcome to the Theory corridor">
<span style="color:#D7D7D7">Welcome to the Theory corridor</span>
</a>
</h3>
</div>
<div class="preview-card__category">
In theory
</div>
<div class="preview-card__date">
14 March, 17
</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-preview-cards.portrait .preview-card__box .preview-card__category:after, .component-preview-cards.landscape .preview-card__box .preview-card__category:after {
border-right: 1px solid #ffffff;
height: 10px;
content: '';
display: inline-block;
width: 1px;
margin: 0 8px; }

/* ****************************************** preview card */
.component-preview-cards {
position: relative;
display: inline-block; }
.component-preview-cards .material-icons {
display: none; }
.component-preview-cards__veil {
background-image: -webkit-gradient(linear, left bottom, left top, from(#000609), to(transparent));
background-image: -webkit-linear-gradient(bottom, #000609, transparent);
background-image: -o-linear-gradient(bottom, #000609, transparent);
background-image: linear-gradient(to top, #000609, transparent);
bottom: 0;
min-height: 195px;
position: absolute;
width: 100%;
z-index: 0; }
.component-preview-cards__icon.video {
font-family: 'Material Icons';
width: 30px;
height: 30px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
color: white; }
.component-preview-cards__icon.video .type_video {
display: block;
font-size: 50px; }
.component-preview-cards__icon.image {
font-family: 'Material Icons';
width: 30px;
height: 30px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
color: white; }
.component-preview-cards__icon.image .type_image {
display: block;
font-size: 50px; }
.component-preview-cards.portrait {
width: 100%;
height: 210px; }
.component-preview-cards.portrait .preview-card__box {
position: absolute;
top: 55%;
left: 38px;
width: 80%;
display: inline-block; }
.component-preview-cards.portrait .preview-card__box .preview-card__title h3 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 20px;
margin: 0; }
.component-preview-cards.portrait .preview-card__box .preview-card__title h3 a {
border-bottom: 0; }
.component-preview-cards.portrait .preview-card__box .preview-card__title:before {
background: url(../images/arrow-orange-little.png) 0 2px no-repeat;
content: '';
width: 12px;
height: 20px;
display: inline-block;
margin-left: -12px;
position: relative;
top: 30px; }
.component-preview-cards.portrait .preview-card__box .preview-card__category {
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
color: #ffffff;
line-height: 18px; }
.component-preview-cards.portrait .preview-card__box .preview-card__date {
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
color: #ffffff;
line-height: 18px; }
.component-preview-cards.landscape {
width: 40%;
height: 390px; }
.component-preview-cards.landscape .preview-card__box {
position: absolute;
top: 70%;
left: 38px;
width: 80%;
display: inline-block; }
.component-preview-cards.landscape .preview-card__box .preview-card__title h3 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 20px;
margin: 0; }
.component-preview-cards.landscape .preview-card__box .preview-card__title h3 a {
border-bottom: 0; }
.component-preview-cards.landscape .preview-card__box .preview-card__title:before {
background: url(../images/arrow-orange-little.png) 0 2px no-repeat;
content: '';
width: 12px;
height: 20px;
display: inline-block;
margin-left: -12px;
position: relative;
top: 30px; }
.component-preview-cards.landscape .preview-card__box .preview-card__category {
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
color: #ffffff;
line-height: 18px; }
.component-preview-cards.landscape .preview-card__box .preview-card__date {
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
color: #ffffff;
line-height: 18px; }
@media screen and (max-width: 767px) {
.component-preview-cards.landscape {
width: 100%; } }
Show more code
The zip file contains the orginal SCSS files

You can change the display of each card just changing a class:

<div id="preview-card" class="component-preview-cards landscape">
<div id="preview-card" class="component-preview-cards portrait">

Set "portrait" for an vertical display
Set "landscape" for an horizontal display