Testing Shortcodes

A reference post demonstrating the custom shortcodes available in HTS.

2 min read e8e.dev
Testing Shortcodes

Introduction

This post serves as a reference and validation page for the custom shortcodes supported by HTS.

All examples below render using built-in shortcodes with no additional configuration. The purpose is to demonstrate how structured, reusable components can be embedded directly in Markdown while preserving consistency and performance.


Hero Section

Welcome to HTS

Modern Hugo starter

The hero shortcode allows rich, structured sections to be composed directly within content while still using shared layout and styling rules.


Feature Cards

Fast

Lightning fast build times with Hugo and Tailwind.

Cards are useful for highlighting key attributes without introducing custom markup or layout divergence.


Call to Action

Ready to Build?

Join thousands of developers building with HTS.

CTA shortcodes ensure consistent visual hierarchy and interaction patterns across posts and pages.


Alerts

Pro Tip
Use shortcodes to create consistent, reusable components.
Remember to add images to assets/images/ for processing.

Alert variants are predefined and styled centrally, avoiding ad-hoc formatting in content.


Figure with Caption

Demo
This is a demo image with automatic optimization

The figure shortcode supports captions and optimized image handling while keeping authoring simple.


YouTube Video

Embedded media is lazy-loaded and styled consistently without requiring manual iframe markup.


Custom Button

Contact Us

Buttons can be inserted directly into content while remaining aligned with the global design system.


Conclusion

This post demonstrates how HTS shortcodes enable rich content composition without breaking structural guarantees.

Authors can focus on meaning and structure, while layout, styling, and performance remain centrally controlled.

e8e.dev

e8e.dev

executable development