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

{T{{h{<i<sa/diamsdomnaointii*toninootntey*>p*}e}=w"intohtem"artkidtolwen="sHuepapdosrtU.p">}}

Tip

{P{{r{<o<at/diampdo:mnoiuntsiietoin`ohntuyg>po}e}=s"etrivpe">-}d}isableFastRender`duringdevelopment.

Warning

{T{{h{<i<sa/dAamPdoImnoiwntiiiltolinobntey>pr}ee}=m"owvaerdniinng"thteitnleex=t"DmeapjroercavteirosnioNno.tice">}}

Danger

{{{*{<D<oa/dnamodotmn*oi*ntiirtouinnonttyh>pi}es}="idnanpgreord"uc>t}i}onwithoutabackup.

Buttons

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

VariantCode
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.

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

Video

HTML5 <video> with optional poster and caption.

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

Tabs

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

{{`<`{{`.`{{`d`{{{{`b`{{`b`{{`o`{{<<`u`<<`t`<<`c`<<tnuttt/t/tm//aaota{taettbbnababnaasbpbtbbncnan.s>al>ad>aq>}ma}md}mu}>}es}ei}ee}}=s=n=r}"="g"yH"C:JSTbSaeMtS0vlLn".ae""5Sc>>rct>C}ero}l}mir}ip(c1t'kr".ebmm>te;}n<}'/b)bo.uratddtedorEn-v>reandtiLuiss:te8npexr;('}click',=>alert('Hi'));
<buttonclass="btn">Clickme</button>

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

{!!!!!{{[[[[[{<PPPPP<hhhhhgooooo/atttttgloooooalle12345lr]]]]]ey(((((rhhhhhy>ttttt}ttttt>}ppppp}sssss}::::://pppppiiiiicccccsssssuuuuummmmm.....ppppphhhhhoooootttttooooosssss/////444440000000000/////333330000000000?????12345)))))
Photo 1 Photo 2 Photo 3 Photo 4 Photo 5

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

{!!!{{[[[{<SSS<lllciii/adddcreeeaoru123os]]]ue(((slhhhetttl>ttt}ppp>}sss}:::}//pppiiicccsssuuummm...ppphhhoootttooosss///888000000///444000000???123000)))
Edit this page on GitHub