Bootstrap Icon Grid Shortcode
On this page
Please check out the tutorial to
start using Hugo modules.
This shortcode is used to generate icon grid, which supports icon, heading and description. It is usually used to display features.
Usage
1{{< bs/icon-grid [data] >}}
| Position | Name | Type | Required | Default | Description |
|---|---|---|---|---|---|
#0 | data | string | Y | - | The data name of data file. |
| - | linkText | string | - | - | The link text, the entire card will be clickable if empty. |
| - | alignment | string | - | start | Alignments: start, center or end. |
| - | gap | number | - | 4 | Gap between items, up to 5. |
| - | border | boolean | - | false | Whether to enable border. |
Data
The data should be placed under the /data folder.
Data Entry Properties
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
weight | number | - | - | The weight of data entry, used to sorting. |
title | string | Y | - | The heading. |
url | string | - | - | The detail URL. |
description | string | - | - | The description, support Markdown syntax. |
icon | object | - | - | Icon setting. |
icon.name | string | Y | - | The icon name. |
icon.vendor | string | - | bootstrap | The icon vendor. |
icon.color | string | - | - | The icon color. |
Please make sure the description doesn’t contain links when the linkText is empty.
Examples
data/features.toml
1[fast]
2weight = 1
3title = "Fast"
4description = "Google PageSpeed Insights scored perfect 💯 of four metrics on mobile and desktop."
5[fast.icon]
6name = "speedometer"
7color = "green"
8
9[responsive]
10weight = 2
11title = "Responsive"
12url = "bootstrap"
13description = "Mobile first, built on top of the Bootstrap v5.3."
14[responsive.icon]
15name = "bootstrap"
16color = "#7952B3"
17
18[foss]
19weight = 3
20title = "FOSS"
21url = "https://github.com/hugomods"
22description = "Free and open source software, code licensed **MIT**."
23[foss.icon]
24name = "code"
25vendor = "fas"
26color = "green"
Example Data File
Default Link Text
1{{< bs/icon-grid "features" >}}
Custom Link Text
1{{< bs/icon-grid data=features linkText="Read more" >}}
Empty Link Text
The entire card will be clickable if the link text is empty.
1{{< bs/icon-grid data=features linkText="" >}}
Align to Center
1{{< bs/icon-grid data="features" alignment="center" >}}
Smaller Gap
1{{< bs/icon-grid data="features" gap=2 >}}
Without Border
1{{< bs/icon-grid data="features" border=false >}}