Shortcode to generate icon grid, which supports icon, heading and description.
1{{< bs/icon-grid [data] >}}
data
Position | Name | Type | Required | Default | Since |
---|---|---|---|---|---|
- | data | string | ✓ | - | - |
The name of data file.
linkText
Position | Name | Type | Required | Default | Since |
---|---|---|---|---|---|
- | linkText | string | - | Learn more | - |
The link text, the entire card will be clickable if empty.
aligment
Position | Name | Type | Required | Default | Since |
---|---|---|---|---|---|
- | aligment | string | - | start | - |
Alignments: start
, center
or end
.
gap
Position | Name | Type | Required | Default | Since |
---|---|---|---|---|---|
- | gap | number | - | 4 | - |
Gap between items, up to 5
.
border
Position | Name | Type | Required | Default | Since |
---|---|---|---|---|---|
- | border | boolean | - | true | - |
When false
, remove the border.
The data should be placed under the /data
folder.
title
Name | Type | Required | Default | Since |
---|---|---|---|---|
title | string | ✓ | - | - |
The heading.
url
Name | Type | Required | Default | Since |
---|---|---|---|---|
url | string | - | - | - |
The detail URL.
description
Name | Type | Required | Default | Since |
---|---|---|---|---|
description | string | - | - | - |
The description, support Markdown syntax.
weight
Name | Type | Required | Default | Since |
---|---|---|---|---|
weight | number | - | - | - |
The weight of data entry, used to sorting.
icon
Name | Type | Required | Default | Since |
---|---|---|---|---|
icon | object | - | - | - |
Icon.
icon.name
Name | Type | Required | Default | Since |
---|---|---|---|---|
icon.name | string | ✓ | - | - |
Icon name.
icon.vendor
Name | Type | Required | Default | Since |
---|---|---|---|---|
icon.vendor | string | - | bootstrap | - |
Icon vendor.
Please make sure the description
doesn’t contain links when the linkText
is empty.
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
1{{< bs/icon-grid "features" >}}
1{{< bs/icon-grid data=features linkText="Read more" >}}
1{{< bs/icon-grid data=features linkText="" >}}
1{{< bs/icon-grid data="features" alignment="center" >}}
1{{< bs/icon-grid data="features" gap=2 >}}
1{{< bs/icon-grid data="features" border=false >}}