Component gallery

Buttons — variant × tone

Fill style and colour are independent axes.

solid-primary
solid-secondary
solid-destructive
solid-warning
solid-success
outline-primary
outline-secondary
outline-destructive
outline-warning
outline-success
ghost-primary
ghost-secondary
ghost-destructive
ghost-warning
ghost-success
link-primary
link-secondary
link-destructive
link-warning
link-success

Buttons — size and state

lg
default
sm
icon
disabled
anchor
Anchor
no-lift

Button groups

default
icons
disabled-member

Badges — variant × tone

Fill style and colour are independent axes.

solid-primary
Primary
solid-secondary
Secondary
solid-destructive
Destructive
solid-warning
Warning
solid-success
Success
outline-primary
Primary
outline-secondary
Secondary
outline-destructive
Destructive
outline-warning
Warning
outline-success
Success
ghost-primary
Primary
ghost-secondary
Secondary
ghost-destructive
Destructive
ghost-warning
Warning
ghost-success
Success

Badges — size

lg
Lg
default
Default
sm
Sm
icon-lg
Lg
icon-default
Default
icon-sm
Sm

Avatars

Initials stand in when there is no image.

lg
default
sm
initials-lg
initials-default
initials-sm
initials-single-word
initials-long-name

Toggles

default
checked
disabled
checked-disabled
with-text

Selects

default
selected
disabled

88x31s

alex
A small icon representing Alex's website
astrid yu
A small icon representing Astrid Yu's website
lily
A small icon representing Lily's website
sophari
A small icon representing Sophari's website
yassie
A small icon representing Yassie's website
lexi
A small icon representing Lexi's website
ari
A small icon representing Ari's website
nexy
A small icon representing Nexy's website
june
A small icon representing June's website
noohance
A small icon representing Noohance's website
austin huang
A small icon representing Austin Huang's website
virkunnen
A small icon representing Virkunnen's website
nelson
A small icon representing Nelson's website
abigail
A small icon representing Abigail's website
ginger
A small icon representing Ginger's website

Cards

primary

Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

secondary

Secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

destructive

Destructive

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

warning

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

success

Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

no-lift

No lift

Hover does nothing on this one.

Media cards

default
Greg Heffley

Diary of a Wimpy Kid

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

no-header

No header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

no-links
Greg Heffley

No links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

secondary

Secondary tone

Tone and lift pass straight through to Card.

Alerts

default

Alert title

An alert with no icon and no variant.

success

Success alert

The action completed successfully.

warning

Warning alert

Something might need your attention.

destructive

Destructive alert

This action could have serious consequences.

Quotes

default

It's not a diary, it's a journal.

Greg HeffleyAuthor of a diary, not a journal
no-avatar

A quote with no avatar.

Greg HeffleyMiddle schooler
name-only

A quote with just a name.

Greg Heffley
long

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Greg Heffley

Side hero

right

Image on the right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Greg Heffley
left

Image on the left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Greg Heffley

Navbar

default
Jesse
final-link
Jesse
Contact
external
Jesse
Elsewhere
no-links
Jesse
many-links
A rather long site title
Contact

Footer

default

This was a triumph I'm making a note here Huge success

A cool badge with a cool description.
© Testy McTestface 2026. Licensed underCC BY-SA 4.0.
  • A small icon representing Alex's website
  • A small icon representing Astrid Yu's website
  • A small icon representing Lily's website
  • A small icon representing Sophari's website
  • A small icon representing Yassie's website
  • A small icon representing Lexi's website
  • A small icon representing Ari's website
  • A small icon representing Nexy's website
  • A small icon representing June's website
  • A small icon representing Noohance's website
  • A small icon representing Austin Huang's website
  • A small icon representing Virkunnen's website
  • A small icon representing Nelson's website
  • A small icon representing Abigail's website
  • A small icon representing Ginger's website

Logos

default

Carousel

default

Side hero

A slide can hold any component.

Greg Heffley

Plain card

This is the second slide.

Another card

This is the third slide.

Last one

This is the fourth slide.

Terminal

default
whoami
jessew
uname -a
Linux web-ng 7.2.8-2-cachyos #1 SMP PREEMPT_DYNAMIC x86_64 GNU/Linux
ls ~/projects
web-ng versia dotfiles
cat motd.txt
Welcome! Type a command below. Try `help` for a list of commands.
guest@cpluspatch.com:~$
empty
guest@cpluspatch.com:~$
interactive
guest@cpluspatch.com:~$
interactive with history
whoami
jessew
guest@cpluspatch.com:~$