CERN Accelerating science

Close menu

Agenda box

Components - BOXES
Usage

CERN provided Drupal 8 sites:

  • Install and enable the Agenda box module and all its dependencies under Extend
  • After installing you can add agenda boxes on all content types which use Paragraph components like the Landing Page
  • To create an agenda box just choose Agenda box 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 used colors, the used link, the used dates and the displayed text
  • After defining the properties just click on save and your agenda box is done
  • You can combine your agenda box with other box types and create your own custom "box plane"

Other:

  • Just include one of the variant's HTML snippets
  • For some variants like landscape or portrait mode please see the Article box page
  • If you're experienced with HTML and CSS you even can customise it further!

Screenshot showing the Agenda Box

<div class="agenda-box-pattern simple-display" style="background:url('images/0808022_01-A4-at-144-dpi.jpg') no-repeat center center / cover">
<div class="agenda-box-pattern__veil"></div>
<div class="agenda-box-pattern__box-wrapper">
<div class="agenda-box-date-wrapper" style="color: #FFFFFF;">
<span class="agenda-box-week-day">Saturday</span>
<div class="agenda-box-event-dates">
<span class="agenda-box-event-dates-1">30</span>
<span class="agenda-box-event-dates-2">Jun</span>
<span class="agenda-box-event-dates-3">/18</span>
</div>
<div class="agenda-box-event-time">
<span class="agenda-box-start-time">
11:00 - 12:00
</span> (Europe/Zurich)
</div>
</div>
<div class="agenda-box-link mb-1 mt-1">
<h3>
<a href="#" title="Accelerators for Medicine">
<span class="text-color" style="color: #FFFFFF">Accelerators for Medicine</span>
</a>
</h3>
</div>
</div>
</div>
Show more code
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.