This blog includes several interactive components that work entirely with HTML and CSS—no JavaScript required. Here’s how to use them in your posts.

Accordion

Accordions are perfect for FAQs or collapsible content sections. They use the native <details> element for accessibility.

{{< accordion title="What is anaesthesia?" >}}
Content goes here...
{{< /accordion >}}
What is anaesthesia?
Anaesthesia is the practice of making patients unconscious so surgeons can do their thing without anyone screaming. It involves a careful balance of drugs, vigilance, and pretending to understand what the surgeon is doing.
Open by default?
Add open="true" to have the accordion expanded initially. Useful for content you want readers to see immediately but still be able to collapse.

Callout Boxes

Callouts draw attention to important information. Five types available:

{{< callout type="warning" title="Warning" >}}
Your warning message here.
{{< /callout >}}

Dialog / Modal

Dialogs are pop-up windows triggered by clicking a button. Useful for additional context without cluttering the main content.

{{< dialog id="my-dialog" title="Dialog Title" trigger="Button text" >}}
Dialog content with **markdown** support.
{{< /dialog >}}

Toggle / Reveal

Toggles show or hide content with a button click. The button text changes to indicate the action.

The answer is 42. Though in anaesthesia, the answer is usually “it depends” followed by a lengthy discussion of patient factors, surgical factors, and what mood the surgeon is in.
{{< toggle label="Show answer" labelHide="Hide answer" >}}
Hidden content here.
{{< /toggle >}}

Tabs

Tabs organise content into switchable panels. Useful for comparing options.

General Anaesthesia

Patient is completely unconscious. You’re in complete control of their airway, breathing, and consciousness.

Pros: No awkward conversation. Cons: All the responsibility.

Regional Anaesthesia

Patient is awake but the surgical area is completely numb. Spinals, epidurals, nerve blocks.

Pros: Patient breathes for themselves. Cons: They may want to chat.

Sedation

Patient is drowsy but rousable. Often combined with regional anaesthesia.

Pros: Light touch. Cons: “Can I have a bit more?” on repeat.

{{< tabs id="my-tabs" labels="Tab 1|Tab 2|Tab 3" >}}
{{< tab >}}First panel content{{< /tab >}}
{{< tab >}}Second panel content{{< /tab >}}
{{< tab >}}Third panel content{{< /tab >}}
{{< /tabs >}}

Image carousel with navigation dots and arrows. CSS-only using radio buttons.

{{< carousel 
  images="/images/img1.jpg|/images/img2.jpg|/images/img3.jpg" 
  captions="Caption 1|Caption 2|Caption 3" 
>}}

Parameters:

  • images — Image paths separated by |
  • captions — Optional captions separated by |
  • id — Unique identifier (auto-generated if not provided)

Responsive image grid with configurable columns.

Equipment check
Equipment check
Monitoring
Monitoring
Ready to go
Ready to go
{{< gallery 
  images="/images/a.jpg|/images/b.jpg|/images/c.jpg" 
  captions="Caption A|Caption B|Caption C"
  cols="3" 
>}}

Parameters:

  • images — Image paths separated by |
  • captions — Optional captions separated by |
  • cols — Number of columns: 2, 3, or 4 (default: 3)

Spoiler

Inline spoilers hide text until clicked. Perfect for revealing answers.

The diagnosis was coffee deficiency .

The patient’s BP dropped because the surgeon finally stopped talking .

The answer is {{< spoiler label="[reveal]" >}}hidden text{{< /spoiler >}}.

Figure

Enhanced images with captions, attribution, and positioning.

Operating theatre
A typical theatre, minus the chaos
{{< figure 
  src="/images/photo.jpg" 
  alt="Description"
  caption="Image caption"
  attr="Photo credit"
  attrlink="https://example.com"
  class="float-right"
>}}

Positioning classes:

  • class="float-left" — Float image left with text wrap
  • class="float-right" — Float image right with text wrap
  • class="full-width" — Extend beyond content width

Keyboard Keys

Display keyboard shortcuts with styled <kbd> elements.

Press Ctrl + C to copy, or ⌘ + V on Mac.

Press {{< kbd >}}Ctrl{{< /kbd >}} + {{< kbd >}}S{{< /kbd >}} to save.

Highlight / Mark

Draw attention to important text inline.

This is {{< mark >}}highlighted text{{< /mark >}}.

Abbreviation

Add IV with hover definitions for ASA scores and other TMA .

The {{< abbr title="Full phrase" >}}ABBR{{< /abbr >}} is explained on hover.

Tips for Usage

  1. Keep content concise — Interactive elements work best with focused content
  2. Use appropriate types — Match callout types to the message severity
  3. Test in both themes — Check that colours work in light and dark mode
  4. Don’t overuse — A page full of accordions is just a page of extra clicks

These components are built with CSS only:

  • No JavaScript to load or break
  • Works with JavaScript disabled
  • Accessible via keyboard navigation
  • Supports prefers-reduced-motion

Happy writing. Try not to let the surgeons take all the credit.