Jekyll Web Awesome Plugin Examples

A side-by-side tour of every Web Awesome component the jekyll-webawesome plugin supports. Each example shows the markawesome markdown next to the live component it renders. Pick a category to explore.

Callouts & status Callouts draw attention to important information; badges and tags label and count.

<wa-callout>
<wa-badge>
<wa-tag>

Buttons & actions Buttons trigger actions or link out; copy buttons put text on the clipboard in one click.

<wa-button>
<wa-copy-button>

Cards Cards are flexible containers.

<wa-card>

Disclosure Progressively reveal content: expandable details, grouped accordions, tabs, and trees.

<wa-details>
<wa-accordion>
<wa-tab-group>
<wa-tree>

Overlays Floating UI attached to a trigger: modal dialogs, popovers, and inline tooltips.

<wa-dialog>
<wa-popover>
<wa-tooltip>

Icons & dates Standalone icons plus build-time-baked dates.

<wa-icon>
<wa-format-date>
<wa-relative-time>

Media Carousels, before/after comparisons, video, and randomly-rotating content.

<wa-carousel>
<wa-comparison>
<wa-video>
<wa-random-content>

Layouts Zero-media-query layout primitives that map to Web Awesome CSS utilities: grid, stack, cluster, split, flank, and frame.

.wa-grid
.wa-stack
.wa-cluster
.wa-split
.wa-flank
.wa-frame