Featured Content

So far we've been building individual components and built them in a way we can re-use them. Well, the time has come to build a list of content where we will re-use most components we've built. This is where component-based shines. By looking at the design comp below, we can see that we will be showing a collection of cards. In addition, the section has a title of "Featured Content" .

Featured Content List

Component data

  1. Inside src/patterns/componentscreate a new folder called featured-content

  2. Inside the featured-content folder create a new file called featured-content.json

  3. Inside featured-content.json add the following code:

There is a lot going on in this file. Let's go over it and you will see that it's actually relatively straight forward.

  • First we defined the heading object which will be used as the title for the entire collection.

  • At around line 8, we declared an items array. This will help us mimic the array of content to build the collection.

  • Each item in the items array represents a card. Inside each card item we have defined the card's fields (image, title, body_text, cta ). We have repeated this 3 times to achieve the collection shown in the Featured Content image above.

Component markup

So the data is ready, let's go ahead and add the markup for the component.

  1. Inside the featured-content folder create a new file called featured-content.twig

  2. Inside featured-content.twig add the following code:

Component styles

  1. Inside the hero folder create a new file called featured-content.scss

  2. Inside featured-content.scss add this code:

Don't forget to create the library.

While in your theme's root directory, run the following commands in your command line and press Return

npm run build

npm run watch

TIP: Since we created a whole new component; if you had the watch task running, it is recommended you stop it by pressing Ctrl + C on your keyboard and run the commands above. This will ensure the new component will be generated and all related code will be compiled.

In your browser of choice open the following URL: http://localhost:3000. This will open Pattern Lab where you can find the Hero component under components.

Next, we are going to build the back-end infrastructure in Drupal for this collection. This also will be a unique approach compared to previous components we've built in Drupal.

Last updated

Was this helpful?