Wavecast Radio

Wavecast ships a set of utility shortcodes for building rich content pages without custom HTML. All are dark-mode aware, responsive, and accessible.

Admonitions / Callouts

Four variants: note, tip, warning, danger. Accepts an optional title.

Note

{{< admonition type="note" title="Heads Up" >}}
This is a **note** with markdown support.
{{< /admonition >}}

Tip

{{< admonition type="tip" >}}
Pro tip: use `hugo serve --disableFastRender` during development.
{{< /admonition >}}

Warning

{{< admonition type="warning" title="Deprecation Notice" >}}
This API will be removed in the next major version.
{{< /admonition >}}

Danger

{{< admonition type="danger" >}}
**Do not** run this in production without a backup.
{{< /admonition >}}

Buttons

Three variants: primary, secondary, outline. External URLs open in a new tab.

Variant	Code
Primary	`{{< button url="/" variant="primary" >}}Home{{< /button >}}`
Secondary	`{{< button url="/" variant="secondary" >}}Docs{{< /button >}}`
Outline	`{{< button url="/" variant="outline" >}}Learn More{{< /button >}}`
With icon	`{{< button url="https://github.com/adurrr/wavecast" icon="→" >}}View on GitHub{{< /button >}}`

Home Docs Learn More View on GitHub

Figure

Enhanced HTML5 <figure> with optional caption, lazy loading, and resource support.

{{< figure src="https://picsum.photos/800/400" caption="A random image from Lorem Picsum." alt="Random photo" >}}

Random photo — A random image from Lorem Picsum.

Video

HTML5 <video> with optional poster and caption.

{{< video src="https://www.w3schools.com/html/mov_bbb.mp4" poster="https://picsum.photos/800/450" caption="Big Buck Bunny sample video." >}}

Big Buck Bunny sample video.

Tabs

CSS-only tabs (radio buttons). Useful for code examples in multiple languages, or any tabbed content.

HTMLCSSJavaScript

<button class="btn">Click me</button>

.btn { padding: 0.5rem 1rem; border-radius: 8px; }

document.querySelector('.btn').addEventListener('click', () => alert('Hi'));

Gallery

CSS grid of thumbnails. Wrap Markdown images. Anchor-wrapped images are clickable.

{{< gallery >}}
![Photo 1](https://picsum.photos/400/300?1)
![Photo 2](https://picsum.photos/400/300?2)
![Photo 3](https://picsum.photos/400/300?3)
![Photo 4](https://picsum.photos/400/300?4)
![Photo 5](https://picsum.photos/400/300?5)
{{< /gallery >}}

Carousel

CSS scroll-snap carousel with prev/next buttons. Each image becomes a slide.

{{< carousel >}}
![Slide 1](https://picsum.photos/800/400?10)
![Slide 2](https://picsum.photos/800/400?20)
![Slide 3](https://picsum.photos/800/400?30)
{{< /carousel >}}