Kubio – the kickstart

Find out how you can use Kubio for designing the website you envision.

Icon list block

Lists are used to structure information and make it more accessible. You can accompany lists with icons, to give a fresh air to your design. 

You can drag the icon list block to the section you want on your page from the block inserter, or add the block from any “+” sign on your canvas.

When you select the icon list block, you will see a toolbar on top of it, with several basic editing options, explained here. What’s specific to this block is the “+” sign that allows you to add more list items.

icon list basic edits

Icon list block: customizations within the block editing panel 

The moment you select any block, a block editing panel will open up on the right-hand side. It always has three options: content, style, and advanced. The possibilities inside vary from block to block. Let’s now check what’s specific to the icon list across the “Content” and “Style” edits.

Content

icon list content edits

At the “Content” level you can:

  • Align your icons.
  • Align the list.
  • Choose between a vertical or horizontal list layout.
  • Add new list items.

Style
styling the icon list Gutenberg block

Here you can style the list, its icons, and text. Let’s take them one by one.

At the list level you can customize item spacing, and you can also apply a divider. At the icons level, here’s what you can style:

  • Icon color,
  • Icon hover color,
  • Icon size,
  • Icon ident.

Advanced
icon list advanced edits

At this level, you can make edits for the normal and hover states across the list container, text, list item, icon, and links.  Here are the available customizations:

  • Background. Here you can make adjustments to background color and type.
  • Spacing. Here you can set up the margins and paddings for the icon list block items.
  • Border and shadows. Here you can add borders with a different color, radius and thickness to your block. Also, you can add box shadows. You have full control over the position, blur, spread, and color of the box shadow.
  • Typography. You can set up a different font family, font size, and weight for the text. You can add decorations to text, set up capitalization, and adjust line height and letter spacing. When you select the “default” option you’ll be taken to the General Settings, where you can change defaults (color scheme, typography, etc.).
  • Responsive. Here you can decide whether the block will show or not on desktop, tablet, or mobile.
  • Miscellaneous. At this level, you can set up the z-index of your block (vertically order the elements that overlap), set up if the element overflows or not (displaying the content of the block flowing out of its container into the surrounding area), add HTML anchors and CSS classes.