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" .

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:

{
  "heading": {
    "heading_level": "2",
    "modifier": "heading--large center section-header",
    "title": "Featured Content",
    "url": ""
  },
  "items": [
    {
      "image": "<img src='https://source.unsplash.com/EwKXn5CapA4/400x520' alt='alt text here' />",
      "heading": {
        "heading_level": "3",
        "modifier": "card__title",
        "title": "The beauty of nature",
        "url": "#"
      },
      "date": "Jun 25",
      "category": "Sports",
      "body_text": "Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Vivamus sgittis lacus vel augue laoreet.",
      "author": {
        "photo": "<img src='https://source.unsplash.com/_cvwXhGqG-o/100x100' alt='Author's headshot' />",
        "name": "Valentina De Leon",
        "title": "Digital Strategist"
      },
      "modifier": "card--wide"
    },
    {
      "image": "<img src='https://source.unsplash.com//a8lTjWJJgLA/400x520' alt='Tech gadgets' />",
      "heading": {
        "heading_level": "3",
        "modifier": "card__title",
        "title": "The beauty of nature",
        "url": "#"
      },
      "date": "Sep 27",
      "category": "Lifestyle",
      "body_text": "Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Vivamus sgittis lacus vel augue laoreet.",
      "author": {
        "photo": "<img src='https://source.unsplash.com/_cvwXhGqG-o/100x100' alt='Author's headshot' />",
        "name": "Valentina De Leon",
        "title": "Digital Strategist"
      },
      "modifier": "card--wide"
    }
  ]
}

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:

{{ attach_library('training_theme/featured-content') }}

<section class="featured-content{{ modifier ? ' ' ~ modifier }}{{- attributes ? ' ' ~ attributes.class -}}"
  {{- attributes ? attributes|without(class) -}}>
  

<div data-gb-custom-block data-tag="if">

    {%
      include '@training_theme/heading/heading.twig' with {
        "heading": heading
      } only
    %}
  

</div>

  <div class="featured-content__items">
    

<div data-gb-custom-block data-tag="block">

      

<div data-gb-custom-block data-tag="for">

        {%
          include '@training_theme/card/card.twig' with {
            "image": item.image,
            "heading": item.heading,
            "date": item.date,
            "category": item.category,
            "body_text": item.body_text,
            "author": item.author,
            "modifier": item.modifier
          } only
        %}
      

</div>

    

</div>

  </div>
</section>

Component styles

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

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

// Import site utilities
@import '../../global/utils/init';

.featured-content {
  @include component-spacing;
  background-color: $color-gray-light;
  padding: 40px 20px 0;

  @include breakpoint($bp-md) {
    padding-bottom: 100px;
  }
}

// On mobile cards are displayed
// vertically as a group.
.featured-content__items {
  align-items: center;
  display: flex;
  flex-direction: column;

  // On larger screens cards are displayed
  // horizontally as a group.
  @media screen and (min-width: $bp-lg) {
    flex-direction: row;
    justify-content: space-around;
  }

  .card {
    margin-bottom: 60px;

    @media screen and (min-width: $bp-xl) {
      flex: 0 0 45%;
      margin-bottom: 0;
    }
  }
}

Don't forget to create the library.

Compiling the code to generate the Featured Content

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.

PreviousIntegrating From our blogNextIntegrating Featured Content

Last updated