Skip to content

Featured Grid

The way content is featured on a webpage determines whether users will choose to engage further with a webpage or leave. On pages that have a lot of content (think text and graphics) it's important to break it down in a way users can read and digest easily. The Featured Grid block gives us the flexibility to split content up into neat readable sections.

Featured Grid was created to be used in a few different formats. The layout is structured on a 3 column grid and adjusts accordingly to fit small or medium screen sizes. We have an option to display a title and summary (similar to the example above Rad Plastic) or we can optionally omit the title and summary and simply display items without a title or summary for this block.

6 Items no title or summary

If plain typography seems too boring we can add images to each item in our featured grid. Note that if choosing to use an image, an image must be selected for each of the other items.

By having some control over how we present content with this block we can create some unique variations that will keep users engaged. Let's take a look at what fields are used to build out our content.

  • Title - A title for our block (only displayed when Show Title is set to on).

  • Subtext -Optional field for a subheading or short description (only displayed when Show Title is set to on).

  • Content - The area that contains a replicator field for our text/media items aka List Items.

  • Image - An optional image field for our List Item. If selecting an image, an image must be selected for all items.

  • Item Title - Like our example The Magic of Plastic is considered an item title.

  • Item Description - A description displayed under Item Title.

  • Link Resource - If we wish to link our item to an Entry or URL we can select this toggle.

  • Plus Icon - To add more List Items, click on the + icon.

  • Background Color - The background color options for this block.

With a good understanding these fields we can be more creative with this block and leverage the grid to neatly position text and images. It's always a good idea to play around with the varying configurations until it's dialed in just right.