About
The Links with Icons pattern can be used to display several calls to action or options that your user can choose to click on. This pattern can also be used to highlight key facts and statistics.
Adding a Links with Icons pattern
- Click the + icon to add a new block from the top toolbar in the page/post editor.
- Click on the Patterns tab.
- Either choose which category of patterns you want to select from or click Explore to open a modal that allows you to have a larger view of each pattern.
- In the explore view, you can type ‘links with icons’ into the search bar to find the Links with Icons patterns.
- There are six Links with Icons options:
- Single, with or without a border
- Three, with or without a border
- Four, with or without a border
- Click on the pattern you wish to insert or drag and drop the pattern into your content. If you click on the pattern, it will be inserted at the location of your cursor.
Links with Icons pattern settings
The Links with Icons pattern is made up of a group block containing a heading block, an image block, a paragraph block and a buttons block. For Links with Icons patterns containing more than one group: they are contained within a section block. See the documentation on each of these blocks to find out more about the available settings.
Useful options:
- You may wish to hide the image credit on the image block. To do this, use the Hide Image Credit toggle in the image block settings.
- You can add a grey background by changing the background colour on the section block from white to grey.
- To display a large grid of links with icons, for example on a landing page with lots of other pages to navigate to, simply insert several sets of Links with Icons patterns.
Links with Icons pattern demonstration
Links with icons single
(INSERT TITLE)
(Insert Body Text)
Links with icons single (square border)
(INSERT TITLE)
(Insert Body Text)
3 links with icons
(INSERT TITLE)
(Insert Body Text)
(INSERT TITLE)
(Insert Body Text)
(INSERT TITLE)
(Insert Body Text)
3 links with icons (square border)
(INSERT TITLE)
(Insert Body Text)
(INSERT TITLE)
(Insert Body Text)
(INSERT TITLE)
(Insert Body Text)
4 links with icons
(INSERT TITLE)
(Insert Body Text)
(INSERT TITLE)
(Insert Body Text)
(INSERT TITLE)
(Insert Body Text)
(INSERT TITLE)
(Insert Body Text)
4 links with icons (square border)
(INSERT TITLE)
(Insert Body Text)
(INSERT TITLE)
(Insert Body Text)
(INSERT TITLE)
(Insert Body Text)
(INSERT TITLE)
(Insert Body Text)