Card grid with references

#Overview

This guide shows how to build a card grid component that uses reference fields to relate content to an entry.

This card grid contains a number field so you can indicate how many columns the grid should have, a reference field that lets you relate content entries in your project as cards, and dropdown menus to select the size of the gap between cards and the theme.

Here is an example that shows how this card grid could potentially look on your frontend:

Example card grid

It is a good option when you need to show content entries in your project as cards. A good example of this would be a card grid showing related entries, such as products.

Card grid with references

#Prerequisites

• REQUIRED: You need to have a Hygraph account. If you don't have one, you can sign up here.
• REQUIRED: You need to have a Hygraph project.
  • OPTION 1: Create a project. This is the way to go if you want to follow the entire tutorial for learning purposes.
  • OPTION 2: Clone the cookbook project. This is the way to go if you're curious about how the card grids are made but don't want to follow the step-by-step creation process. This project contains the entire Card Grid Cookbook so you can compare them, or look into what instances they contain.
  • OPTION 3: Use an existing project of yours. If you have a project already and want to add this card grid to it, this is the way to go. In this case, you may need to adjust parts of the tutorial to your own project schema.

#Core concepts

• Enumerations: An enumeration is a predefined set of values that represents a list of possible options. You can use them to group values within a type.

• References: References are relations between two or more content entries in your project. With references, you can reuse content entries by connecting them. Once the relation is configured, you can also use it to create related content from the content creation screen.

• Component: a pre-defined set of fields that can be reused across models and content entries. You can think of a component as a flexible, reusable template: you define the fields that will be used inside a component once, and then fill them with different content every time you use it in a content entry.

#What you can do

This guide offers two paths:

• Path 1: Use this guide to create a card grid component that you can reuse across different models in your Hygraph projects.
• Path 2: Clone the project that contains the entire Card Grid cookbook to compare the different card grid configurations without having to clone multiple projects.

#Clone project

We have prepared a project that contains the entire Card Grid cookbook:

Clone this project

This cookbook contains all the recipes we have so far to create card grids, so you can compare the different card grid configurations without having to clone multiple projects.

To find this particular recipe in the cookbook project, navigate to the schema and look for "Card Grid - References".

This project also contains a demo model that includes all the card grid components in the cookbook as basic component fields, as well as a modular component field that you can use as a card grid type selector.

#Step-by-step guide

Before we can build components, we sometimes need to create other schema elements that will later be added to those components as instances. We will divide this process in steps to make it more manageable:

1. Create the enumerations: We will need to create enumerations so that we can later on use dropdown menus to select different styling options.
2. Create models: We will create three models so that we can select them as referenceable by the grid.
3. Create the card grid: Finally, we'll combine all the elements we worked on before to our card grid.

#1. Create the enumerations

We will start by creating an enumeration that we can later add to our card grid component as a dropdown menu to select the gap size between our cards on the grid.

We'll navigate to our project schema,click +Add next to Enumerations, and use the following information to create our enumeration:

We'll click Add enumeration to save.

Card grid with references - Cards gap enumeration

Next, we need to add enumeration values. For every enumeration value, we need to enter a Display name, an API ID, and click Add.

We'll add the following values:

Finally, we'll click Add enumeration to save.

Card grid with references - Cards gap enumeration values

#2. Create models

This card grid configuration will use references to link entries from models in our schema.

Card grid with references - Models

We'll click Add model to save.

Next, we'll create our second content model using the following information:

We'll click Add Model to save.

And one final time for our third model:

We'll click Add model to save.

These are the three content models that we will include in our reference when we create the card grid.

#3. Create the card grid

At this point, we've created everything we need in order to start working on our card grid component.

We'll click +Add next to Components and use the following information:

Card grid with references - Component

We'll click Add component to save. We can now start adding instances to this component.

Let's start with a Number field, which we can later use to indicate the number of columns on our grid.

We'll find it on the Add fields right sidebar, click on it, and use the following information:

Card grid with references - Number of columns

We'll click Add to save.

Earlier, we created three empty content models. We will now add them as part of a Reference field so when we use the card grid component, we will be able to relate content entries from those models. The entries we reference will be included as cards in our grid.

We'll find the Reference field on the Add fields right sidebar, click on it, and use the following information:

Card grid with references - Reference field

We'll click Add to save.

The final step will be to add Enumeration fields so we can later select the gap size between cards and the theme.

Let's start with the gap size. We'll find the Enumeration field on the Add fields right sidebar, and use the following information to create it:

Card grid with references - Gap

We'll click Add to save.

Finally, we'll repeat the process to add the theme enumeration field:

Card grid with references - Theme

We'll click Add to save.

We've created a card grid component that contains several schema elements for customization purposes and that lets us add existing content entries as cards.

Card grid with references

This guide helped you create the schema element yourself. Alternatively, you can clone a project containing all our card grid recipes.

Check out the next document section for that!

#Useful links

• Enumerations
• Components documentation
• References documentation