Bootstrap Icon Grid Shortcode
Become a backer or sponsor to support our work.
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
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="ln"> 1</span><span class="cl"><span class="p">[</span><span class="nx">fast</span><span class="p">]</span>
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 >}}