Bootstrap Icon Grid Shortcode
Shortcode to generate icon grid, which supports icon, heading and description.
Donate
Become a backer or sponsor to support our work.
On this page
Sponsors
Syntax
1{{< bs/icon-grid [data] >}}
Parameters
data
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
#0 | data | string | ✓ | - | - | - |
The name of data file.
linkText
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | linkText | string | - | Learn more | - | - |
The link text, the entire card will be clickable if empty.
alignment
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | alignment | string | - | start | - | - |
Alignments: start, center or end.
gap
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | gap | number | - | 4 | - | - |
Gap between items, up to 5.
border
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | border | boolean | - | true | - | - |
When false, remove the border.
Data
The data should be placed under the /data folder.
Data Entry Properties
title
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
title | - | string | ✓ | - | - | - |
The heading.
url
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
url | - | string | - | - | - | - |
The detail URL.
description
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
description | - | string | - | - | - | - |
The description, support Markdown syntax.
weight
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
weight | - | number | - | - | - | - |
The weight of data entry, used to sorting.
icon
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
icon | - | object | - | - | - | - |
Icon.
icon.name
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
icon.name | - | string | ✓ | - | - | - |
Icon name.
icon.vendor
| Name | Context | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
icon.vendor | - | string | - | bootstrap | - | - |
Icon vendor.
Please make sure the description doesn’t contain links when the linkText is empty.
Example
Example Data File
data/features.yaml
1- title: Fast
2 description: "Google PageSpeed Insights scored perfect \U0001F4AF of four metrics on mobile and desktop."
3 icon:
4 name: speedometer
5 color: green
6
7- title: Responsive
8 url: bootstrap
9 description: 'Mobile first, built on top of the Bootstrap v5.3.'
10 icon:
11 name: bootstrap
12 color: '#7952B3'
13
14- title: FOSS
15 url: 'https://github.com/hugomods'
16 description: 'Free and open source software, code licensed **MIT**.'
17 icon:
18 name: code
19 vendor: fas
20 color: green
Default Link Text
Source
1{{< bs/icon-grid "features" >}}Result
Custom Link Text
Source
1{{< bs/icon-grid data=features linkText="Read more" >}}Result
Empty Link Text
Source
1{{< bs/icon-grid data=features linkText="" >}}Result
Align to Center
Source
1{{< bs/icon-grid data="features" alignment="center" >}}Result
Smaller Gap
Source
1{{< bs/icon-grid data="features" gap=2 >}}Result
Without Border
Source
1{{< bs/icon-grid data="features" border=false >}}Result