CERN Accelerating science

Close menu

Resource box

Components - BOXES
Usage

CERN provided Drupal 8 sites:

  • Install and enable the Resource box module and all its dependencies under Extend
  • After installing you can add resource boxes on all content types which use Paragraph components like the Landing Page
  • To create a resource box just choose Resource 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 and the used icon determined by your choice of type
  • After defining the properties just click on save and your resource box is done
  • You can combine your resource 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 Ressource Box

<div class="component-media-content simple-display image" style="background-image:url('images/1101010_03-A4-at-144-dpi.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover;">
<div class="component-media-content__veil"></div>
<div class="component-media-content__wrapper">
<div class="component-media-content__subwrapper">
<div class="component-media-content__icon">
<div class="type_video">video</div>
<div class="type_image">image</div>
</div>
<div class="component-media-content__title">
<h3>
<a href="#" title="ATLAS images gallery">
<span style="color: #FFFFFF;">ATLAS images gallery</span>
</a>
</h3>
</div>
</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.