HB Cards Theme is a modular Hugo theme built on the HB Framework and Bootstrap v5.3 that produces fast, SEO-friendly static websites with a card-based layout. Developed for the HB Framework ecosystem, it targets blogs, project documentation, digital gardens, and landing pages, with a live demo at theme-cards.hbstack.dev and install documents in English and Simplified Chinese.
What is HB Cards Theme?
HB Cards Theme is a Hugo theme that converts Markdown content into a static website using card-style components. It runs on the Hugo static site generator and extends the HB Framework's modular component system, taking content files as input and outputting a responsive site with dark mode, client-side search, and PWA support built in.
What makes HB Cards Theme stand out?
- Performance and SEO — The demo scores a perfect 100 on PageSpeed Insights across all four metrics on mobile and desktop; PurgeCSS automatically strips unused CSS.
- Multi-purpose foundation — One theme covers blogs, project documentation, digital gardens, and landing pages with the same card-based layout.
- Responsive and mobile-first — Styled with Bootstrap v5.3, every component adapts to different screen widths.
- Dark mode with three modes — Light, dark, and auto mode that follows the operating system's setting.
- Client-side fuzzy search — Search with filtering, sorting, and multilingual support, all running in the browser.
- PWA and offline support — Installable sites, an offline page, offline image support, and pre-caching of CSS, JS, and font files.
- Deep customization — Custom SCSS variables and styles, custom TypeScript, and Hugopress HTML hooks for head-end, body-end, and sidebar widget insertion.
- Content enhancements — Image processing via URL query strings, a code block panel with copy/line-number toggles, an image viewer, and KaTeX/Mermaid/Bootstrap shortcode support.
Who is it for?
- Bloggers — Publish posts with archives grouped by year and month, related posts, and multiple authors per article.
- Technical writers — Create documentation with search, code block controls, and Mermaid diagrams for procedural content.
- Digital gardeners — Maintain a personal knowledge base with fast fuzzy search, RTL support, and offline access.
- Developers — Launch landing pages or portfolio sites quickly using the modular HB Framework and custom hooks.
What can you do with HB Cards Theme?
- Start a blog — Set up a Card-style blog with header and footer menus, social links, and a back-to-top button.
- Publish project docs — Write Markdown docs that build into a searchable site with KaTeX math and Mermaid diagrams.
- Build a multilingual site — Serve content in multiple languages, including right-to-left scripts, with a cross-lingual search index.
- Create a digital garden — Organize notes as cards with offline PWA support and image processing via query strings.
How does HB Cards Theme work?
Install the theme via Hugo's module system and place your Markdown content in the content directory. The repository's exampleSite folder contains custom SCSS variables, TypeScript hooks, and Hugopress partials you can copy to style the theme. A migration guide is provided for moving from the HB starter theme.
Pricing
HB Cards Theme is free and open source; the GitHub repository includes license and version badges but no paid tiers or subscription plans are mentioned.
FAQ
Is HB Cards Theme free?
Yes, the theme is open source and hosted on GitHub under the HB Stack organization. It can be used for personal or commercial projects without paying a license fee.
What Hugo version does it require?
The README shows a dynamic Hugo requirements badge that lists the exact minimum Hugo version needed. The badge is generated from the module's metadata, so check the repository for the current requirement.
Does it support dark mode?
Yes. The theme provides light, dark, and auto modes. Auto mode follows the system default, and you can switch modes from the site's UI.
Can I customize the theme's look?
Yes. The theme exposes custom SCSS variables and styles, a custom TypeScript file, and Hugopress hooks for inserting custom HTML before the head end, body end, or as a sidebar widget. All of these are demonstrated in the exampleSite.
Does the theme work for multilingual sites?
Yes, it supports multiple languages and includes RTL (right-to-left) language support. The built-in search can index and search across all languages.
