Getting Creative with the Style Editor: Creating an Icon Bar

Bootstrap’s utility classes give us a wide range of options to create unique layouts within each of our components. You can create an icon bar like the one below, for example, by using the Page Collection - Icons component and applying some of Bootstrap’s utility classes. This is a user-friendly way to highlight important pages or sections of your website. Here’s what it looks like:

In order to create the icon bar, you’ll need to insert a Page Collection - Icons component either into a template, or into a slot on a page that uses the Super Template. See our how-to guides on adding a shared partial to a template and building a custom layout using the Super Template if you need to know how to do this, along with our guide on how to use collection components to display content dynamically.

Once you’ve added the Page Collection - Icons component to your page and have labeled your pages to get them to display in the component, you’ll use the Style Editor to alter the utility classes of each element in the component. Here’s what we want to do:

1. Adjust the size of your icons.
2. Adjust the size of your item headers.
3. Adjust the spacing between the icons and the headers.
4. Adjust the width of your collection items.
5. Adjust the vertical padding of the component.
6. Adjust the color of each element.
7. Remove the button for each item.

The text in our component should be centered, and our component should have a blue background color with white text. To achieve this, add add the following classes to the “Utility classes” region in the Style Editor panel (you can substitute any background color and font color you like as long as they meet our accessibility guidelines for color contrast):

The row containing our items should have a negative margin to reduce the vertical spacing of our component, and the items within our row should be centered. To achieve this, add the following classes to the “Utility classes for row” region:

Next, we want to make sure our icons all fall in a single row when viewed on large screen sizes. To achieve this, add the following classes to the “Utility classes for items” region:

Let’s also adjust the size and color of our headers to make them appear as smaller labels below the icons, and stretch the link contained inside our headers to encompass it’s parent container, which includes the icon:

We also want to make sure the background color of our icon containers match the background color of our component so they blend into the background and only the icons remain visible. To achieve this, add the following classes to the “Utility classes for icons” region:

Finally, we need to remove the “Read More” buttons from each icon. To do this, simply type “none” in our “Button text” region.

Once you’ve added your new utility classes, save and refresh your page to make sure it worked, then publish your page.

You can also add a hover effect on your buttons by adding some extra CSS (note we already added a hover utility class to our items above):

#page-collection-icons-1 .hover:hover,
#page-collection-icons-1 .hover:hover .rounded-circle {
    background-color: #1a4f89 !important;
}