In this article we will present how use the CERN components, a useful tool to render content types in a predefined way.

What is a component?

The CERN Drupal 8 theme comes with a set of re-usable components. A component is a pre-designed template that is used in order to render your content in a specific way. The components, along with the theme, help to keep the same look and feel in the CERN websites. There is no better way to understand what a component is by giving a simple example from the home website.


pattern example


The example above is used in the widely used boxes in our new home website. The pattern consists of the following pattern fields:

  • Title
  • Category
  • News Format
  • Date
  • Background Image


How to enable the CERN components?

The CERN components are encapsulated in a single module: The CERN Components module. In order to be able to use the components, you just need to enable it. For better user experience, you are also highly advised to use the CERN theme.


Where can I use the components?

Until this point, it is clear that components constitute scaffolds in order to display a content type in specific way. But where can you use them? The answer is simple: in any place that you display content. This can be in a view, a block or even in a node itself.

For example in the home website you probably have noticed the following carousel.


News Carousel

This is a view that displays multiple news rendered using the Preview Card component. Every piece of news is rendered as Preview Card and all news are rendered within a view. However, in order to create the carousel or some other view formats, you need to use the Display Formats module.