Grid and Cards
Learn how to create responsive grid layouts and card components using the HBStack framework.
On this page
Summary content goes here.
Hbstack Bootstrap Module
It comes with lot of features and components to build modern websites. The main information can be found at Hugomods.
Using Image Grid Shortcode
The shortcode takes a source directory as its input, that should be present in data directory. This file provides a correct path to images along with their title. Path can be local or external URL.
- The following shortcode reads the file from a data directory and displays the images.
Article Cards shortcode
Caution
This shortcode is not to be used on
detail page, it is safe to be used onhomepageandsection list
- The above tells us that it isi designed to show case your work in cards style on page that does not show the contents in detail, if you do it a infinite recursion will occur. Here is an example of this shortcode use.
Blog Section
Sep 6, 2025
Blog Section
The blog is where I unpack ideas from the trenches—shipping static sites with HBStack, experimenting with machine...
Courses
Jan 2, 2025
NO IMAGE
Blog Module Configuration Guide
Complete guide to configuring the HBStack blog module including all sub-modules and their parameters
About
May 17, 2026
Affiliate Disclosure
Disclosure of affiliate relationships for products and services mentioned on this site.
Courses
May 16, 2026
NO IMAGE
Footer Module
The footer module allows you to manage and customize the footer section of your site. This document will guide you...
Docs
May 8, 2026
NO IMAGE
Getting Started Checklist
Step-by-step verification checklist for setting up the Dictionary system. Prerequisites, setup steps, and success...
Docs
May 8, 2026
NO IMAGE
Project Overview
Dictionary vocabulary management system - features, architecture, and capabilities.
Docs
May 8, 2026
NO IMAGE
Quick Reference
Quick command reference for running vocabulary extraction. Aliases environment setup, and example commands.
Docs
May 8, 2026
NO IMAGE
Setup Guide
Complete setup instructions for the Dictionary system. Environment configuration, dependencies, and troubleshooting.
Docs
May 8, 2026
NO IMAGE
Step-by-Step Vocabulary Extraction Guide
Complete 7-step walkthrough for extracting vocabulary from YouTube videos. From transcript extraction through...
My Dictionary
May 5, 2026
NO IMAGE
Capitalism
Vocabulary notes for Capitalism - English words with Urdu meanings and examples.
Docs
May 5, 2026
NO IMAGE
Dictionary Workflow Improvements - Implementation Summary
Summary of improvements made and next steps
Docs
May 5, 2026
NO IMAGE
Dictionary Workflow Improvements - Video to Vocabulary Automation
Proposed improvements for extracting vocabulary from videos and automating dictionary entry creation
To use this shortcode, read its documentation.
- Only by having this shortcode is enough to present all the articles in a card style on page where is rendered. The shortcode will automatically fetch the articles from the known sections pages e.g
docs, blog, etc.and display them in a card style. - The following example shows how to use the shortcode with parameters.
1
Blog Section
Sep 6, 2025
Blog Section
The blog is where I unpack ideas from the trenches—shipping static sites with HBStack,...
Docs
May 8, 2026
NO IMAGE
Getting Started Checklist
Step-by-step verification checklist for setting up the Dictionary system. Prerequisites, setup...
Docs
May 8, 2026
NO IMAGE
Project Overview
Dictionary vocabulary management system - features, architecture, and capabilities.
Docs
May 8, 2026
NO IMAGE
Quick Reference
Quick command reference for running vocabulary extraction. Aliases environment setup, and example...
Docs
May 8, 2026
NO IMAGE
Setup Guide
Complete setup instructions for the Dictionary system. Environment configuration, dependencies, and...
Docs
May 8, 2026
NO IMAGE
Step-by-Step Vocabulary Extraction Guide
Complete 7-step walkthrough for extracting vocabulary from YouTube videos. From transcript...
Docs
May 5, 2026
NO IMAGE
Dictionary Workflow Improvements - Implementation Summary
Summary of improvements made and next steps
Docs
May 5, 2026
NO IMAGE
Dictionary Workflow Improvements - Video to Vocabulary Automation
Proposed improvements for extracting vocabulary from videos and automating dictionary entry creation
Docs
May 5, 2026
NO IMAGE
Video-to-Vocabulary Workflow - How To Guide
Step-by-step guide for extracting vocabulary from videos using AI
Docs
Jan 1, 1
NO IMAGE
Anki Workflow Verification
Anki Workflow Verification Date: 2 May 2026
Status: ✅ Verified and Working
Current Working Workflow...
Docs
Jan 1, 1
NO IMAGE
Copilot Prompt - Extract Vocabulary from Transcript
Ready-to-use prompt for extracting vocabulary using GitHub Copilot
Docs
Jan 1, 1
NO IMAGE
Copilot Prompt Template
I need help extracting vocabulary from a video transcript for my English learning dictionary.
Task:...
- Following is used with default parameters.
1
Blog Section
Sep 6, 2025
Blog Section
The blog is where I unpack ideas from the trenches—shipping static sites with HBStack, experimenting with machine...
Courses
Jan 2, 2025
NO IMAGE
Blog Module Configuration Guide
Complete guide to configuring the HBStack blog module including all sub-modules and their parameters
About
May 17, 2026
Affiliate Disclosure
Disclosure of affiliate relationships for products and services mentioned on this site.
Courses
May 16, 2026
NO IMAGE
Footer Module
The footer module allows you to manage and customize the footer section of your site. This document will guide you...
Docs
May 8, 2026
NO IMAGE
Getting Started Checklist
Step-by-step verification checklist for setting up the Dictionary system. Prerequisites, setup steps, and success...
Docs
May 8, 2026
NO IMAGE
Project Overview
Dictionary vocabulary management system - features, architecture, and capabilities.
Docs
May 8, 2026
NO IMAGE
Quick Reference
Quick command reference for running vocabulary extraction. Aliases environment setup, and example commands.
Docs
May 8, 2026
NO IMAGE
Setup Guide
Complete setup instructions for the Dictionary system. Environment configuration, dependencies, and troubleshooting.
Docs
May 8, 2026
NO IMAGE
Step-by-Step Vocabulary Extraction Guide
Complete 7-step walkthrough for extracting vocabulary from YouTube videos. From transcript extraction through...
My Dictionary
May 5, 2026
NO IMAGE
Capitalism
Vocabulary notes for Capitalism - English words with Urdu meanings and examples.
Docs
May 5, 2026
NO IMAGE
Dictionary Workflow Improvements - Implementation Summary
Summary of improvements made and next steps
Docs
May 5, 2026
NO IMAGE
Dictionary Workflow Improvements - Video to Vocabulary Automation
Proposed improvements for extracting vocabulary from videos and automating dictionary entry creation
Parameters
- limits
- linkText
- sections
- summaryLen