Card Component
Last updated
Last updated
A component that will introduce us to a more useful technique for working with components is the image you see below. A Card component is a great way to display all sorts of content (news, blog posts, events, etc.), and you will see it in many websites nowadays. The card is not typically displayed on its own, although sometimes it is, but its most common use is as a collection of content. For example, we could use a collection of cards to display latest blog posts or upcoming events. In this training we will use the card component to build two content lists; Featured Content, and Blog Content.
Although we could build the content list components already as a collection of content, a better approach is to first build a single instance of a card component that then we can reuse over and over. Having a single card component available makes it possible to even build other types of content collections.
As we've did with the Hero component, one of the first things we need to define are the data fields that makeup the component. If you look at the image above, a single Card has the following data fields:
image
title (link to full article)
date
body
& tags
Now that we have identified the fields our card component needs, let's start building it.
Inside src/patterns/components create a new folder called card
Inside the card folder create a new file called card.json
Inside card.json add the following code:
By now we should be well familiar with the fields structure above. The one field type we probably have not seen until now is an array. In the code above we are declaring the tags as an array of items. Each tag item inside the array has a text and url keys so they can become links to tag-driven pages on our site.
Inside the card folder create a new file called card.twig
Inside card.twig add the following code:
Just as we did with the Hero, we are including the attributes placeholder so when we integrate the card with Drupal the attributes Drupal provides can be available in our card.
Once again we are making use of the Heading component by using a Twig include statement.
With the tags we loop through the tags array and then add each tag item as a list item in an unordered list.
Don't forget to create and attach the Card's library.
Inside the card folder create a new file called card.scss
Inside card.scss add the following code:
We'll get into the styles above in more detail later on.
Now that the card component is done, let's compile the code so we can see it in Pattern Lab. If the watch task is running you should be able to see the card component in Pattern Lab, otherwise follow these steps:
While in your theme's root directory, run the following commands in your command line and press Return
npm run build
npm run watch
In your browser of choice open the following URL: http://localhost:3000. This will open Pattern Lab where you can find the Card component under components.
When working with Pattern Lab locally it makes sense to use http://localhost:3000 to view your work. However, if you are viewing your project from a server during development, or want to show your work and progress to a stakeholder or client, this approach will not work. Luckily for us, we can access Pattern Lab using Drupal's URL as follows:
/themes/custom/training_theme/patternlab/index.html
Two things to keep in mind with the path above:
The path above is appended to your Drupal's base URL. For example, if your Drupal's address is https://dev.pantheon.io, the full URL would become https://dev.pantheon.io/themes/custom/training_theme/patternlab/index.html
Replace training_theme with your project's theme name if your theme name is different.
