jekyll-twitter-bootstrap 5.3.0.dev5

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 6c2028738ca85151c6052ba1cf60d10945e3e59989c3bc0f92bdf3da0cae1c40
+  data.tar.gz: 868a5f0da7a71549d12b6a27f0e6622bc3beb5502d9d13e5229b3fc80551041c
+SHA512:
+  metadata.gz: c99905564e985532324fc48b44ed2c2db40fee44159675ea025e91368b09cf307ebc7f9e846366a3dbc5112778ce147432d1bb5cd7c3c4dd4785f037a9f6c144
+  data.tar.gz: 7ce6cbde1eef80758eecd227616bff56691d2804bb3698f20be4954ead27393dae8a414fcf36e57d948f5a8ab2cc6a86067995c0275e9f76ad84458e772b67f2

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Kenny Carlile
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,222 @@
+# jekyll-twitter-bootstrap
+
+Jekyll Twitter Bootstrap is a Jekyll theme based on [Twitter's Bootstrap framework](https://getbootstrap.com/docs/5.3/) (currently, version 5.3.0). The intent of this theme is to provide a more thorough starting point for using Jekyll and Bootstrap together.
+
+## About
+
+- Author: [Kenny Carlile](https://www.kcarlile.com/)
+- Theme Version: 5.3.0.dev
+- Links:
+  - [GitHub page for Jekyll Twitter Bootstrap theme](https://github.com/KCarlile/jekyll-twitter-bootstrap)
+  - [Ruby Gems page for Jekyll Twitter Bootstrap theme](https://rubygems.org/gems/jekyll-twitter-bootstrap) [![Gem Version](https://badge.fury.io/rb/jekyll-twitter-bootstrap.svg)](https://badge.fury.io/rb/jekyll-twitter-bootstrap)
+- Dependencies:
+  - [Twitter Bootstrap 5.3.0](https://getbootstrap.com/docs/5.3/)
+  - [Jekyll Paginate](https://github.com/jekyll/jekyll-paginate): Default pagination generator for Jekyll.
+  - [Jekyll Feed](https://github.com/jekyll/jekyll-feed): A Jekyll plugin to generate an Atom (RSS-like) feed of your Jekyll posts.
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "jekyll-twitter-bootstrap"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: jekyll-twitter-bootstrap
+```
+
+And then execute:
+
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+
+```bash
+$ gem install jekyll-twitter-bootstrap
+```
+
+To launch the local Jekyll server for testing, run:
+```bash
+bundle exec jekyll serve
+```
+
+Alternately, you can run the included `server` script like this:
+
+```bash
+$ ./server
+```
+
+You may need to make the `server` script executable by running `$ sudo chmod +x ./server`.
+
+## Usage
+
+### Layouts
+
+The following layouts are available in the `_layouts/` directory (indentation denotes child of previous row):
+
+| `_layouts/` Filename | Description |
+| -------------------- | ----------- |
+| `base.html` | Base HTML template for all pages. |
+|     `page_sidebar.html` | Main content template with sidebar with rendered sidebar includes as specified in the page's front matter. (Layout `base.html`) |
+|         `blog.html` | Paginated listing of blog posts starting with the most recent and includes Categories and Tags sidebar includes. (Layout `page_sidebar.html`) |
+|         `post.html` | Single post listing which includes Categories and Tags sidebar includes. (Layout `page_sidebar.html`) |
+|     `page.html` | Basic page content with rendered title and body only. (Layout `base.html`) |
+|     `page_no_title.html` | Basic page content with rendered body only. (Layout `base.html`) |
+|         `example_components.html` | An example layout with components that shows how to call them and what they look like. (Layout `page_no_title.html`) |
+|         `home.html` | Simply a wrapper for `page_no_title.html` layout as Jekyll's default pages use the `layout: home`. (Layout `page_no_title.html`) |
+
+### Includes
+
+The following includes are available in the `_includes/` directory (indentation denotes child of previous row):
+
+| `_includes/` Filename | Description |
+| --------------------- | ----------- |
+| `categories.html` | Displays linked categories and the post count for each. |
+| `footer.html` | Displays the logo, copyright, and bottom navigation. |
+|      `footer_custom.html` | Empty file used for adding custom content to the end of the footer. |
+| `head.html` | Includes the meta information in the head of the base page. |
+|      `google_analytics.html` | Includes the Google Analytics (GA) code, which is visible _if_ the GA tracking ID is provided in `_config.yml` _and_ if the page being rendered does not have the following front matter value: `ga_do_not_track: true` |
+|      `head_custom.html` | Empty file used for adding custom content to the end of the head. |
+| `header.html` | Displays the header image and top navigation. |
+|      `header_custom.html` | Empty file used for adding custom content to the end of the header. |
+| `post_categories.html` | Displays a list of linked post titles by category. |
+| `post_tags.html` | Displays a list of linked post titles by tag. |
+| `tags.html` | Displays linked tags and the post count for each. |
+| `posts_latest.html` | Displays excerpts of the last _N_ posts as specified in the include parameter `posts_count`. See below for usage. |
+
+#### `_includes/posts_latest.html` Usage
+
+You can show excerpts of the _N_ latest posts, sorted by most recent first, by using the `posts_latest.html` include as shown below. Change the value assigned to `posts_count` to alter the number of most recent posts displayed. Omitting a value for `posts_count` will result in _all_ posts being displayed.
+
+For example, to add the two most recent posts to your home page's markdown, add this below:
+
+```markdown
+## Recent Posts
+
+{% include posts_latest.html posts_count=2 %}
+```
+
+### Components
+
+Components are pre-built mini-templates to which you can pass values for rendering more advanced page elements. The `_layouts/example_components.html` layout shows how to call them. To see these examples, you can specify the `example_components` layout a page's front matter like this: `layout: example_components`
+
+The following components are based on the [Twitter Bootstrap examples](https://getbootstrap.com/docs/5.3/examples/) and are available in the `_includes/_components/` directory:
+
+| `_includes/_components/` Filename | Description |
+| ----------------------- | ----------- |
+| `carousel.html` | Provides three rotating slides with title, body, and linkable button for each. |
+| `columns_icons.html` | Displays up to three icons, titles, bodies, and clickable links in three-column layout. |
+| `columns_icons_grid.html` | Displays up to eight hanging icons, titles, and bodies in two-row, four-column layout. |
+| `columns_icons_hanging.html` | Displays up to three small hanging icons, titles, bodies, and linkable buttons in three-column layout. |
+| `columns_image_cards.html` | Displays up to three cards with full image backgrounds including a title and clickable button in three-column layout. |
+| `featurette_left.html` | Displays a full-width title, tagline, and body on the left with an image on the right. |
+| `featurette_right.html` | Displays a full-width title, tagline, and body on the right with an image on the left. |
+| `hero_centered.html` | Displays a full-width centered title, body, and two optional linked buttons. |
+| `hero_centered_dark.html` | Displays a full-width centered title, body, and two optional linked buttons on a dark background. |
+| `hero_image_right.html` | Displays a full-width title, body, and two optional linked buttons on the left with an image on the right. |
+| `jumbotron_full.html` | Displays a full-width jumbotron card with title, body, and two optional linked buttons. |
+| `jumbotron_split.html` | Displays two half-width jumbotron cards each with title, body, and a linked button. |
+
+### Assets
+
+The `assets/` directory contains the following content for use in the examples and defaults provided (indentation denotes child of previous row):
+
+| `assets/` Filename | Description |
+| ------------------ | ----------- |
+| `css/` | CSS files for overriding and/or extending Twitter Bootstrap's default CSS which is loaded via CDN (see `_includes/head.html`). |
+| `images/` | Static images (JPG, GIF, PNG, etc.) used on the site including those for examples and defaults. |
+|     `favicons/` | Files used for favicons on the site including those for examples and defaults. |
+| `svg/` | Scalable Vector Graphics (SVGs) used on the site including those for examples and defaults. |
+
+### Blog and Posts
+
+This theme includes layouts and includes for:
+
+| Type | Description | Paginated | Source |
+| ---- | ----------- | --------- | ------ |
+| All posts listing | All blog posts listed in descending chronological order.  | Yes | `blog/index.html |
+| Individual post listing | A single blog post. | No | `_layouts/post.html` |
+| Posts listed by category | All blog posts, grouped by Category, listed in descending chronological order. | No | `categories/index.html`|
+| Posts listed by tag | All blog posts, grouped by Tag, listed in descending chronological order. | No | `tags/index.html`|
+
+All of those layouts ultimately use the `_layouts/page_sidebar.html` with Categories and Tags in the sidebar. To render components in the sidebar, add the name of the `_include/` template to your page's front matter like this:
+
+```yaml
+sidebar:
+  - categories
+  - tags
+```
+
+To leverage this theme's blogging functionality, you'll need to create the following files in your site's structure:
+
+| File | Contents | Purpose |
+| ---- | -------- | ------- |
+| `blog/index.html` | See [`blog/index.html`](https://github.com/KCarlile/jekyll-twitter-bootstrap/blob/main/blog/index.html) | Renders the main blog listing. |
+| `categories/index.html` | See [`categories/index.html`](https://github.com/KCarlile/jekyll-twitter-bootstrap/blob/main/categories/index.html) | Renders the main blog listing by category. |
+| `tags/index.html` | See [`tags/index.html`](https://github.com/KCarlile/jekyll-twitter-bootstrap/blob/main/tags/index.html) | Renders the main blog listing by tag. |
+
+### Configuration
+
+The theme's [`_config.yml`](https://github.com/KCarlile/jekyll-twitter-bootstrap/blob/main/_config.yml) file is well documented and contains typical Jekyll theme configuration values as well as some specific to the Jekyll Twitter Bootstrap theme. The [`_config.yml`](https://github.com/KCarlile/jekyll-twitter-bootstrap/blob/main/_config.yml) file includes inline comments to explain intent, default values, and usage. Please view the [`_config.yml`](https://github.com/KCarlile/jekyll-twitter-bootstrap/blob/main/_config.yml) file for more information regarding site and theme configuration.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at <https://github.com/KCarlile/jekyll-twitter-bootstrap>. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct.
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
+To add a custom directory to your theme-gem, please edit the regexp in `jekyll-twitter-bootstrap.gemspec` accordingly.
+
+## FAQ
+
+- __Q:__ Why use Bootstrap with Jekyll?
+  - __A:__ Bootstrap provides a lot of easy utilities for formatting without having to write a lot of your own custom CSS. It's ease of use makes it a great starting point for basic sites. Combining the power of Bootstrap and Jekyll means you can get your site up and running faster while still being able to customize it as needed.
+
+- __Q:__ This isn't the only Bootstrap-based theme for Jekyll. What about those other ones?
+  - __A:__ At the time of creation, the other Bootstrap-based Jekyll themes didn't have the level of maturity needed or they were based on older versions of Bootstrap.
+
+- __Q:__ If I want my posts to be referred to as _Articles_ (or something else) instead of _Blog_, how can I make that change?
+  - __A:__ There are a few steps necessary to change your post listing name from _Blog_ to something else.
+    - Rename `blog/index.html` to `articles/index.html`
+    - In `articles/index.html`, change the name of the page from "Blog" to "Articles":
+      ```yaml
+      ---
+      # title: Blog
+      title: Articles
+      layout: blog
+      sidebar:
+        - categories
+        - tags
+      ---
+      ...
+      ```
+      The layout can remain named `blog` unless you really want to override and rename the layout.
+    - In your `_config.yml` file, change these lines from `blog` to `article`:
+      ```yaml
+      ...
+      # Add pages here to explicitly appear in this order in your navigation.
+      header_pages:
+        # - blog/index.html
+        - articles/index.html
+      ...
+      # paginate_path: "/blog/:num"
+      paginate_path: "/articles/:num"
+      # Define the post permalink format.
+      #permalink: /blog/:year/:month/:day/:title:output_ext
+      permalink: /articles/:year/:month/:day/:title:output_ext
+      ...
+      ```
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/README_OWNER.md

@@ -0,0 +1,33 @@
+# jekyll-twitter-bootstrap - Owner Notes
+
+## Publishing to RubyGems.org
+
+Gem page: <https://rubygems.org/gems/jekyll-twitter-bootstrap>
+
+```bash
+# Sign in to RubyGems.org
+$ gem signin
+
+# Remove a published version of the gem
+$ gem yank -v 5.3.0.dev jekyll-twitter-bootstrap
+
+# Build a new version of the gem
+# In jekyll-twitter-bootstrap.gemspec, specify a new version
+#     spec.version       = "5.3.0.dev1"
+# ...then build
+$ gem build
+WARNING:  open-ended dependency on bundler (>= 0, development) is not recommended
+  use a bounded requirement, such as '~> x.y'
+WARNING:  See https://guides.rubygems.org/specification-reference/ for help
+  Successfully built RubyGem
+  Name: jekyll-twitter-bootstrap
+  Version: 5.3.0.dev1
+  File: jekyll-twitter-bootstrap-5.3.0.dev1.gem
+
+# Push the gem to RubyGems.org
+$ gem push jekyll-twitter-bootstrap-5.3.0.dev1.gem
+Pushing gem to https://rubygems.org...
+Successfully registered gem: jekyll-twitter-bootstrap (5.3.0.dev1)
+```
+
+RubyGems.org command reference: <https://guides.rubygems.org/command-reference/>

data/_config.yml

@@ -0,0 +1,85 @@
+# ------------------------------------------------------------
+# Standard Theme Configuration
+# ------------------------------------------------------------
+title: Jekyll Twitter Bootstrap (Site Title)
+author:
+  name: Your Name
+  email: your-email@domain.com
+url: https://www.yoursite.com
+
+# The `>` after `description:` means to ignore line-breaks until next key.
+# If you want to omit the line-break after the end of text, use `>-` instead.
+description: >
+  Jekyll Twitter Bootstrap is a Jekyll theme based on Twitter Bootstrap for
+  easy customization by leveraging the Bootstrap framework for styling and
+  layout.
+
+# Build settings
+theme: jekyll-twitter-bootstrap
+# Used to show excerpt/first paragraph for blog posts in listing.
+show_excerpts: true
+# Used in posts for explicitly delimiting excerpt.
+excerpt_separator: <!--more-->
+# Configure jekyll-paginate
+paginate: 10
+paginate_path: "/blog/:num"
+# Define the post permalink format.
+permalink: /blog/:year/:month/:day/:title:output_ext
+# Default front matter for content types.
+defaults:
+  # Posts should default to layout=post and sidebar=categories,tags.
+  -
+    scope:
+      path: ""
+      type: "posts"
+    values:
+      layout: "post"
+      sidebar:
+        - categories
+        - tags
+
+# Add pages here to explicitly appear in this order in your navigation.
+header_pages:
+  - index.md
+
+# Specify directories or files to exclude from the build.
+exclude:
+  - jekyll-twitter-bootstrap.gemspec
+  - LICENSE.txt
+  - README.md
+  - server
+
+plugins:
+  - jekyll-paginate
+  - jekyll-feed
+
+# jekyll-feed plugin configuration
+# Default if not overridden: /feed.xml
+feed:
+  path: 
+
+# ------------------------------------------------------------
+# Jekyll Twitter Bootstrap Theme-Specific Configuration
+# ------------------------------------------------------------
+jekyll-twitter-bootstrap:
+  # Starting year for copyright in footer.
+  # If empty, the current year only is used (e.g. 2023).
+  # If populated, the year specified is prepended to the current year with a
+  # hyphen to indicate a range (e.g. 2022-2023).
+  copyright_year_start: 2022
+  # Date format used by the site. See https://strftime.net/ for syntax.
+  # The default (empty value) is: '%B %e, %Y at %l:%M%p'
+  date_format: 
+  # HTML to override the defaults for header and footer logos.
+  # This should be the full <img .../> or <svg...></svg> code
+  # for the image referenced within the site.
+  # Defaults if not overridden:
+  #   header: <svg class="bi me-2" width="40" height="32"><use xlink:href="/assets/svg/bootstrap.svg#bootstrap"/></svg>
+  #   footer: <svg class="bi" width="30" height="24"><use xlink:href="/assets/svg/bootstrap-icons.svg#bootstrap"/></svg>
+  logo:
+    header: 
+    footer: 
+# To enable Google Analytics (GA) tracking, provide your GA tracking ID below.
+# To disable GA tracking for a particular page, add the following to the
+# page's front matter: ga_do_not_track: true
+google_analytics_tracking_id: 

data/_includes/_components/carousel.html

@@ -0,0 +1,78 @@
+{%- if !include.carousel_id and include.carousel_id != '' -%}
+    {% assign carousel_id = include.carousel_id %}
+{% else %}
+    {% assign carousel_id = "carousel-component" %}
+{%- endif -%}
+
+{%- if include.slide1_alignment == "Left" -%}
+    {% assign slide1_align_class = "text-start" %}
+{%- elsif include.slide1_alignment == "Right" -%}
+    {% assign slide1_align_class = "text-end" %}
+{%- endif -%}
+
+{%- if include.slide2_alignment == "Left" -%}
+    {% assign slide2_align_class = "text-start" %}
+{%- elsif include.slide2_alignment == "Right" -%}
+    {% assign slide2_align_class = "text-end" %}
+{%- endif -%}
+
+{%- if include.slide3_alignment == "Left" -%}
+    {% assign slide3_align_class = "text-start" %}
+{%- elsif include.slide3_alignment == "Right" -%}
+    {% assign slide3_align_class = "text-end" %}
+{%- endif -%}
+<!-- BEGIN Carousel -->
+<div id="{{ carousel_id }}" class="carousel slide my-5" data-bs-ride="carousel">
+    <div class="carousel-indicators">
+        <button type="button" data-bs-target="#{{ carousel_id }}" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+        <button type="button" data-bs-target="#{{ carousel_id }}" data-bs-slide-to="1" aria-label="Slide 2"></button>
+        <button type="button" data-bs-target="#{{ carousel_id }}" data-bs-slide-to="2" aria-label="Slide 3"></button>
+    </div>
+    <div class="carousel-inner">
+        <div class="carousel-item active">
+            {%- if include.slide1_image_path -%}
+                <img class="bd-placeholder-img" width="100%" height="100%" src="{{ slide1_image_path }}" />
+            {%- endif -%}
+            <div class="container">
+                <div class="carousel-caption {{ slide1_align_class }}">
+                    <h1>{{ include.slide1_title }}</h1>
+                    <div class="mb-3 fs-4">{{ include.slide1_tagline }}</div>
+                    <p><a class="btn btn-lg btn-primary" href="{{ slide1_link_url }}">{{ slide1_link_text }}</a></p>
+                </div>
+            </div>
+        </div>
+        <div class="carousel-item">
+            {%- if include.slide2_image_path -%}
+                <img class="bd-placeholder-img" width="100%" height="100%" src="{{ slide2_image_path }}" />
+            {%- endif -%}
+            <div class="container">
+                <div class="carousel-caption {{ slide2_align_class }}">
+                    <h1>{{ include.slide2_title }}</h1>
+                    <div class="mb-3 fs-4">{{ include.slide2_tagline }}</div>
+                    <p><a class="btn btn-lg btn-primary" href="{{ slide2_link_url }}">{{ slide2_link_text }}</a></p>
+                </div>
+            </div>
+        </div>
+        <div class="carousel-item">
+            {%- if include.slide3_image_path -%}
+                <img class="bd-placeholder-img" width="100%" height="100%" src="{{ slide3_image_path }}" />
+            {%- endif -%}
+            <div class="container">
+                <div class="carousel-caption {{ slide3_align_class }}">
+                    <h1>{{ include.slide3_title }}</h1>
+                    <div class="mb-3 fs-4">{{ include.slide3_tagline }}</div>
+                    <p><a class="btn btn-lg btn-primary" href="{{ slide3_link_url }}">{{ slide3_link_text }}</a></p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#{{ carousel_id }}" data-bs-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Previous</span>
+    </button>
+    <button class="carousel-control-next" type="button" data-bs-target="#{{ carousel_id }}" data-bs-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Next</span>
+    </button>
+</div>
+<!-- END Carousel -->

data/_includes/_components/columns_icons.html

@@ -0,0 +1,60 @@
+<!-- BEGIN Columns Icons -->
+<div class="container px-4 py-5 component-columns-icons">
+    {%- if include.title -%}
+        <h2 class="pb-2 border-bottom">{{ include.title }}</h2>
+    {%- endif -%}
+    <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
+        {%- if !include.col1_title -%}
+            <div class="feature col">
+                {%- if !include.col1_icon_path -%}
+                    <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
+                        <svg class="bi" width="1em" height="1em"><use xlink:href="{{ include.col1_icon_path }}"/></svg>
+                    </div>
+                {%- endif -%}
+                <h3 class="fs-2">{{ include.col1_title }}</h3>
+                <div class="mb-3">{{ include.col1_body }}</div>
+                {%- if !include.col1_link_text -%}
+                    <a href="{{ include.col1_link_url }}" class="icon-link d-inline-flex align-items-center">
+                        {{ include.col1_link_text }}
+                        <svg class="bi" width="1em" height="1em"><use xlink:href="/assets/svg/bootstrap-icons.svg#chevron-right"/></svg>
+                    </a>
+                {%- endif -%}
+            </div>
+        {%- endif -%}
+        {%- if !include.col2_title -%}
+            <div class="feature col">
+                {%- if !include.col2_icon_path -%}
+                    <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
+                        <svg class="bi" width="1em" height="1em"><use xlink:href="{{ include.col2_icon_path }}"/></svg>
+                    </div>
+                {%- endif -%}
+                <h3 class="fs-2">{{ include.col2_title }}</h3>
+                <div class="mb-3">{{ include.col2_body }}</div>
+                {%- if !include.col2_link_text -%}
+                    <a href="{{ include.col2_link_url }}" class="icon-link d-inline-flex align-items-center">
+                        {{ include.col2_link_text }}
+                        <svg class="bi" width="1em" height="1em"><use xlink:href="/assets/svg/bootstrap-icons.svg#chevron-right"/></svg>
+                    </a>
+                {%- endif -%}
+            </div>
+        {%- endif -%}
+        {%- if !include.col3_title -%}
+            <div class="feature col">
+                {%- if !include.col3_icon_path -%}
+                    <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
+                        <svg class="bi" width="1em" height="1em"><use xlink:href="{{ include.col3_icon_path }}"/></svg>
+                    </div>
+                {%- endif -%}
+                <h3 class="fs-2">{{ include.col3_title }}</h3>
+                <div class="mb-3">{{ include.col3_body }}</div>
+                {%- if !include.col3_link_text -%}
+                    <a href="{{ include.col3_link_url }}" class="icon-link d-inline-flex align-items-center">
+                        {{ include.col3_link_text }}
+                        <svg class="bi" width="1em" height="1em"><use xlink:href="/assets/svg/bootstrap-icons.svg#chevron-right"/></svg>
+                    </a>
+                {%- endif -%}
+            </div>
+        {%- endif -%}
+    </div>
+</div>
+<!-- END Columns Icons -->

data/_includes/_components/columns_icons_grid.html

@@ -0,0 +1,97 @@
+<!-- BEGIN Columns Icons Grid -->
+<div class="container px-4 py-5 columns-icon-grid">
+    {%- if include.title -%}
+        <h2 class="pb-2 border-bottom">Icon grid</h2>
+    {%- endif -%}
+    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pt-5">
+        {%- if include.item1_title -%}
+            <div class="col d-flex align-items-start">
+                {%- if item1_icon_path -%}
+                    <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="{{ item1_icon_path }}"/></svg>
+                {%- endif -%}
+                <div>
+                    <h3 class="fw-bold mb-0 fs-4">{{ item1_title }}</h3>
+                    <div class="mb-3">{{ item1_body }}</div>
+                </div>
+            </div>
+        {%- endif -%}
+        {%- if include.item2_title -%}
+            <div class="col d-flex align-items-start">
+                {%- if item2_icon_path -%}
+                    <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="{{ item2_icon_path }}"/></svg>
+                {%- endif -%}
+                <div>
+                    <h3 class="fw-bold mb-0 fs-4">{{ item2_title }}</h3>
+                    <p>{{ item2_body }}</p>
+                </div>
+            </div>
+        {%- endif -%}
+        {%- if include.item3_title -%}
+            <div class="col d-flex align-items-start">
+                {%- if item3_icon_path -%}
+                    <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="{{ item3_icon_path }}"/></svg>
+                {%- endif -%}
+                <div>
+                    <h3 class="fw-bold mb-0 fs-4">{{ item3_title }}</h3>
+                    <p>{{ item3_body }}</p>
+                </div>
+            </div>
+        {%- endif -%}
+        {%- if include.item4_title -%}
+            <div class="col d-flex align-items-start">
+                {%- if item4_icon_path -%}
+                    <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="{{ item4_icon_path }}"/></svg>
+                {%- endif -%}
+                <div>
+                    <h3 class="fw-bold mb-0 fs-4">{{ item4_title }}</h3>
+                    <p>{{ item4_body }}</p>
+                </div>
+            </div>
+        {%- endif -%}
+        {%- if include.item5_title -%}
+            <div class="col d-flex align-items-start">
+                {%- if item5_icon_path -%}
+                    <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="{{ item5_icon_path }}"/></svg>
+                {%- endif -%}
+                <div>
+                    <h3 class="fw-bold mb-0 fs-4">{{ item5_title }}</h3>
+                    <p>{{ item5_body }}</p>
+                </div>
+            </div>
+        {%- endif -%}
+        {%- if include.item6_title -%}
+            <div class="col d-flex align-items-start">
+                {%- if item6_icon_path -%}
+                    <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="{{ item6_icon_path }}"/></svg>
+                {%- endif -%}
+                <div>
+                    <h3 class="fw-bold mb-0 fs-4">{{ item6_title }}</h3>
+                    <p>{{ item6_body }}</p>
+                </div>
+            </div>
+        {%- endif -%}
+        {%- if include.item7_title -%}
+            <div class="col d-flex align-items-start">
+                {%- if item7_icon_path -%}
+                    <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="{{ item7_icon_path }}"/></svg>
+                {%- endif -%}
+                <div>
+                    <h3 class="fw-bold mb-0 fs-4">{{ item7_title }}</h3>
+                    <p>{{ item7_body }}</p>
+                </div>
+            </div>
+        {%- endif -%}
+        {%- if include.item8_title -%}
+            <div class="col d-flex align-items-start">
+                {%- if item8_icon_path -%}
+                    <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="{{ item8_icon_path }}"/></svg>
+                {%- endif -%}
+                <div>
+                    <h3 class="fw-bold mb-0 fs-4">{{ item8_title }}</h3>
+                    <p>{{ item8_body }}</p>
+                </div>
+            </div>
+        {%- endif -%}
+    </div>
+</div>
+<!-- END Columns Icons Grid -->