Everything
Tabs — single tab (buttons should hide)
When a tabs section has only one tab, the tab switcher is expected to be hidden and the panel renders on its own.
Tabs — 6 long titles (overflow / wrap)
Worldwide delivery with transparent pricing.
Two-year warranty covering manufacturing defects.
Clean with a soft dry cloth.
Check our help center first.
30 days, free returns.
Carbon-neutral factory certified by GreenStamp.
Tabs — empty tab + uneven panel heights
Tiny panel.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Tabs — uppercase + gap 0 (touching buttons)
Uppercase titles + zero horizontal tab gap make buttons touch.
Adjacent active/inactive tab outlines may collide.
Keyboard focus rings should still be distinct.
Tabs — accordion inside a tab
When you switch tabs the counter in this group may or may not reset depending on CSS counter scope.
Expanding while the tab is inactive is invisible — verify that the opened state persists after switching back.
Switch back to FAQ to check whether accordion state was preserved.
Tabs — fixed small height, tall content
One line.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Card slider tabs — single tab (buttons hide)
CST — long titles, left, wide gaps, empty tab
CST — uppercase + stroke pagination
Accordion — single item
A single accordion should still render cleanly — top border, numbering, and muted-title behaviors should not glitch with only one item.
Accordion — 8 items, numbered, long titles
You'll receive a tracking email within 24 hours.
All major cards, Shop Pay, Apple Pay, and PayPal.
Yes — add a note at checkout.
Sale items follow the same 30-day window.
Within one hour of placement via the order portal.
5–10 business days depending on destination.
Test the single-word title layout.
Sign up in your account — 1 point per dollar spent.
Accordion — multiple:false + two expand:true
Opening another item should close me if multiple is off.
Two items with expand:true while multiple:false — which wins on initial render?
Opening me should close any others.
Accordion — stripped affordances
Can you still tell this is interactive without any affordances?
Without chevron, without muted state, the only cue is content presence.
Focus outline should still appear via keyboard nav.
Accordion — empty + rich + wrapping
Accordions can contain mixed media. Does layout hold up with images?
- List item one
- List item two with bold inline
- List item three
Long titles should wrap and the icon should stay top-aligned or center-aligned consistently.
Accordion — tabs nested inside + numbering
Tabs inside an accordion — keyboard focus should travel accordion → tablist → tabpanel without skipping.
Switching tabs while the accordion is collapsing may produce layout flicker.
Verifies numbering continues past the item that contains the tabs block.