Building Components

This workshop is hands-on and we have put together a series of exercises which will help you ease into the component based development process. We start with exercises for creating simple components and from there we'll dive into more advanced tasks in which we will integrate the components with Drupal.

Components we will build in this chapter




Renders a string of text. Typically used to label or tag content.


Used as section's or page's titles. It uses an optional url and provides mechanism for changing heading level (h1 - h6).


Used as Call To Action (CTA) throughout the website. It offers an optional URL or it can be rendered as a <button> element.

Movie Card

A movie card is a teaser view of a full movie node. It contains an image, title, teaser, rating and links to the the full movie node. They are used to display a collection of movies organized by genre.

Featured Movie

The featured movie is a large version of a movie card which is displayed on the homepage. Think of this component as a hero.

Movie Card Collection

A movie collection is a group of movies organized by various categories (i.e. Horror, Action, Comedy, etc.).

Movie List

A multi-row listing of movies organized by movie genre.

Additional pre-built components

In the interest of time, we have provided a hand-full of pre-built components which will be used in this training. These components include:




Allows us to add movies to our play list.

MPAA Rating

Provides the MPAA rating info (i.e. PG-13).

Average Rating

Provides a 5 star rating mechanism.

In this chapter we will also learn about Drupal Libraries, which is how we add CSS and Javascript to a Drupal 8 theme, as well as Component Variations. Component variations allow us to use an existing component and create a new version of it with little or big changes in its look/feel or behavior.