The Info Box block is a block that allows for putting informational callouts, especially pairing Icons or Numbers with brief text.
For multiple cards in a row place them insides a columns block. Also, to keep formatting consistent, we recommend getting one of them how you want and then copying it as a starting point and just switching out the content in the block copy.
Add An Info Box
- Insert a new block
- Click on the white plus sign
- search for "info"
- click on the info box icon
The info box block properties panel is split into three tabs: general, style and advanced. This tutorial will go over general and style.
General
Select a layout
Set a link, if relevant. This block is great for displaying data, linked information is an optional usage.
We recommend linking the whole box if you do use the link option. It generally looks nicer.
Select your content alignment for the card
Style
There are style options for the default and hover styling. We strongly recommend not touching the hover styling UNLESS your boxes are linked. Otherwise a hover state will just seem like a bug.
Select your background color, border color and border size. If you don't want a border set it to 0px or to the same color as the background if you won't want a border.
Stay away from more complicated settings like border radius and shadow.
Media Settings
Toggle open the media settings under Style to indicate if you are using an icon, number or image. If you choose icon, you will be able to select from the font awesome icon library. Again, while you can set a hover, it's recommended to only be used when the block is hyperlinked.
Title Settings
You can use title settings to choose a heading level, sizing and color. Please note that your template will automatically set font family so we recommend that you leave that lone, as well as be judicious about messing with line height and letter spacing.
Text Settings
This is the content under the box. It will default as small paragraph text. Other than balancing it's size with the title and maybe the color, you shouldn't have much to touch here.
in this example, the text settings were not touched at all so that the template could take over.
vs. this example where the text size settings were adjust slightly to create visual balance with the title
Download all files