CERN Accelerating science

Close menu

Featured quote

Components - CONTENT

A quote is used to highlight a certain idea or saying inside an article or opinion. It consist 2 big quotation marks, the quote and the name of the writer of the quote. 

Usage

CERN provided Drupal 8 sites:

  • Install and enable the Featured quote module and all its dependencies under Extend
  • After installing you can add quotes on all content types which use Paragraph components like the Landing Page
  • To create a quote just choose Featured quote from the Paragraph chooser (if there is one) and define your quote
  • Then just click save and your quote is done

Other:

  • Just include the HTML snippet provided below
  • If you're experienced with HTML and CSS you even can customise it further!

Quote COMPONENT

<div class="component-quote">
<quote>
<div>
<span>I’m completely useless with my hands,” laughs John Ellis from in front of the mountains of papers and books that fill
his office. “My wife finally got me doing some painting in the house for the first time in 30 years, just the day
before yesterday!</span>
</div>
<span>- - Slava Rychkov</span>
</quote>
</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");
.component-quote quote {
border-top: 1px solid #cacaca;
border-bottom: 1px solid #cacaca;
font-size: 20px;
color: #292929;
font-family: 'Source Sans Pro', sans-serif;
display: block;
line-height: 32px; }

/* ****************************************** component event */
/* ****************************************** quote */
.component-quote quote {
padding-bottom: 30px;
margin: 0; }
.component-quote quote div {
padding: 0 40px;
margin-bottom: 20px; }
.component-quote quote div span {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
padding: 0; }
.component-quote quote:before {
content: '';
background: url(../images/quote-after.png) top left no-repeat;
width: 23px;
height: 20px;
display: inline-block;
top: 30px;
position: relative; }
.component-quote quote:after {
content: '';
background: url(../images/quote-before.png) bottom right no-repeat;
width: 23px;
height: 20px;
float: right; }
.component-quote quote span {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
padding: 0 40px; }
Show more code
The zip file contains the orginal SCSS files

Just paste the HTML snippet in your site and edit your quote in