Browse Courses

HBStack & HugoMods Shortcodes Showcase

July 7, 2025 15 min read Ui-Components HBStack Bootstrap Ui-Examples

A comprehensive showcase of all available shortcodes in HBStack and HugoMods frameworks, including Bootstrap components, extended media shortcodes, and modular features with examples and module import requirements.

On this page

A comprehensive showcase of all available shortcodes in HBStack and HugoMods frameworks, including Bootstrap components, extended media shortcodes, and modular features with examples and module import requirements.

1. Module Requirements

Before using these shortcodes, ensure you have the following modules imported in your config/_default/module.yaml:

 1imports:
 2  # Custom modules
 3  - path: github.com/agsayyed/ags-mcq
 4  - path: github.com/agsayyed/ags-markmap
 5  # gallery modules.
 6  - path: github.com/hbstack/gallery
 7  - path: github.com/hbstack/gallery/modules/breadcrumb
 8  - path: github.com/hbstack/syntax-highlighting/styles/github-dark
 9  - path: github.com/hugomods/shortcodes
10  - path: github.com/hbstack/shortcodes
11
12  # Bootstrap components for shortcodes
13  - path: github.com/hugomods/bootstrap
14  - path: github.com/hbstack/bootstrap
15  - path: github.com/gohugoio/hugo-mod-bootstrap-scss/v5
16
17  # Additional shortcode modules
18  - path: github.com/hugomods/encrypt
19  - path: github.com/hugomods/katex
20  - path: github.com/hugomods/mermaid
21  - path: github.com/hugomods/video-js
22  - path: github.com/hugomods/kroki
23  - path: github.com/hugomods/echarts
24
25  # Core modules
26  - path: github.com/hugomods/hugopress
27  # syntax highlighting, see https://hbstack.dev/en/docs/modules/syntax-highlighting/.
28
29  # icons modules
30  - path: github.com/hugomods/icons/vendors/font-awesome
31  - path: github.com/hugomods/icons/vendors/bootstrap
32  # - path: github.com/hugomods/icons/vendors/mdi
33  # - path: github.com/hugomods/icons/vendors/simple-icons
34  # - path: github.com/hugomods/icons/vendors/tabler
35  # - path: github.com/hugomods/icons/vendors/feather
36
37  # header themes
38  - path: github.com/hbstack/header/themes/pills
39  # - path: github.com/hbstack/header/themes/tabs
40  # - path: github.com/hbstack/header/themes/classic
41
42  # blog sidebar
43  - path: github.com/hbstack/blog/modules/sidebar/profile
44  - path: github.com/hbstack/blog/modules/sidebar/posts
45  - path: github.com/hbstack/blog/modules/sidebar/taxonomies
46
47  # blog comments engine
48  - path: github.com/hbstack/blog/modules/giscus
49  # - path: github.com/hbstack/blog/modules/disqus
50  # - path: github.com/hbstack/blog/modules/utterances
51
52  # blog table of contents scrollspy
53  - path: github.com/hbstack/blog/modules/toc-scrollspy
54
55  # blog content panel
56  - path: github.com/hbstack/blog/modules/content-panel
57
58  # docs comments engine
59  - path: github.com/hbstack/docs/modules/giscus
60  # - path: github.com/hbstack/docs/modules/utterances
61  # - path: github.com/hbstack/docs/modules/disqus
62
63  # docs table of contents scrollspy
64  - path: github.com/hbstack/docs/modules/toc-scrollspy
65
66  # docs content panel
67  - path: github.com/hbstack/docs/modules/content-panel
68
69  # other modules
70  # - path: github.com/hugomods/google-analytics
71  # - path: github.com/hugomods/google-adsense
72
73  # recommended modules
74  # check which modules were imported by recommended module by "hugo mod graph | grep recommended".
75  # see also https://hbstack.dev/en/docs/modules/meta/.
76  # to remove unused modules, you need to replace the recommended module with modules your need.
77  # see also https://hbstack.dev/en/2023/10/replace-meta-modules/.
78  - path: github.com/hbstack/meta/recommended

2. Bootstrap UI Components

2.1. Alert Messages

Module Required: github.com/hugomods/bootstrap

1{{\< bs/alert >}}Basic alert{{\< /bs/alert >}}
2{{\< bs/alert primary >}}Primary alert{{\< /bs/alert >}}
3{{\< bs/alert success >}}Success alert{{\< /bs/alert >}}
4{{\< bs/alert warning >}}Warning alert{{\< /bs/alert >}}
5{{\< bs/alert danger >}}Danger alert{{\< /bs/alert >}}

2.2. Lead Paragraph

Module Required: github.com/hugomods/bootstrap

This is a lead paragraph that stands out from regular text. It's perfect for introductions and important information.

You can also add custom classes to style the lead paragraph differently.

1{{\% bs/lead %}}
2Your lead text here.
3{{\% /bs/lead %}}
4
5{{\% bs/lead class="text-primary" %}}
6Lead with custom styling.
7{{\% /bs/lead %}}

2.3. Collapse (Show/Hide Content)

Module Required: github.com/hugomods/bootstrap

This content is hidden by default and can be toggled by clicking the button above.

You can include any markdown content here:

  • Lists
  • Bold text
  • Code blocks
  • Images
  • Other shortcodes
1{{\< bs/collapse "Button Text" >}}
2Hidden content goes here.
3{{\< /bs/collapse >}}

2.4. Accordion (FAQ Style)

Module Required: github.com/hugomods/bootstrap

The accordion shortcode requires a data file. Create a YAML file in your data directory:

1# data/example/faq.yaml
2- title: 'What is HBStack?'
3  content: 'HBStack is a modular Hugo framework built on Bootstrap for creating fast, responsive websites.'
4
5- title: 'How do I install modules?'
6  content: 'Add the module path to your config/_default/module.yaml file under the imports section.'

1{{\% bs/accordion "data.file.path" %}}

2.5. Ratio (Responsive Videos)

Module Required: github.com/hugomods/bootstrap

1{{\< bs/ratio 16x9 >}}
2{{\< youtube VIDEO_ID >}}
3{{\< /bs/ratio >}}

2.6. Display Headings

Module Required: github.com/hugomods/bootstrap

Display 1

Display 2

Display 3

1

Large Display Heading



2

Medium Display Heading

2.7. Config Toggle

Module Required: github.com/hugomods/bootstrap

Demonstrates configuration in different formats with a title:

config.toml

1baseURL = '<https://example.com>'
2title = 'My Site'
3[params]
4  author = 'John Doe'
5  description = 'A Hugo site using HBStack'

config.yaml

1baseURL: <https://example.com>
2params:
3  author: John Doe
4  description: A Hugo site using HBStack
5title: My Site

config.json

1{
2   "baseURL": "\u003chttps://example.com\u003e",
3   "params": {
4      "author": "John Doe",
5      "description": "A Hugo site using HBStack"
6   },
7   "title": "My Site"
8}

With a specific style and languages:

menu.yaml

1main:
2- name: Home
3  url: /
4  weight: 1.0
5- name: Blog
6  url: /blog/
7  weight: 2.0

menu.json

 1{
 2   "main": [
 3      {
 4         "name": "Home",
 5         "url": "/",
 6         "weight": 1
 7      },
 8      {
 9         "name": "Blog",
10         "url": "/blog/",
11         "weight": 2
12      }
13   ]
14}

2.8. Icon Grid

Module Required: github.com/hugomods/bootstrap + github.com/hugomods/icons/vendors/font-awesome

map[text:Basic Example]

Requires data file:

 1# data/example/features.yaml
 2- icon:
 3    vendor: fas
 4    name: rocket
 5    color: primary
 6  title: 'Fast Performance'
 7  description: 'Built for speed with optimized assets and efficient rendering'
 8- icon:
 9    vendor: fas
10    name: shield
11    color: success
12  title: 'Secure & Reliable'
13  description: 'Security-first approach with best practices built-in'
14- icon:
15    vendor: fas
16    name: mobile-screen
17    color: info
18  title: 'Mobile Responsive'
19  description: "Looks great on all devices with Bootstrap's responsive grid"
20- icon:
21    vendor: fas
22    name: puzzle-piece
23    color: warning
24  title: 'Modular Architecture'
25  description: "Add only the features you need with Hugo's module system"

2.9. Container, Row, and Column Layout

Module Required: github.com/hugomods/bootstrap

First Column

  • Styled with primary background
  • Responsive width (6/12)
  • Custom padding and shadow
  • Supports markdown content

Second Column

  • Styled with success background
  • Equal width as first column
  • Consistent styling
  • Shows grid flexibility

Here’s another example with different colors and a nested grid:

Main Content (8/12)

This column takes up 8 columns of the 12-column grid. The content is styled with:

  • Light info background with opacity
  • Rounded borders with subtle shadow
  • Proper spacing and padding

Sidebar (4/12)

A smaller column that demonstrates:

  • Responsive layout
  • Consistent styling
  • Visual hierarchy
Column 1/3
Column 2/3
Column 3/3

Example code:

 1{{< bs/container class="bg-light p-4 rounded-3 border mb-3" >}}
 2{{< bs/row class="g-4" >}}
 3{{< bs/col 6 >}}
 4{{< html/tag _name="div" class="p-4 bg-primary text-white rounded shadow-sm" >}}
 5
 6<h4>First Column</h4>
 7<ul class="mb-0">
 8<li>Styled with primary background</li>
 9<li>Responsive width (6/12)</li>
10<li>Custom padding and shadow</li>
11<li>Supports markdown content</li>
12</ul>
13{{< /html/tag >}}
14{{< /bs/col >}}
15{{< bs/col 6 >}}
16{{< html/tag _name="div" class="p-4 bg-success text-white rounded shadow-sm" >}}
17
18<h4>Second Column</h4>
19<ul class="mb-0">
20<li>Styled with success background</li>
21<li>Equal width as first column</li>
22<li>Consistent styling</li>
23<li>Shows grid flexibility</li>
24</ul>
25{{< /html/tag >}}
26{{< /bs/col >}}
27{{< /bs/row >}}
28{{< /bs/container >}}

3. Extended Media Shortcodes

3.1. Code Playground

Module Required: github.com/hugomods/shortcodes

3.1.1. CodePen

1{{< codepen id="PEN_ID" >}}
2{{< codepen id="PEN_ID" user="USERNAME" >}}

3.1.2. JSFiddle

1{{< jsfiddle id="FIDDLE_ID" >}}
2{{< jsfiddle id="FIDDLE_ID" user="USERNAME" >}}

3.1.3. JSRun

1{{< jsrun id="RUN_ID" >}}

3.2. Video Players

Module Required: github.com/hugomods/shortcodes

3.2.1. Bilibili

1{{< bilibili 4792031027134976 >}}

3.2.2. YouKu

1{{<id="XNjQ2NjU4MDkxMg=="  >}}

3.2.3. Asciinema (Terminal Recordings)

1{{< asciinema CAST_ID >}}
2{{< asciinema 473695 >}} <!-- Basic usage -->
3{{< asciinema id="473695" speed="2" >}} <!-- 2x playback speed -->
4{{< asciinema id="473695" rows="30" cols="80" >}} <!-- Custom terminal size -->

3.3. Music Player

3.3.1. NetEase Cloud Music

1{{< netease-cloud-music id="SONG_ID" >}}
2{{< netease-cloud-music id="PLAYLIST_ID" type="playlist" >}}

4. Content Enhancement Shortcodes

4.1. Details (Collapsible Content)

Module Required: github.com/hugomods/shortcodes

Click to see more details

This content is hidden inside a details element. It’s semantic HTML that works without JavaScript.

Here are some key features:

  • Support for markdown formatting
  • Styling with bold text
  • Inline code blocks
  • Lists with proper spacing

You can include any markdown content here:

  1. First item in ordered list

  2. Second item shows code example:

    1print("Hello from a code block!")

  3. Third item with nested content:

    • Nested bullet point
    • Another nested point

And blockquotes work perfectly too!

Even multi-line quotes render correctly.

Additional formatting examples:

  • Italic text for emphasis
  • Strikethrough when needed
  • Links work as expected
1{{% details "Summary text" %}}
2Hidden content here.
3{{% /details %}}

4.2. File Content in data directory

Module Required: github.com/hugomods/shortcodes

NOte, to get the correct formatting it is to be palced in codeblock

1{ { < file-content "data/files/config.yaml" > } }
  • Reading from assets directory
1

This reads content from files in your assets, static, or content directories.

1{{\< file-content "path/to/file.txt" >}}
2{{\< file-content path="config.yaml" lang="yaml" >}}

4.3. Abbreviations

Module Required: github.com/hugomods/shortcodes

Create abbreviations with tooltips:

Requires data file:

1# data/abbr.yaml
2HTML: 'HyperText Markup Language'
3CSS: 'Cascading Style Sheets'

1{{< abbr "HTML" >}}
2{{< abbr "CSS" "Custom tooltip" >}}

4.4. Environment Variables

Module Required: github.com/hugomods/shortcodes

The env shortcode is primarily used to read sensitive or configurable information from environment variables. This is particularly useful for:

  • Keeping sensitive information out of your public repository
  • Making configurations deployable across different environments
  • Handling personal information that shouldn’t be hardcoded

Use Case Example: When your site repository is public, you might want to avoid hardcoding personal contact information. Instead, store it in environment variables:

1Contact: {{% env "CONTACT_EMAIL" "contact@example.com" %}}

GitHub Actions Example: When using GitHub Actions for deployment, store sensitive information in GitHub Secrets and pass them as environment variables:

1# .github/workflows/deploy.yml
2env:
3  CONTACT_EMAIL: ${{ secrets.CONTACT_EMAIL }}
4  SITE_DOMAIN: ${{ secrets.SITE_DOMAIN }}

Common Usage Examples:

Basic usage:

1{{% env "CI" %}} # Check if running in CI environment

With default fallback:

1{{% env "HUGO_ENV" "development" %}} # Uses "development" if HUGO_ENV is not set

Real-world examples:

1Site Domain: {{% env "SITE_DOMAIN" "localhost:1313" %}}
2API Key: {{% env "API_KEY" "demo-key" %}}
3Contact: {{% env "CONTACT_EMAIL" "contact@example.com" %}}

Common Environment Variables:

  • HUGO_ENV: Current Hugo environment (development/production)
  • HUGO_VERSION: Hugo version being used
  • CI: Whether running in a CI environment
  • NETLIFY: Whether running on Netlify
  • VERCEL: Whether running on Vercel

4.5. Clearfix

Module Required: github.com/hugomods/bootstrap

The clearfix shortcode helps clear floated elements. Here’s an example with floated images and text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id eleifend ex. Nunc vestibulum sapien quis dolor mollis, at efficitur eros tincidunt. Sed vulputate magna vitae enim sagittis, vel tincidunt nisi pellentesque. Praesent sit amet tempor purus.

Proin interdum risus vel orci convallis, vitae ultricies erat euismod. Nulla ultricies mi sem, id semper elit venenatis sit amet. Curabitur ultrices lobortis enim, tristique lacinia arcu accumsan eleifend. Suspendisse nec orci et nisi sagittis gravida.

1{{\%  bootstrap/clearfix  \%}}
2![Float Start](/path/to/image.jpg?width=200px#float-start)
3Left-floated content with text...
4
5![Float End](/path/to/image.jpg?width=200px#float-end)
6Right-floated content with text...
7{{\% /bootstrap/clearfix \%}}

4.6. Mark Text

Module Required: github.com/hugomods/shortcodes

Highlight text with a background colo

4.7. Site Parameters

Module Required: github.com/hugomods/shortcodes

Access site parameters from your content:

1{{< params "site.title" >}} # Access site title
2{{< params "params.description" >}} # Access site description

5. Specialized Module Shortcodes

5.1. Icons

Module Required: Multiple vendor modules:

  • github.com/hugomods/icons/vendors/font-awesome
  • github.com/hugomods/icons/vendors/bootstrap
  • github.com/hugomods/icons/vendors/mdi
  • github.com/hugomods/icons/vendors/simple-icons
  • github.com/hugomods/icons/vendors/tabler
  • github.com/hugomods/icons/vendors/feather

Here are examples from different icon vendors:

Bootstrap Icons: house icon camera icon bell icon check-circle icon (with color) exclamation-triangle icon (with size)

Font Awesome Icons: rocket icon shield icon (with color) mobile-screen icon (with size) puzzle-piece icon GitHub brand icon Docker brand icon

Material Design Icons (MDI): home icon account-circle icon cog icon (with color) alert icon (with size)

Simple Icons: Hugo Markdown GitHub (with brand color) Docker (with brand color)

Feather Icons: home icon user icon settings icon (with color) alert-triangle icon (with size)

To use these icon sets, uncomment their respective module imports in config/_default/module.yaml:

1# icons modules
2- path: github.com/hugomods/icons/vendors/font-awesome
3- path: github.com/hugomods/icons/vendors/bootstrap
4- path: github.com/hugomods/icons/vendors/mdi
5- path: github.com/hugomods/icons/vendors/simple-icons
6# - path: github.com/hugomods/icons/vendors/tabler
7- path: github.com/hugomods/icons/vendors/feather

Code Examples:

Basic usage:

1{{< icons/icon vendor="bootstrap" name="house" >}}

With color:

1{{< icons/icon vendor="font-awesome" name="heart" color="red" >}}

With custom size:

1{{< icons/icon vendor="font-awesome" name="star" size="1.5em" >}}

Icon vendors and examples:

 1# Bootstrap icons
 2
 3{{< icons/icon vendor="bootstrap" name="house" >}}
 4{{< icons/icon vendor="bootstrap" name="camera" >}}
 5{{< icons/icon vendor="bootstrap" name="bell" >}}
 6
 7# Font Awesome icons (fas = solid, fab = brands)
 8
 9{{< icons/icon vendor="fas" name="rocket" >}} # Solid icon
10{{< icons/icon vendor="fab" name="github" >}} # Brand icon
11{{< icons/icon vendor="fas" name="shield" color="success" >}} # With color
12
13# Material Design Icons (MDI)
14
15{{< icons/icon vendor="mdi" name="home" >}}
16{{< icons/icon vendor="mdi" name="account-circle" color="blue" >}}
17
18# Simple Icons (with brand colors)
19
20{{< icons/icon vendor="simple-icons" name="hugo" >}}
21{{< icons/icon vendor="simple-icons" name="github" color="#181717" >}}
22
23# Tabler Icons
24
25{{< icons/icon vendor="tabler" name="home" >}} # Basic home icon
26{{< icons/icon vendor="tabler" name="user" >}} # User icon
27{{< icons/icon vendor="tabler" name="settings" color="blue" >}} # Colored settings icon
28{{< icons/icon vendor="tabler" name="alert-circle" size="1.5em" >}} # Sized alert-circle icon
29
30# Feather Icons
31
32{{< icons/icon vendor="feather" name="home" >}}
33{{< icons/icon vendor="feather" name="settings" color="purple" >}}
34
35# Material Design Icons (MDI)
36
37{{< icons/icon vendor="mdi" name="account" >}}
38{{< icons/icon vendor="mdi" name="cog" >}}
39
40# Simple Icons
41
42{{< icons/icon vendor="simple-icons" name="github" >}}
43{{< icons/icon vendor="simple-icons" name="linkedin" >}}
44
45# Feather Icons
46
47{{< icons/icon vendor="feather" name="settings" >}}
48{{< icons/icon vendor="feather" name="mail" >}}

5.2. Math (KaTeX)

Module Required: github.com/hugomods/katex

$$ f(x) = \int\_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d\xi $$
1{{< katex >}}
2f(x) = \int\_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d\xi
3{{< /katex >}}

5.3. Mermaid Diagrams

Module Required: github.com/hugomods/mermaid

	graph TD
	A[Start] --> B{Decision}
	B -->|Yes| C[Process 1]
	B -->|No| D[Process 2]
	C --> E[End]
	D --> E
	
1{{< mermaid >}}
2graph TD
3A[Start] --> B{Decision}
4B -->|Yes| C[Process 1]
5B -->|No| D[Process 2]
6{{< /mermaid >}}

5.4. Content Encryption

Module Required: github.com/hugomods/encrypt

1{{< encrypt "your_password" >}}
2Secret content here.
3{{< /encrypt >}}

5.5. Charts and Diagrams

  • ECharts

Module Required: github.com/hugomods/echarts

Create interactive charts using ECharts:

1{{< echarts data="example.echarts-basic" >}}{{< /echarts >}}
2
3# Or with inline JSON in a data file
4# Create data/example/chart.yaml with your configuration
5{{< echarts data="example.chart" >}}{{< /echarts >}}

5.6. Video.js Player

Module Required: github.com/hugomods/video-js

Below is an example of the video-js shortcode using a sample video:

The shortcode can be used in multiple ways, shown below:

1{{< video-js src="/videos/demo.mp4" type="video/mp4" >}}
2
3{{< video-js src="/videos/demo.mp4" type="video/mp4" poster="/images/poster.jpg" controls=true preload="auto" >}}

5.6.1. Supported Parameters

The video-js shortcode accepts the following parameters:

ParameterDescription
srcPath to the video file (required)
typeMIME type of the video (required)
posterPath to the poster image (optional)
controlsShow video controls (optional, default: true)
preloadPreload behavior (optional, “auto”/“metadata”/“none”)
widthVideo width in pixels (optional)
heightVideo height in pixels (optional)
classAdditional CSS classes (optional)

6. Hugo Built-in Shortcodes

These are available by default in Hugo:

6.1. YouTube

1{{< youtube VIDEO_ID >}}
2{{< youtube id="VIDEO_ID" autoplay="true" >}}

6.2. Vimeo

1{{< vimeo VIDEO_ID >}}

6.3. Tweet

1{{< tweet user="USERNAME" id="TWEET_ID" >}}

6.4. Instagram

1{{< instagram POST_ID >}}

6.5. GitHub Gist

1{{< gist USERNAME GIST_ID >}}
2{{< gist USERNAME GIST_ID FILENAME >}}

6.6. Figure (Enhanced Images)

Modern workspace with laptop and plants

Modern Workspace

A clean and professional workspace setup perfect for productivity

1{{< figure src="/images/backgrounds/workspace-demo.jpg" title="Modern Workspace" caption="A clean and professional workspace setup" alt="Modern workspace with laptop and plants" >}}

6.7. Code Highlighting

1
2
3
4
5
6
7

package main

import "fmt"

func main() {
fmt.Println("Hello, World!")
}

7. Additional Shortcodes

7.1. HTML Shortcodes

Module Required: github.com/hugomods/shortcodes

7.1.1. html/void

The html/void shortcode generates void HTML elements like input. 

1{{< html/void _name="input" type="text" placeholder="Enter text" class="form-control" >}}

7.2. JSFiddle Shortcode

Module Required: github.com/hugomods/shortcodes

Embed JSFiddle examples.

1{{< jsfiddle user="razonyang" id="6cp7xof1" >}}

7.3. CodePen Shortcode

Module Required: github.com/hugomods/shortcodes

Embed CodePen examples.

1{{< codepen user="username" id="abcdef" >}}

7.4. Video.js Shortcode

Module Required: github.com/hugomods/video-js

Here’s a simple video player with default controls:

The shortcode accepts various parameters for customization. Here’s an example with additional attributes:

1# Basic usage with minimal parameters
2
3{{< video-js src="/videos/demo.mp4" type="video/mp4" controls="true" >}}
4
5# Advanced usage with all available parameters
6
7{{< video-js src="/videos/demo.mp4" type="video/mp4" poster="/images/poster.jpg" controls="true" width="640" height="360" preload="auto" class="rounded shadow-sm" >}}

Key features:

  • Multiple playback rates (0.5x to 2x speed)
  • Fluid responsive design
  • Custom poster images
  • Rounded corners and shadow options
  • Pre-loading for faster playback
  • Full video controls

8. Analytics

Module Required: github.com/hugomods/plausible-analytics

Add Plausible Analytics to your site:

1{{< plausible >}} <!-- Basic usage -->
2{{< plausible domain="example.com" >}} <!-- Custom domain -->

Configure in your site parameters:

1params:
2  plausible:
3    domain: your-domain.com
4    script_source: https://plausible.io/js/script.js

Module Required: github.com/hbstack/gallery

Example of a single image with lightbox functionality:

1{{< img-link src="/images/gallery/landscape1.jpg" alt="Beautiful Landscape" caption="A serene landscape view" >}}

9.2. Image Grid Layouts

Module Required: github.com/hugomods/bootstrap

9.2.1. Basic Image Grid from Data

Create responsive image grids using a data file:

The grid above uses this data file:

1# data/gallery/examples.yaml
2- src: '/images/gallery/landscape1.jpg'
3  alt: 'Beautiful Landscape'
4  caption: 'A serene landscape view'
5  title: 'Nature Scene 1'
6- src: '/images/gallery/landscape2.jpg'
7  alt: 'Another Landscape'
8  caption: 'Capturing natural beauty'
9  title: 'Nature Scene 2'

10. Markdown table Formatting

  • Note: This is a built-in feature of HBstack, not a shortcode but requries the follwing settings be present in your config/_default/config.yaml file:
1markup:
2  goldmark:
3    parser:
4      attribute:
5        block: true

10.1 Default Markdown Table

Header 1Header 2Header 3
Row 1Data 1Data 2
Row 2Data 3Data 4

10.2 Horizontal Alignment

LeftCenterRight
123
123
123

10.3 Vertical Alignment

Heading 1Heading 2
topThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.

{_align=top}

1| Heading 1 | Heading 2                                                                                                                                                      |
2| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
3| `top`     | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. |
4
5{\_align=top}

10.4. Table with caption

NameAgeRole
Foo35Leader
Bar23Developer

{_caption=“here is a caption for the table”}

1| Name | Age |   Role    |
2| ---- | :-: | :-------: |
3| Foo  | 35  |  Leader   |
4| Bar  | 23  | Developer |
5
6{\_caption="Members"}

10.5. Table Styles

Primary Table
Foo
Bar

{_style=primary}

AOS Animation Example