Component Showcase
87 components and 662 documented visual
variants and states, rendered with ymmd-light.
No components match this filter.
<wa-accordion>
Accordion
Expanded Initially
Disabled
Heading Level
<h2>. Heading Level
Size
Appearance
Mode
Mode
Icon Placement
Custom Icon
HTML in the Label
Expand & Collapse All
Nested Accordions
Preventing Expand or Collapse
wa-collapse event is being intercepted and prevented.
<wa-accordion-item>
Accordion Item
Default
<wa-animated-image>
Animated Image
Default
Image Formats
Width & Height
Customizing the Control Box
<wa-animation>
Animation
Default
Animations & Easings
Using Intersection Observer
Custom Keyframe Formats
Playing Animations on Demand
<wa-avatar>
Avatar
Default
Image
Initials
Custom Icon
Shape
Avatar Groups
<wa-badge>
Badge
Default
Default
Variant
Appearance
Size
Pill
Drawing Attention
Drawing Attention
Start & End Decorations
With Buttons
Yoummday Variants
Indicator
<wa-breadcrumb>
Breadcrumb
Default
Links
Start & End Decorations
Separator
Colors
Dropdowns
<wa-breadcrumb-item>
Breadcrumb Item
Default
<wa-button>
Button
Default
Default
Variant
Appearance
Size
Pill
Link Button
Icon Button
Start & End Decorations
Caret
Loading
Disabled
Custom Width
Customizing
Yoummday Extensions
<wa-button-group>
Button Group
Default
Orientation
Pill
Dropdowns
Split Buttons
Tooltips
Toolbars
Native Buttons
<wa-button-row>
Button Row
Default
Primary action
Single action
<wa-callout>
Callout
Default
Variant
Try it from Settings whenever you're ready.
You can safely close this tab now.
Changes take effect on your next login.
Save your work to avoid losing it.
Deleting a project removes it for everyone on the team.
Appearance
Size
Without an Icon
Customizing
<wa-card>
Card
Default
This kitten is as cute as he is playful. Bring him home today!
6 weeks old
Default
Basic Card
Header
Header Title
This card has a header. You can put all sorts of things in it!Footer
Media
Appearance
Orientation
Yoummday Extensions
<wa-carousel>
Carousel
Default
Pagination
Navigation
Loop
Autoplay
Orientation
Aspect Ratio
Multiple Slides per View
Scroll Hint
Mouse Dragging
Adding & Removing Slides
Thumbnail Gallery
<wa-carousel-item>
Carousel Item
Default
<wa-checkbox>
Checkbox
Default
Default
Initial Value
Hint
Indeterminate
Disabled
Size
Custom Validity
<wa-checkbox-group>
Checkbox Group
Default
Label
Hint
Orientation
Size
Disabled
Switches
Required
Aggregate Value And Form Submission
<wa-color-picker>
Color Picker
Default
Label
Hint
Initial Value
Format
Opacity
Uppercase Values
Swatches
Swatches
Placement
Size
Disabled
Applying the Selected Color
Pick a color to theme this card in real time.
<wa-comparison>
Comparison
Default
Initial Position
<wa-content-header>
Content Header
Default
Back navigation
Context controls
Additional actions
<wa-copy-button>
Copy Button
Default
Copying from Other Elements
Custom Labels
Custom Icons
Custom Trigger
Disabled
Handling Errors
Feedback Duration
Tooltip Mode
Tooltip Placement
Customizing
Success Feedback
<wa-datepicker>
Datepicker
Default
Date range
Week selection
Date and time
German locale
Clearable
<wa-details>
Details
Default
Expanded Initially
Disabled
Expand & Collapse Icons
Icon Placement
HTML in Summary
Right-to-Left Languages
Appearance
Grouping Details
<wa-dialog>
Dialog
Default
Without a Header
Footer
Opening & Closing Declaratively
Opening & Closing Declaratively
Width
Scrolling
Scroll down and give it a try! 👇
Header Actions
Light Dismissal
Preventing the Dialog from Closing
Initial Focus
Yoummday Variants
Header Icons
<wa-divider>
Divider
Default
Width
Color
Spacing
Orientation
Dropdown Dividers
<wa-drawer>
Drawer
Default
Without a Header
Footer
Opening & Closing Declaratively
Opening & Closing Declaratively
Placement
Placement
Size
Scrolling
Scroll down and give it a try! 👇
Header Actions
Light Dismissal
Preventing the Drawer from Closing
Initial Focus
<wa-dropdown>
Dropdown
Default
Showing Icons
Showing Labels & Dividers
Type
Showing Details
Checkable Items
Link Items
Destructive Items
Danger zone
Submenus
Disabled
Placement
Distance
Offset
Reacting to Selections
<wa-dropdown-item>
Dropdown Item
Default
Yoummday Extensions
<wa-empty-state>
Empty State
Default
With an image
Alignment
Custom graphic size
<wa-file-upload>
File Upload
Default
or click to browse
Basic usage
Drag a file here or click to choose one.
Restrict accepted file types
PNG, JPG, and WebP are supported.
Hide the preview row
Choose a new image to continue.
<wa-format-bytes>
Format Bytes
Default
Bytes
Bits
Localization
<wa-format-date>
Format Date
Default
Date & Time Format
Hour Format
Localization
French:
Russian:
<wa-format-number>
Format Number
Default
Percentage
Localization
German:
Russian:
Currency
<wa-icon>
Icon
Default
Size
Color
Canvas
Rotating & Flipping
Beat
Fade
Beat-Fade
Bounce
Flip
Flip 360
Shake
Spin
Spin Snap
Buzz
Float
Jello
Swing
Wag
Duotone
Swap Duotone Opacity
Custom Icons
Bootstrap Icons
Boxicons
Lucide
Heroicons
Iconoir
Ionicons
Jam Icons
Material Icons
Remix Icon
Tabler Icons
Unicons
Labeling Icons
Yoummday Extensions
<wa-include>
Include
Default
Including Part of a File
Including a Template
<wa-info-card>
Info Card
Default
Add a tooltip
<wa-input>
Input
Default
Default
Label
Hint
Placeholder
Clearable
Toggle Password
Appearance
Disabled
Readonly
Size
Pill
Input Types
Start & End Decorations
Customizing Label Position
<wa-intersection-observer>
Intersection Observer
Default
Intersect Class
<wa-known-date>
Known Date
Default
Form Submission
Initial Value
Hint
Locale-Aware Field Order
Min & Max
Required
Disabled
Readonly
Autocomplete
Size
Appearance
Pill
<wa-markdown>
Markdown
Default
Whitespace Normalization
Formatting Features
Configuring Marked
Writing a Custom Marked Plugin
Updating Content Dynamically
<wa-mutation-observer>
Mutation Observer
Default
The observer saw the variant change to brand.
Child List
Add buttons, then click a numbered one to remove it. The observer saw no changes yet.
<wa-number-input>
Number Input
Default
Default
Label
Hint
Placeholder
Appearance
Disabled
Readonly
Size
Pill
Min, Max & Step
Hiding the Steppers
Custom Stepper Icons
Start & End Decorations
Customizing Label Position
Validation
<wa-option>
Option
Default
Yoummday Extensions
<wa-otp-input>
OTP Input
Default
Label
Hint
Length
Type
Format
Case
Mask
Mask
Mask
Appearance
Size
Disabled
Readonly
Initial Value
Pasting
Autosubmit
Validation
Custom Validity
Customizing
Customizing
<wa-page>
Page
Default
<wa-page-header>
Page Header
Default
Custom branding
Header controls
Logo label and sizing
<wa-pagination>
Pagination
Default
Appearance
Size
Number of Buttons
First and Last Buttons
Previous and Next Buttons
Summary
Compact
Compact
Custom Icons
Disabled
Page Size Selector
Responding to Page Changes
Setting the Page Programmatically
Preventing a Page Change
Rendering Links Instead of Buttons
Rendering Links Instead of Buttons
Customizing
<wa-popover>
Popover
Default
This popover contains interactive content that users can engage with directly.
Anchor
Opening & Closing
The button below has data-popover="close" so clicking it will close the popover.
Placement
Distance
Arrow Size
Max Width
Initial Focus
<wa-popup>
Popup
Default
Activating
External Anchors
Placement
Distance
Skidding
Arrows
Border
Sync
Flip
Flip Fallbacks
Shift
Auto-Size
Hover Bridge
Virtual Elements
<wa-profile-image>
Profile Image
Default
Handle the saved image
Labels
Sizes
Accepted image types
<wa-progress>
Progress
Default
Visible values
Sizes
Custom track height
<wa-progress-bar>
Progress Bar
Default
Label
Indeterminate
Customizing
Showing Values
Yoummday Extensions
<wa-progress-ring>
Progress Ring
Default
Label
Size
Track & Indicator Width
Colors
Showing Values
<wa-progress-ring-group>
Progress Ring Group
Default
Basic usage
Adjust the size and gap
Color the labels from each ring
Switch to stacked mode
<wa-qr-code>
QR Code
Default
Size
Colors
Corner Color
Radius
Error Correction
Image
Image Coverage
Generating from a Value
<wa-radio>
Radio
Default
<wa-radio-group>
Radio Group
Default
Initial Value
Hint
Radio Buttons
Disabled
Disabled
Orientation
Size
Size
Validation
Custom Validity
<wa-random-content>
Random Content
Default
Want a hand with the formatting?
I can recommend a few components.
Have you tried turning it off and on again?
Bold move. I respect it.
Providing Content
Plain text works fine.
Number of Items
Changing the Mode
Animating New Content
Good morning!
Welcome back.
What are you building today?
Autoplay
- Did you know?
Octopuses have three hearts. Honey never spoils. A group of flamingos is called a flamboyance. Bananas are botanically berries. Cheetahs meow rather than roar.
Styling the Container
Styling the Container
Have a
<wa-rating>
Rating
Default
Label
Disabled
Readonly
Size
Size
Max Value
Precision
Custom Icons
Value-Based Icons
Detecting Hover
Required
Custom Validity
Form Submission
Yoummday Extensions
<wa-relative-time>
Relative Time
Default
Sync
Format
Localization
Chinese:
German:
Greek:
Russian:
<wa-resize-observer>
Resize Observer
Default
<wa-scroller>
Scroller
Default
| Party Role | Combat Style | Group Size | Campaign Setting | Signature Traits |
|---|---|---|---|---|
| Warrior | Melee Tank | 1-2 | Forgotten Realms | Plate-armored swordmaster who taunts foes. |
| Rogue | Stealth Striker | 1 | Eberron | Shadowy lockpick with daggers and a secret gold stash. |
| Wizard | Spell Slinger | 1 | Greyhawk | Robe-clad mage hurling fireballs from a messy spellbook. |
| Cleric | Divine Support | 1 | Ravnica | Holy healer with a glowing amulet and sneaky ale habit. |
| Bard | Charisma King | 1 | Dragonlance | Lute-playing charmer with magical songs and bad puns. |
Adding Content
Superhero Team Roles Guide
Team Leaders
Charismatic captains like Captain America or Cyclops are the heart of any superteam, rallying everyone with epic speeches and killer strategies. They’re the ones calling the shots in a cosmic showdown, keeping the squad focused when Thanos or Magneto crashes the party.
Heavy Hitters
Powerhouses like Thor or Hulk bring the boom, smashing through villain lairs or alien armadas. Their job is to land the big punches, but they gotta pace themselves to avoid stealing the spotlight from sneakier teammates.
Tech Geniuses
Brainiacs like Iron Man or Mr. Fantastic keep the team one step ahead with gadgets and gizmos. They’re crafting quinjets or hacking evil AI, always ready with a snarky quip while saving the day from a computer terminal.
Stealth Specialists
Ninja-like heroes like Black Widow or Nightcrawler slip through the shadows, gathering intel or pulling off surprise attacks. They’re the glue that makes risky plans work, coordinating with the team to flip a losing fight into a win.
Orientation
Superhero movies are the ultimate popcorn-fueled thrill rides, turning comic book pages into cinematic rollercoasters. Back in the early 2000s, films like X-Men and Spider-Man kicked open the door, proving tights and teamwork could pack theaters. Those early flicks leaned on practical effects and heart—like Tobey Maguire’s earnest web-slinger saving a train—making us believe a guy in spandex could be a hero. They weren’t perfect, but they set the stage for the genre to become a cultural juggernaut.
By the 2010s, the Marvel Cinematic Universe turned superhero films into a shared saga, like a comic crossover event on steroids. The Avengers in 2012 was a game-changer, tossing Iron Man’s snark, Thor’s hammer, and Cap’s shield into one epic brawl. Directors learned to balance humor, heart, and explosions, while studios figured out how to make every movie feel like a chapter in a bigger story. Even standalone hits like Wonder Woman brought fresh vibes, with Gal Gadot’s lasso-wielding warrior stealing hearts and smashing box office records.
Today, superhero flicks are a global obsession, from Deadpool’s chimichanga-fueled chaos to Black Panther’s Wakandan pride. They’re not just about powers—they’re about characters we root for, like Rocket Raccoon’s scrappy loyalty or Harley Quinn’s wild energy. Fans dissect trailers like detectives, theorizing about multiverses and cameos, while memes of sad Affleck or dancing Groot flood the internet. Whether it’s a gritty Joker origin or a cosmic Guardians adventure, these movies keep us glued to our seats, dreaming of heroism and one-liners that’d make even Tony Stark jealous.
Without a Shadow
Gaming consoles are like time machines for nerds, zapping us from pixelated 2D adventures to jaw-dropping cinematic worlds. Back in the ‘90s, the Super Nintendo was the cool kid on the block, using a 16-bit chip to pull off tricks like Mode 7, which made Mario Kart’s tracks feel like they were zooming right at you. It was like wizardry for a kid with a chunky controller, turning flat sprites into pseudo-3D races that had us yelling at our TVs when we got hit by a red shell.
Fast-forward to today, and consoles like the PlayStation 5 and Xbox Series X are basically supercomputers in sleek boxes. They’re packing enough power to make games look like Hollywood blockbusters, with lighting so real you can practically feel the sun glare in Spider-Man: Miles Morales. These machines can handle massive open worlds, like the sprawling lands of Elden Ring, without breaking a sweat, letting you swing swords or race cars while your living room feels like a sci-fi movie set. It’s a far cry from the SNES days, but the vibe’s the same: pure, controller-gripping fun.
What makes consoles the heart of gaming culture is how they bring everyone together, from casual players to hardcore speedrunners. Whether it’s your uncle fumbling through Super Mario World in ‘92 or your best friend screaming during a late-night Call of Duty match, consoles are the ultimate couch co-op machines. Modern systems even let you stream your clutch Fortnite wins to the world or jump into crossplay with PC pals. From the GameCube’s quirky handle to the Switch’s grab-and-go joy-cons, every console’s got its own personality, making every era of gaming feel like a legendary chapter in a never-ending quest.
Without a Scrollbar
Dungeons & Dragons 5e is the blockbuster superhero flick of tabletop RPGs, turning every session into an epic tavern brawl or dragon-slaying saga. Unlike the old 3.5e days, where you’d stack +30 bonuses like a mathlete on a mission, 5e keeps things chill with skill checks capping around +11—like a +5 from your slick Charisma and +6 from being a pro at persuasion. This means even a squad of scrappy kobolds can give your level 10 barbarian a bad day if you roll poorly. It’s like the game’s saying, “Sure, you’re a hero, but don’t get cocky!”
The advantage and disadvantage system is 5e’s secret sauce, making every dice roll feel like a movie cliffhanger. Instead of juggling a dozen modifiers, you just roll two d20s and take the better (or worse) one, which shakes out to about a +5 or -5 vibe shift. It’s like your rogue’s got a lucky charm when sneaking past guards or a cursed boot when dodging a fireball. This keeps the game’s flow snappy, so you’re not stuck crunching numbers when you could be roleplaying a dramatic speech to charm a dragon or bluffing your way out of a bandit ambush.
5e’s world is built for storytelling, not just stat sheets, and that’s why it’s the king of game nights. The rules are flexible enough for your DM to whip up a haunted forest crawl or a pirate ship heist without needing a PhD in game design. Classes like the warlock let you make shady pacts with cosmic entities, while feats like Tavern Brawler turn your monk into a bar-fighting legend who can knock out goblins with a chair. Whether you’re a newbie rolling your first d20 or a veteran plotting a castle siege, 5e’s vibe is all about epic moments—like when your party’s wizard crits on a fireball and you all cheer like you just won the Super Bowl.
<wa-select>
Select
Default
Default
Label
Hint
Placeholder
Initial Value
Initial Value
Appearance
Pill
Size
Disabled
Clearable
Multiple
Grouping Options
Placement
Start & End Decorations
Custom Tags
Lazy Loading Options
Searchable options
Select all and selection limits
<wa-skeleton>
Skeleton
Default
Effect
Paragraphs
Avatars
Shapes
Colors
<wa-slider>
Slider
Default
Default
Label
Hint
Min, Max & Step
Showing a Tooltip
Showing Markers
Adding References
Range Selection
Vertical Sliders
Vertical Sliders
Size
Indicator Offset
Disabled
Readonly
Formatting the Value
Reacting to Input
The quick brown fox jumps over the lazy dog.
Filtering with a Range
- Sticker pack — $15
- T-shirt — $30
- Hoodie — $55
- Backpack — $80
- Jacket — $120
Yoummday Extensions
<wa-spinner>
Spinner
Default
Size
Track Width
Colors
Speed
<wa-split-panel>
Split Panel
Default
Initial Position
Initial Position
Orientation
Snapping
Disabled
Primary Panel
Min & Max
Nested Split Panels
Customizing the Divider
Customizing the Divider
<wa-switch>
Switch
Default
Label
Hint
Initial Value
Disabled
Size
Custom Properties
<wa-tab>
Tab
Yoummday Extensions
<wa-tab-group>
Tab Group
Default
Active Tab
Placement
Placement
Closable Tabs
Scrolling Tabs
Manual Activation
Yoummday Extensions
<wa-tab-panel>
Tab Panel
Default
<wa-table>
Table
Default
Sorting
Loading
Sticky content
Expandable rows
Row states
<wa-table-cell>
Table Cell
Default
<wa-table-row>
Table Row
Default
<wa-table-row-exp>
Expandable Table Row
Default
<wa-tag>
Tag
Default
Default
Variant
Appearance
Size
Pill
Removable
Text Variant
Account status:
<wa-textarea>
Textarea
Default
Label
Hint
Placeholder
Appearance
Disabled
Readonly
Size
Rows
Resize
Resize
Character Count
Initial Value
<wa-time-input>
Time Input
Default
Default
Form Submission
Initial Value
Label
Hint
Start & End Decorations
Clearable
Min & Max
Step
12-Hour vs 24-Hour
Localized
"Now" Button
Size
Appearance
Pill
Disabled
Readonly
<wa-time-tracker>
Time Tracker
Default
Countdown
Auto start
Control with JavaScript
Custom control
<wa-toast>
Toast
Default
Variant
Size
Icons
Icons
Duration
Placement
Hover & Focus Behavior
Using HTML Content
Responding to Custom Buttons
Responding to Events
Creating Toast Items Manually
<wa-toast-item>
Toast Item
Default
Variant
Size
Icons
Icons
Providing Content
The Close Button
Customizing the Accent
Customizing the Padding
<wa-tooltip>
Tooltip
Default
Placement
Triggers
HTML in Tooltips
Customizing
Customizing
Showing & Hiding Manually
<wa-tree>
Tree
Default
Selection
Size
Indent Guides
Expand & Collapse Icons
Item Icons
Lazy Loading
Yoummday Extensions
<wa-tree-item>
Tree Item
Yoummday Extensions
<wa-user>
User
Default
Secondary details
Custom details
Copy user ID
Avatar decorations
Avatar only
Avatar images and shapes
Overflow and alignment
<wa-zoomable-frame>