Examples from ARIA pattern library, CSS layout cookbook, Open UI

[eliot-akira]

ARIA Practices: Patterns

• Docs: https://www.w3.org/WAI/ARIA/apg/patterns/
• Code: https://github.com/w3c/aria-practices/tree/main/content/patterns

List of patterns

• Accordion
• Alert
• Alertdialog
• Breadcrumb
• Button
• Carousel
• Checkbox
• Combobox
• Dialog modal
• Disclosure
• Feed
• Grid
• Landmarks
• Link
• Listbox
• Menubar
• Menu button
• Meter
• Radio
• Slider
• Slider multithumb
• Spin button
• Switch
• Table
• Tabs
• Toolbar
• Tooltip
• Tree grid
• Tree view
• Window splitter

CSS layout cookbook

The CSS layout cookbook aims to bring together recipes for common layout patterns

• Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook
• Code: https://github.com/mdn/content/tree/main/files/en-us/web/css/layout_cookbook

List of patterns

• Breadcrumb
• Card
• Center an element
• Column layouts
• Grid wrapper
• List group with badges
• Media objects
• Pagination
• Split navigation
• Sticky footers

OpenUI

Research on common components among 25 design systems.

• Docs: https://open-ui.org/components/accordion.research/ (Scroll down in left sidebar to see list of components)
• Code: https://github.com/openui/open-ui/tree/main/site/src/pages/components

List of patterns

• Accordion
• Alert
• Avatar
• Badge
• Breadcrumb
• Card
• Carousel
• Checkbox
• Combobox
• Datepicker
• Dialog
• Disclosure
• File
• Flex
• Icon
• Image
• Inputtext
• List
• Menu
• Popup
• Radio button
• Select
• Skeleton
• Slider
• Table
• Tabs
• Toast
• Tooltip