CERN Accelerating science

Close menu

Thumbnail box

Components - BOXES
Usage

CERN provided Drupal 8 sites:

  • Install and enable the Thumbnail box module and all its dependencies under Extend
  • After installing you can add thumbnail boxes on all content types which use Paragraph components like the Landing Page
  • To create an thumbnail box just choose Thumbnail box from the Paragraph chooser (if there is one) and define your properties
  • You can define properties like the displayed image (either upload one or choose one from CDS), the used colors, the displayed text and the used link
  • After defining the properties just click on save and your thumbnail box is done
  • You can combine your thumbnail 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 Thumbnail Box

 

<div class="component-related_card box-pattern simple-display" style="background-color: rgba(8,85,160,1)">
<div class="component-related_card__wrapper">
<div class="component-related_card__content">
<div class="component-related_card__content__profile" style="background: url('images/1207136_101-A5-at-72-dpi.jpg') no-repeat center center / cover;"></div>
<div class="component-related_card__content__link">
<h3>
<a href="#" title="Opinion: We need to talk about the Higgs">
<span class="text-color" style="color: #FFFFFF">Opinion: We need to talk about the Higgs</span>
</a>
</h3>
</div>
<div class="component-related_card__content__format" style="color: #FFFFFF">
Physics
</div>
<div class="component-related_card__content__text" style="color: #FFFFFF">
<p>It is six years ago that the discovery of the Higgs boson
</p>
</div>
<div class="preview-card__date" style="color: #FFFFFF">
6 July, 18
</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.