Bootstrap Icon Grid Shortcode

Shortcode to generate icon grid, which supports icon, heading and description.

Syntax

1{{< bs/icon-grid [data] >}}

Parameters

data

PositionNameTypeRequiredDefaultSince
-datastring--

The name of data file.

linkText

PositionNameTypeRequiredDefaultSince
-linkTextstring-Learn more-

The link text, the entire card will be clickable if empty.

aligment

PositionNameTypeRequiredDefaultSince
-aligmentstring-start-

Alignments: start, center or end.

gap

PositionNameTypeRequiredDefaultSince
-gapnumber-4-

Gap between items, up to 5.

border

PositionNameTypeRequiredDefaultSince
-borderboolean-true-

When false, remove the border.

Data

The data should be placed under the /data folder.

Data Entry Properties

title

NameContextTypeRequiredDefaultSince
title-string--

The heading.

url

NameContextTypeRequiredDefaultSince
url-string---

The detail URL.

description

NameContextTypeRequiredDefaultSince
description-string---

The description, support Markdown syntax.

weight

NameContextTypeRequiredDefaultSince
weight-number---

The weight of data entry, used to sorting.

icon

NameContextTypeRequiredDefaultSince
icon-object---

Icon.

icon.name

NameContextTypeRequiredDefaultSince
icon.name-string--

Icon name.

icon.vendor

NameContextTypeRequiredDefaultSince
icon.vendor-string-bootstrap-

Icon vendor.

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
1{{< bs/icon-grid "features" >}}
Fast

Google PageSpeed Insights scored perfect 💯 of four metrics on mobile and desktop.

Responsive

Mobile first, built on top of the Bootstrap v5.3.

Learn more

FOSS

Free and open source software, code licensed MIT.

Learn more

1{{< bs/icon-grid data=features linkText="Read more" >}}
Fast

Google PageSpeed Insights scored perfect 💯 of four metrics on mobile and desktop.

Responsive

Mobile first, built on top of the Bootstrap v5.3.

Read more

FOSS

Free and open source software, code licensed MIT.

Read more

1{{< bs/icon-grid data=features linkText="" >}}
Fast

Google PageSpeed Insights scored perfect 💯 of four metrics on mobile and desktop.

Align to Center

1{{< bs/icon-grid data="features" alignment="center" >}}
Fast

Google PageSpeed Insights scored perfect 💯 of four metrics on mobile and desktop.

Responsive

Mobile first, built on top of the Bootstrap v5.3.

Learn more

FOSS

Free and open source software, code licensed MIT.

Learn more

Smaller Gap

1{{< bs/icon-grid data="features" gap=2 >}}
Fast

Google PageSpeed Insights scored perfect 💯 of four metrics on mobile and desktop.

Responsive

Mobile first, built on top of the Bootstrap v5.3.

Learn more

FOSS

Free and open source software, code licensed MIT.

Learn more

Without Border

1{{< bs/icon-grid data="features" border=false >}}
Fast

Google PageSpeed Insights scored perfect 💯 of four metrics on mobile and desktop.

Responsive

Mobile first, built on top of the Bootstrap v5.3.

Learn more

FOSS

Free and open source software, code licensed MIT.

Learn more