CERN Accelerating science

Close menu

Agenda item

Components - CONTENT

An agenda is used to summarize the details of an event. It is a text block that contains the day, date, time, name of the event, target group, speakers/hosts/ , location and a call to action to add the event to the users’ personal calendar. 

Usage

CERN provided Drupal 8 sites:

  • Install and enable the Time agenda module and all its dependencies under Extend
  • After installing you can add time agendas on all content types which use Paragraph components like the Landing Page
  • To create a time agenda just choose Time agenda from the Paragraph chooser (if there is one) and define your properties
  • You can define properties like the title, start and end date, some details and an internal link
  • After defining the properties just click on save and your time agenda is done

Other:

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

Agenda COMPONENT

<div id="component-event" class="component-event">
<div class="component-event-antetitle">Wednesday</div>
<div class="component-event-calendar">
<div class="component-event-box1">
<div class="component-event-dates">
<span class="component-event-dates-1">29 Aug</span>
<span class="component-event-dates-2">/18</span>
</div>
<div class="component-event-time">
19:30
<span>(Europe/Zurich)</span>
<br>
<span>Ends:</span>
31 Aug/18
<span>20:00</span>
</div>
</div>
<div class="component-event-box2">
<div class="component-event-button">
<a href="http://example.com" title="http://example.com" aria-label="">
<span>Import to my calendar</span>
</a>
</div>
</div>
</div>
<h1 class="component-event-title">
Gravitational Waves: An Entirely New Window to Cosmos
</h1>
<div class="component-event-content">
<div class="component-event-list">
<div class="component-event-item full-html-markup full-text-animation">
<ul>
<li>
<strong>For Scientists</strong>
</li>
<li>
<strong>By David Reitze </strong>- Executive Director, LIGO Laboratory, California Institute of Technology and Professor
of Physics, University of Florida</li>
<li>
<strong>Where CERN</strong> Geneva, Switzerland 500-1-001 - Main Auditorium</li>
</ul>
</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-event .component-event-title {
font-size: 40px;
color: #000000;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
margin: 0px 0 20px;
line-height: 50px; }
@media only screen and (max-width: 480px) {
#component-event .component-event-title {
font-size: 25px;
line-height: 28px; } }

#component-event .component-event-calendar .component-event-box1 .component-event-dates {
font-size: 48px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
line-height: 45px;
text-transform: uppercase; }

/* ****************************************** component event */
#component-event .component-event-antetitle {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.2px;
margin-bottom: 10px; }

#component-event .component-event-calendar .component-event-box1 {
display: inline-block;
width: 48%; }
#component-event .component-event-calendar .component-event-box1 .component-event-dates span {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300; }
#component-event .component-event-calendar .component-event-box1 .component-event-time {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.2px; }
#component-event .component-event-calendar .component-event-box1 .component-event-time span {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400; }

#component-event .component-event-calendar .component-event-box2 {
display: inline-block;
width: 51%;
text-align: right; }
#component-event .component-event-calendar .component-event-box2 .component-event-button {
border: 2px solid #0855a0;
border-radius: 5px;
padding: 10px;
font-size: 16px;
color: #0855a0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
display: inline-block;
position: relative;
top: -17px;
cursor: pointer; }
#component-event .component-event-calendar .component-event-box2 .component-event-button .material-icons {
font-size: 30px;
top: 5px;
margin-right: 5px;
position: relative; }
#component-event .component-event-calendar .component-event-box2 .component-event-button span {
display: inline-block;
position: relative;
top: -5px; }

@media screen and (max-width: 767px) {
#component-event .component-event-calendar .component-event-box1 {
width: 100%;
float: left; }
#component-event .component-event-calendar .component-event-box2 {
width: 100%;
float: left;
text-align: left; }
#component-event .component-event-calendar .component-event-box2 .component-event-button {
margin: 20px 0;
top: 0; } }

#component-event .component-event-content .component-event-list {
padding-left: 0; }
#component-event .component-event-content .component-event-list .component-event-item {
display: block;
font-family: 'Source Sans Pro', sans-serif;
margin-top: 20px;
font-size: 16px;
display: block;
line-height: 26px;
margin-bottom: 15px;
line-height: 18px; }
#component-event .component-event-content .component-event-list .component-event-item ul {
margin-left: 22px;
padding-left: 0;
margin-bottom: 15px; }
#component-event .component-event-content .component-event-list .component-event-item ul li {
list-style-type: none;
margin-bottom: 10px;
text-indent: -18px; }
#component-event .component-event-content .component-event-list .component-event-item ul li:before {
content: '';
background: url(../images/arrow-gris.png) left center no-repeat;
width: 8px;
height: 24px;
margin-right: 10px;
display: inline-block;
position: relative;
top: 7px; }
#component-event .component-event-content .component-event-list .component-event-item ul li a {
color: #0855a0;
text-decoration: underline;
border-bottom: 0; }
#component-event .component-event-content .component-event-list .component-event-item p {
font-family: 'Source Sans Pro', sans-serif; }
#component-event .component-event-content .component-event-list .component-event-item p a {
color: #0855a0;
text-decoration: underline;
border-bottom: 0; }
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 (dates, text and links) to suit your needs.