npm - pi-design-deck - Versions diffs - 0.2.0 → 0.3.0 - Mend

pi-design-deck 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/README.md +49 -11
package/deck-schema.ts +30 -0
package/deck-server.ts +64 -10
package/export-html.ts +329 -0
package/form/css/controls.css +51 -0
package/form/deck.html +2 -0
package/form/js/deck-core.js +46 -0
package/form/js/deck-interact.js +30 -12
package/form/js/deck-render.js +2 -0
package/form/js/deck-session.js +25 -9
package/generate-prompts.ts +8 -10
package/index.ts +317 -41
package/package.json +2 -1
package/prompts/deck-discover.md +3 -1
package/prompts/deck-plan.md +3 -1
package/prompts/deck.md +3 -1
package/skills/design-deck/SKILL.md +44 -8
package/skills/design-deck/references/component-gallery/INDEX.md +88 -0
package/skills/design-deck/references/component-gallery/LOOKUP.md +592 -0
package/skills/design-deck/references/component-gallery/components/INDEX.md +106 -0
package/skills/design-deck/references/component-gallery/components/actions.md +354 -0
package/skills/design-deck/references/component-gallery/components/data-display.md +812 -0
package/skills/design-deck/references/component-gallery/components/feedback.md +513 -0
package/skills/design-deck/references/component-gallery/components/inputs.md +921 -0
package/skills/design-deck/references/component-gallery/components/layout.md +167 -0
package/skills/design-deck/references/component-gallery/components/navigation.md +350 -0
package/skills/design-deck/references/component-gallery/components/overlays.md +208 -0
package/skills/design-deck/references/component-gallery/components/utilities.md +29 -0
package/skills/design-deck/references/component-gallery/components.md +1383 -0

package/skills/design-deck/references/component-gallery/components/data-display.md ADDED Viewed

@@ -0,0 +1,812 @@
+# Data Display
+Components for presenting content and information.
+---
+## Accordion
+**Also known as:** Arrow toggle · Collapse · Collapsible sections · Collapsible · Details · Disclosure · Expandable · Expander · ShowyHideyThing
+[Browse all 101 examples →](https://component.gallery/components/accordion/)
+### Design System Implementations
+- [A11Y Style Guide](https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-accordion) — A11Y Style Guide · jQuery — Code examples, Usage guidelines, Accessibility, Unmaintained, Open source · [preview](https://component.gallery/_astro/MuIlOsYg8taQaPml7qj3nYServvQvohmnCGFhS2V48Y_Z1xKU0J.webp)
+- [Collapse](https://ant.design/components/collapse) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/vprzFioWRu2IMlV0pCC7U7cmvjLjEEZUNGTVhyhsYyI_1z1vJm.webp)
+- [Disclosure](https://ariakit.org/components/disclosure) — Ariakit · React — Code examples, Open source, Accessibility · [preview](https://component.gallery/_astro/Wj5ivFAMrWQdmnj6XY-GU5gq86YToF6WMIlEA3I3TBw_1C8NNL.webp)
+- [Auro](https://auro.alaskaair.com/components/auro/accordion) — Auro · Web Components, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/wQie3Js_bTAVUQPga_DNaYiLkhDQshLXVfilcEfV47U_Z72UQo.webp)
+- [Backpack](https://www.skyscanner.design/latest/components/accordion/web-sEshz9Z5) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/Gn2YxYkPEmEb6Qvez32AdEQYqVAeDURBPGYjOR6M1jI_ZIQDEQ.webp)
+- [Base Web](https://baseweb.design/components/accordion/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/-s178uUdxtVsB980X-1-bFLSD1zvQxGL9KuV-F6ZGXo_Z1wei3t.webp)
+- [BBC Global Experience Language](https://www.bbc.co.uk/gel/guidelines/accordion) — BBC Global Experience Language — Accessibility, Usage guidelines, Unmaintained · [preview](https://component.gallery/_astro/B1Lxl8pZZ80BxneskyCXVDRfpJMKvc657GZaL3_7xOo_lWKkK.webp)
+- [Collapse](https://blueprintjs.com/docs/#core/components/collapse) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/tXzB_UxMliF65HuFM-JT8TEmsDKfKLRYMBuh9IBT0Zs_Z18hhCu.webp)
+- [Bolt Design System](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-accordion) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/S9Th2MTcNOHXMCQ7D27ehCfvWvyLIdqPKJWquo2dbS8_Z1t7Oyy.webp)
+- [Collapse](https://getbootstrap.com/docs/4.3/components/collapse/) — Bootstrap · Sass — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/7TPA6Vc4uMRrBS0FgbgA_PhHhL3_RNmOhzgKzY5qXwE_ZfIXTK.webp)
+- [Expandable helper](http://design.brighton-hove.gov.uk/website-pattern-library.php?p=expandable-helper#/) — Brighton &#38; Hove City Council Website pattern library — Unmaintained · [preview](https://component.gallery/_astro/EA8YTXVEOZJ6yTpXDhaio6fBINoWP-SrCrF-kHeVudE_Z2gmgF2.webp)
+- [Carbon Design System](https://carbondesignsystem.com/components/accordion/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/wT-SaS1HhJ7sxSETctzui3uIUbQoZf9OqbJPJLtSuz4_1mtXBI.webp)
+- [Cauldron](https://cauldron.dequelabs.com/components/Accordion) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/XWr4NTp9_iEsL7LTXQy8uY0CP8OXlaypwxyi49OsXEo_2gYFWr.webp)
+- [ExpandCollapsePanel](https://cauldron.dequelabs.com/components/ExpandCollapsePanel) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/tjsw_8ix18ubeXUHAPUMz3MKqk8_nBdzSIaVbkkPb5Q_1sQERT.webp)
+- [Cedar](https://cedar.rei.com/components/accordion) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/dh8O3mEWLz7ZlWLyfX_-TZRC7eAKNyNBRYl7CaIdgtg_ZJTWMO.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/accordion) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/VBZjuMfaiF5AQ6DnNNVxsYsjvPd7VI82gMOmwfDzgrQ_Z1quOif.webp)
+- [Collapsible](https://chakra-ui.com/docs/components/collapsible) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/bGgBoUWBQmTuLcZlTFXj1hrNIn4A-D9w4CAm4qqTl8Y_Z1teBsW.webp)
+- [Clarity Design System](https://clarity.design/documentation/accordion) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/8OnjVxiFxP8E65Yl_vrY35ltpN_8Zunn1WPTr_Oe9QE_12371E.webp)
+- [Stack View](https://clarity.design/documentation/stack-view) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/TrtNTESszB9nJtt_wsIhVXJNBWpqQWefz7jvt0iqviI_1dcRfV.webp)
+- [Coral](https://design.talend.com/?path=/docs/navigation-accordion--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/QrjMAoW_khh1tIzfa3FUX-2EQMPu8ZWmFf4HsxqQEdM_ZJwFUD.webp)
+- [Crayons](https://crayons.freshworks.com/components/core/accordion/) — Crayons · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/S-uXCXdSmtySwWzSF-f1i8oDudKSHS5NLqrACrbPYds_Z2eTTOC.webp)
+- [Decathlon Design System](https://www.decathlon.design/726f8c765/p/04348b-accordion/b/228a62) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/5A-vgyvtm9Xir56YUbKvRm0sGIxu8Fcj4tufAEohn98_ZU6d1J.webp)
+- [Dell Design System](https://www.delldesignsystem.com/components/accordion/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/v28yjKSvLrJjIdhJ5Hi2LkJphYcP6fju-HwrNWKHduE_TUejB.webp)
+- [View More/Less](https://vanilla.delldesignsystem.com/2.17.1/index.html?path=/docs/components-view-more-less--related) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/Ao4qR57X1PzN5JAF2TyS2ov5wSXNF7f_Xs3EIYWho0Q_XHgrq.webp)
+- [eBay MIND Patterns](https://ebay.gitbook.io/mindpatterns/disclosure/accordion) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/cKwoGCZqQTHzHHLwmW65OSoQRJhwxLiZ6Pa_heDETIA_Z2erRUb.webp)
+- [Details](https://ebay.gitbook.io/mindpatterns/disclosure/details) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/B8r3q_9OW2HPCagro1o42snxDseS-QvpQWhx15ZG-1s_QW5N.webp)
+- [Expansion](https://playbook.ebay.com/design-system/components/expansion) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/JDVv5tG3zX7jP1zcbWzZIrgw1Yq0WjsdVphvzn22wN4_Z1PbGg4.webp)
+- [Elastic UI framework](https://eui.elastic.co/docs/components/containers/accordion/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/lOSc2HKO7i-LUgDp3GqpIw8PV0bQyR1jiey4G_x-qyI_2heELz.webp)
+- [Elisa Design System](https://designsystem.elisa.fi/9b207b2c3/p/418ae1-accordion) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/7muEdx5qXeF8YhC3px350IVkIXJ4o7WK0P6XteQdM14_fSDpJ.webp)
+- [Flowbite](https://flowbite.com/docs/components/accordion/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/ClSZjC0tQCjmm3OgOvMf0Kh0ZELj8VMKTv-mxrBYdOo_yKCWI.webp)
+- [Forma 36](https://f36.contentful.com/components/accordion) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/SqAvXiZUV3KgdB001gtLCeAPFRsiHB-0794thqKb62s_Z16R6lq.webp)
+- [Collapse](https://vercel.com/geist/collapse) — Geist Design System · React — Code examples · [preview](https://component.gallery/_astro/usXDfPNv2HuPc6NlovKsscf2texpTCkCbYtgrxhCcmw_qqJG0.webp)
+- [generic-components](https://genericcomponents.netlify.app/generic-accordion/demo/index.html) — generic-components · Web Components — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/m5IEdZcb2TSWTQ7FL7tyMVLfdAfkTfvKtqdFMhL-F30_27Y7LQ.webp)
+- [Disclosure](https://genericcomponents.netlify.app/generic-disclosure/demo/index.html) — generic-components · Web Components — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/VpqSVXlCNaYbpjsKinLxvW4Hg507j7-7-KZ5_7EBfYw_1kDi14.webp)
+- [Gestalt](https://gestalt.pinterest.systems/web/accordion) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/Syu_21n1dRcyJdCMqgAP5GKZkzfQSVjJjHDzbN9-wa4_fmK1b.webp)
+- [giffgaff design system](https://www.giffgaff.design/components/for-web/accordion/) — giffgaff design system — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/bei8emVqGXXuAVJncVrhuLuLhvUNaZ56cLfcoTY3tkY_1VXrXI.webp)
+- [GOLD Design System](https://gold.designsystemau.org/components/accordion/) — GOLD Design System · React, Sass — Code examples, Usage guidelines, Accessibility, Open source, Unmaintained · [preview](https://component.gallery/_astro/nfxN5M1q_KJTS0DzCrY0nsUiABug2Ez8foBaTaBXFh4_1CFowd.webp)
+- [GOV.UK Design System](https://design-system.service.gov.uk/components/accordion/) — GOV.UK Design System · Nunjucks — Code examples, Usage guidelines, Research, Open source · [preview](https://component.gallery/_astro/S3txBJl4F7F0DzFZIFHV_qOlxR4omN5GgGJQd_mV9EY_ZLKRfn.webp)
+- [Details](https://design-system.service.gov.uk/components/details/) — GOV.UK Design System · Nunjucks — Code examples, Usage guidelines, Research, Open source · [preview](https://component.gallery/_astro/Nh4UzyEAOxkU2THeyE5r943OuI32af53yIHfBdxO5QU_2nk1eY.webp)
+- [Grommet](https://v2.grommet.io/accordion) — Grommet · React — Code examples, Open source · [preview](https://component.gallery/_astro/Rk28iPND7vIc6-_xntE4Fk8OVJtaQ6ZenX2NPlcYscE_Zu5H1I.webp)
+- [Disclosure](https://headlessui.com/react/disclosure) — Headless UI · React, Vue — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/Ud5XZ4cALCw1XRlIkZX9RnFOvOPKyqrQiokryjSHelw_1uwO8S.webp)
+- [Helsinki Design System](https://hds.hel.fi/components/accordion) — Helsinki Design System · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/2yDaESn-berWXMF0iozRvTHv8ker2n1UU4oSrH6uCZc_19vwky.webp)
+- [HeroUI](https://www.heroui.com/docs/components/accordion) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/feCk1H1JWY92kaNjCzArVEsJDXF363szmAQV6Tu-MVU_ZC3zz8.webp)
+- [Collapsible sections](https://inclusive-components.design/collapsible-sections/) — Inclusive Components — Code examples, Accessibility, Unmaintained · [preview](https://component.gallery/_astro/7ssMJte42GxFlYsiMO72kgNprqCmH_UmPJbS3dFtDz0_2kzuv8.webp)
+- [ToggleDetails](https://instructure.design/#ToggleDetails) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/8Bo6rhpc2X-59kAuxZVRXyJMtrT1LZl6ef_KOL_ghaI_Z2hQyMQ.webp)
+- [ToggleGroup](https://instructure.design/#ToggleGroup) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/mjr1PkV-hMAPS7YCkLdc4NtiQ0YNY0sj0RsTdd_S8BQ_2aYG7g.webp)
+- [Jøkul Designsystem](https://jokul.fremtind.no/komponenter/accordion) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/a_86xEtHaHtWfS3xs2yg-xJ2C_Gbgr4Z7C746-AWo9g_ZAOBHE.webp)
+- [ExpandButton](https://jokul.fremtind.no/komponenter/expandbutton) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/pV1m4WcILV0Rd32p7jzdQSLI8Idd2K3QEsuf-089g4k_1U3DWQ.webp)
+- [Lightning Design System](https://www.lightningdesignsystem.com/components/accordion/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/yiuSZECOC74uACHcIuh2YUoHs1C48UjJY-3DKonAnEA_1cM83K.webp)
+- [Expandable Section](https://www.lightningdesignsystem.com/components/expandable-section/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/mOyJnuAsSavQeUS2D8OipiNrUcm_7Oduij6NeP6nZEQ_Z1eFKoe.webp)
+- [Summary Detail](https://www.lightningdesignsystem.com/components/summary-detail/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/7E02AkJlF9s6iYmnLYvxqX7e1s8uicb2Wv9nL4U1lfY_Z2oFlLx.webp)
+- [Details](https://protocol.mozilla.org/components/detail/details.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/WzrWzMiOF4_qyvUPAs9O97pFL7JLwSNSQZIFFUYP3xU_Z1NB9gu.webp)
+- [Details component](https://protocol.mozilla.org/components/detail/details-component--default.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/6EG_vfrfyvX8XPxsUYwWMz59oc8HOyxvoMA3R4y4oew_Z18QECk.webp)
+- [Expandable](https://design.ns.nl/4a05a30ad/p/54d9a8-expandable) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/Ar39SjDFi-5JaBpFKWCW7-lZ49ew-aQOvMXD2FsHVmo_Z1QtykU.webp)
+- [NewsKit](https://www.newskit.co.uk/components/accordion/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/1SpUltU7cZnFnC8_ZPdhRk4bmY-LtR-9a-sIAz4OdfQ_oRCGf.webp)
+- [Expander](https://service-manual.nhs.uk/design-system/components/expander) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/Ehk7SnQCcL0J_fCNiAKWvnPx2bzYc_Fn8B0POpslyec_1v2w2e.webp)
+- [Details](https://service-manual.nhs.uk/design-system/components/details) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/sBU9vCzkjGrHS6pcE7ysiIdSGongV4CBAbJuIXrQUkU_Z21ywQA.webp)
+- [Nucleus Design System](https://britishgas.design/docs/components/ns-accordion) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/V4Z2zGwkJB-_BTzyIgEXPP8oMpHz3lC0IPOsQRppoHc_Z24fMVE.webp)
+- [Expander](https://britishgas.design/docs/components/ns-expander) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/t875o8YnaZV-ZMMZQTMJ1R8C_zBm79qkDuo_9_hgEog_ZAvIfL.webp)
+- [ONS Design System](https://ons-design-system.netlify.app/components/accordion/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/bKAWZQELYYfwsoc_hgVbi2r4KQ6PLkNghX-NYn4KVLU_Upj6u.webp)
+- [Details](https://ons-design-system.netlify.app/components/details/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/JfessM6DRK2W7AmAxCJpgOz4kZ5AD1B93FasPKhYtj8_ZWlHw3.webp)
+- [Ontario Design System](https://designsystem.ontario.ca/components/detail/accordions.html) — Ontario Design System · HTML, Sass — Code examples, Usage guidelines, Accessibility · [preview](https://component.gallery/_astro/iUcOdwFbV4TpO6Im7VcDNGtcm7adBE_m-FVFPT2yKGA_155bx2.webp)
+- [Orbit](https://orbit.kiwi/components/accordion/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/H0515p9zOfW2a32taeY4kFyypbmw3QBIcQfBF5nDQXg_Z2kq4Kx.webp)
+- [Collapse](https://orbit.kiwi/components/collapse/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/DvhwxA9Tu4zOgVDAFVC4DcU99s2fURjoH7Z0z06XGGc_ZOKdhG.webp)
+- [Pajamas](https://design.gitlab.com/components/accordion) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/IFcZJlo7-L91sPBAc_Pq-2yL0aaMIeYUXzHEcJToQLU_2cspXk.webp)
+- [Disclosure](https://paste.twilio.design/components/disclosure) — Paste · React, CSS-in-JS — Usage guidelines, Code examples, Tone of voice, Accessibility, Open source · [preview](https://component.gallery/_astro/h4KWcF1o_eWfXRPVsss7TUhmAlIVmGV4hoZrmTQ2Lgg_Z2qwKHF.webp)
+- [PatternFly](https://www.patternfly.org/components/accordion) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/gnl5rt-3PLHUOL7icnvnGEZDEPbdUU9VUEd1aF3EbaA_2Y5U2.webp)
+- [Expandable section](https://www.patternfly.org/components/expandable-section) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/9U1Gz8-j0jxQ2MF8tz-5H75QSwoNsp6J3jIx2GhIGyM_Zli5vf.webp)
+- [Porsche Design System](https://designsystem.porsche.com/v3/components/accordion/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/EOZJNkO1t2FX3qQ0yWVAmtlyhcmPDWWxnz_nRU52Vz8_2q0zPH.webp)
+- [Details](https://primer.style/design/components/details) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/WIAanJYvVmV0Hrp8j8ci5Ultn884FtVTFI9gqfDzQBQ_uC7PR.webp)
+- [Expansion Item](https://quasar.dev/vue-components/expansion-item) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/DDCzD7be5ObTv_qF0A-TlYyoFRYA-QhV91tgXlXinxk_Z1QMwTY.webp)
+- [Radix Primitives](https://radix-ui.com/primitives/docs/components/accordion) — Radix Primitives · React — Code examples, Open source · [preview](https://component.gallery/_astro/5GyIHcAMzTwp4p8tu6LGuARWfUG-h5WbwMS0u9za0fA_1xXrhL.webp)
+- [Collapsible](https://radix-ui.com/primitives/docs/components/collapsible) — Radix Primitives · React — Code examples, Open source · [preview](https://component.gallery/_astro/Wx2gGmM3nbuEijd5HD5se9QLbw4tLxunBJTep7hP2ss_QVPdi.webp)
+- [Reach UI](https://reach.tech/accordion) — Reach UI · React — Accessibility, Code examples, Open source · [preview](https://component.gallery/_astro/duDp1epsrLYlHTINy7pSgv_X3LJdyPTEqlWvgcJRMJA_Z1fW3BW.webp)
+- [Disclosure](https://reach.tech/disclosure) — Reach UI · React — Accessibility, Code examples, Open source · [preview](https://component.gallery/_astro/VdAUOIa4B3WUYtw3sONny_VXzYmYkJsbgU4fOXmqCnM_180okE.webp)
+- [Red Hat design system](https://ux.redhat.com/elements/accordion/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/_0Mdptf3TKR0V8RYlKxxGWeyrlNXO8qrBYzAHSG60Ow_n4x7E.webp)
+- [Disclosure](https://ux.redhat.com/elements/disclosure/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/m9aP8Akq8INnekmyGJzGiiTH8vkMF11SwGYPV1kU51U_1J4Giw.webp)
+- [Ruter Components](https://components.ruter.as/#/Components/Interactive/Accordion) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/Y9d8AuqHduvZPdN9t4gP116kvAPtsFB2PlSRPCNd6Z4_10dYiV.webp)
+- [Sainsbury's Design System](https://design-systems.sainsburys.co.uk/components/accordion/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/wsfcbdeCgMWNiReN_5zIqpwX42wBigBnJwKRSOJ-h8c_1gP2HY.webp)
+- [SEB Design Library](https://designlibrary.sebgroup.com/components/accordion/) — SEB Design Library · Sass, React, Angular — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/_56B3z0dE76KMcDRU_g13WYfSV19X2iubloum75q14A_1iANvK.webp)
+- [Section expander](https://designlibrary.sebgroup.com/components/section-expander/) — SEB Design Library · Sass, React, Angular — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/lm9zDU0dB-0XOC-lTJEeYuyyomT9vc5NhYEsNIOZplM_1q5bdr.webp)
+- [Collapsible](https://sproutsocial.com/seeds/components/collapsible) — Seeds · React — Code examples, Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/rrONqvPu0d4-Rjbvfuq2fWvLpvwThve3obxVEtWBQpM_Z1pvnIT.webp)
+- [Accordion Item](https://seek-oss.github.io/seek-style-guide/accordion) — Seek style guide · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/LfbzptikcZw3Hs0omdhebUuHGNOE7DXV6PkTvlmTcEk_1FObqh.webp)
+- [Read More](https://seek-oss.github.io/seek-style-guide/read-more) — Seek style guide · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/d7nkwhxhud8vdIKjn11EkR7Gce_zDjL-X6JfCSXD00M_Z17jbRW.webp)
+- [Toggle Content](https://seek-oss.github.io/seek-style-guide/toggle-content) — Seek style guide · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/1kzNuyJO5m3LMtGHLODrHdh7-ChA3LCNdjFnxVtfCwo_Z2jIuzY.webp)
+- [shadcn/ui](https://ui.shadcn.com/docs/components/accordion) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/3QYZSr8MsjFCS1HyX-21DmoxHp0RbLEkFthEl39LuK0_2kzMY5.webp)
+- [Collapsible](https://ui.shadcn.com/docs/components/collapsible) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/ysoR9mGUhjiBAetCNnX23AWpRgA1c05D8_60SHv4ZeA_ZIxBIN.webp)
+- [Details](https://shoelace.style/components/details) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/KNcMDaYkPPL3XwvKwJqBwedXAR7Zj2N1UFUVcjWrmF4_Z1B60uD.webp)
+- [Source](https://theguardian.design/2a1e5182b/p/38c5aa-accordion) — Source · React — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/ZaWk5Ose-gUT-LYjncHAf4TJBDzMHYKRMFvbNlYjWfg_18s1ay.webp)
+- [Expandable](https://stackoverflow.design/product/components/expandable) — Stacks · Stimulus — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/s7NmdRxGbXcy8L1HyOQoQHI6ulB2lUqnrXjuFxzxq5o_ZsxcKH.webp)
+- [SubZero](https://www.subzero.axis.bank.in/components/accordion) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/lfXUseKJLrfMFYQHFkVanUyM0da9a0Xq7_xt3KTq2Xw_1Y1rgi.webp)
+- [United States Web Design System](https://designsystem.digital.gov/components/accordion/) — United States Web Design System · Nunjucks — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/r5gepn2e-wCRdb7OdrhVNEhQdpl3UKNxU4EH9py-pms_Z2rXqO.webp)
+- [Visa Product Design System](https://design.visa.com/components/accordion/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/gawRQ9NS37UzIl0pNh9LM5oIEqhV68aJJ5QXIMJ4-RU_1nudS6.webp)
+- [Collapsible containers](https://design-system.w3.org/components/collapsible-containers.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/x5J4qJCLuq-ieeK20BnZnM0MR-UNxOCqDMvtBCfB6a0_Z10KrwV.webp)
+- [Disclosure](https://design.wonderflow.ai/get-started/components/actions/disclosure) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/7SPjmx--wqBxCJ-Z613gGaF39QtgVMChuVp9lTfitMo_BcIvr.webp)
+- [Wanda](https://design.wonderflow.ai/get-started/components/actions/accordion) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/YDbrBrYCxvw9YP0g-miXNeNagxHA7Z5Iew5oR_G4Bhs_1M7pGz.webp)
+- [Expander](https://design.wonderflow.ai/get-started/components/actions/expander) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/2GGMJWXBp7sBk4mYA8J_VrsXxhkUOMFZbVKL4la_ah4_2cwfLg.webp)
+- [Details](https://webawesome.com/docs/components/details/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/1UxsTyh7FHb8whhP6EvMXl0wGFqJdenTkmt-KcvBCpY_ZzYU0T.webp)
+- [West Midlands Network Design System](https://designsystem.tfwm.org.uk/components/accordion/) — West Midlands Network Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/2-SL30XoPPDPy69g3ahpxUEunYHVW0q_G8VGF5OtsUU_ZNq94W.webp)
+- [Details](https://designsystem.tfwm.org.uk/components/details/) — West Midlands Network Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/vLfCQHiy9cKl19vzHWfIaDktOxh_YtW6a6SF1Qsalno_Z2r7ctr.webp)
+- [Expandable container](https://canvas.workday.com/components/containers/expandable-container) — Workday Canvas Design System · React — Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/CJ6YZ2_Qw-u_-0-73GfWSxDiE1jgno_Mn3rD9_bBJ7I_2iq20b.webp)
+---
+## Avatar
+[Browse all 37 examples →](https://component.gallery/components/avatar/)
+### Design System Implementations
+- [Ant Design](https://ant.design/components/avatar) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/ZNBS7Na7fxXuob07lwlbFNCfKLmAk5Si-zy2_ALV38A_13zYpT.webp)
+- [Atlassian Design System](https://atlassian.design/components/avatar/examples) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/qPyHaOwYODvuCat-8-jehWhsQlqch0PXH6H5n-TkRKw_Zz2ScL.webp)
+- [Auro](https://auro.alaskaair.com/components/auro/avatar) — Auro · Web Components, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/L2YkbJ22EKJuzC6TnGYYcRundZS60XwygC6v9JPaeH4_Z1uf5a3.webp)
+- [Base Web](https://baseweb.design/components/avatar/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/y0qQyDuouG_Bcvyk1sCTXOZrtvxWAs0490L3Znibw3M_t5I6T.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/avatar) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/D9Tnx4CrdmuX1HQg29-kdE_JN-O_bm0Gb0CYA-ykd4s_Z1nQpg0.webp)
+- [Crayons](https://crayons.freshworks.com/components/core/avatar/) — Crayons · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/JAuOmSAL0wRBB4DeJSSdtJR2HXgeVvi3IeDxCiKEkio_IjXtp.webp)
+- [eBay Playbook](https://playbook.ebay.com/design-system/components/avatar) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/zCZwatAr1fhxnUcwI-wB9WInodCK27w8jd0bAoltjn4_Z1tGjjR.webp)
+- [Elastic UI framework](https://eui.elastic.co/docs/components/display/avatar/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/48VDU7HqOfAynEZwgDHKSANev3QAlU7lcl6Q3pI9vUU_14U474.webp)
+- [Evergreen](https://evergreen.segment.com/components/avatar) — Evergreen · React — Open source · [preview](https://component.gallery/_astro/x1w31GKRiBMSazOcZc_BLXvhjDbb1Btt1nr5J6LZjT0_ZegKjv.webp)
+- [Flowbite](https://flowbite.com/docs/components/avatar/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/InQE7lZUQF8L9TGv5lZ2E9Aa1xVWxRU8qL1uVFUmWSQ_nI23c.webp)
+- [Geist Design System](https://vercel.com/geist/avatar) — Geist Design System · React — Code examples · [preview](https://component.gallery/_astro/CII4J_T9jdIMolIs-Uwy1zqs0TJQoi4V7HYqtr2V4-c_Z4PQBu.webp)
+- [Gestalt](https://gestalt.pinterest.systems/web/avatar) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/_AeVFNDM-kzRL1n5AtVvTFI6iCKVGT4Nn0kJ88rxwgo_Z11s9y0.webp)
+- [AvatarGroup](https://gestalt.pinterest.systems/web/avatargroup) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/05z9Y3hkJkJ2-BR7vaDtiK_5sm3ZvJuVY070pfhJXfU_Z1RAGHO.webp)
+- [HeroUI](https://www.heroui.com/docs/components/avatar) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/gDXa6ORhm4wtuZVUuyAFoOLPsAqutP5vv4wobfQtr9E_Z1W79TF.webp)
+- [Instructure-UI](https://instructure.design/#Avatar) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/a5BRuBBXutge7CxEb-VTVofFvOWHFYRyjtVC5RwsmS0_ZHely2.webp)
+- [Lightning Design System](https://www.lightningdesignsystem.com/components/avatar/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/w-JTP-72SMzCx_6SVScp8sSVGV33aQrkmJEF9Mr5KEY_Z1qAPsh.webp)
+- [Momentum Design](https://momentum.design/components/avatar) — Momentum Design · React, Web Components — Usage guidelines, Open source · [preview](https://component.gallery/_astro/daxfGYIJNIwr7WFWPyY_1IpO6LhFR-aCIFpr3MbWo7w_GnkvK.webp)
+- [Morningstar Product System](https://design.morningstar.com/systems/product/components/avatar) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/2RIG8b93EGXIdOYZXW8LkHuNn6rh9XppKFTKrmY_TfY_22OTCF.webp)
+- [Nord Design System](https://nordhealth.design/components/avatar/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/exOOfasZ3hD2YBoJKSZ9uovw7JuY8BPwTHz4UL89FLU_Z1goAEf.webp)
+- [Pajamas](https://design.gitlab.com/components/avatar) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/t0BaBs244jNIOizufUROwsmTOXPG9En8Wecos-OCf8Q_Z2sFkx.webp)
+- [PatternFly](https://www.patternfly.org/components/avatar) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/kI95BLiwGHdWzTX5vEFxJ4OBTbrEDSzzrkIAOOLQSZo_Z1AqCdJ.webp)
+- [Primer](https://primer.style/design/components/avatar) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/jIAr0BVI7moZfxXkt83q6UbPmxfBC7k_LY8lUE1QY1Q_Z15vML9.webp)
+- [Avatar pair](https://primer.style/design/components/avatar-pair) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/om8nn5jDKFR5EthJ5zVzVKc-D2njFVFDM9fQjl6XG10_Zu670C.webp)
+- [Avatar stack](https://primer.style/design/components/avatar-stack) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/96MAbUXb_IDRczqx91UWgTRszsJ8NMrnkD4tyG-AHfM_Zd3GA0.webp)
+- [Quasar Framework](https://quasar.dev/vue-components/avatar) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/kl2ljdEGyjbi5Hpi9ubpcFqa8IGGgxGa6FIb1Sz2_U8_Z2jkvfw.webp)
+- [Radix Primitives](https://radix-ui.com/primitives/docs/components/avatar) — Radix Primitives · React — Code examples, Open source · [preview](https://component.gallery/_astro/7lF3Lg42x1X1vj3OLKQe9VbD0Cx0gheXa3fvC4w-TJI_bjT1S.webp)
+- [Red Hat design system](https://ux.redhat.com/elements/avatar/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/9wx68mP6gLFCHrvKwr1xoUh6QDjW_WYnIk_NQhqKiEc_ql5iR.webp)
+- [shadcn/ui](https://ui.shadcn.com/docs/components/avatar) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/WLi63GNmresMYoZslmLS4Br2xC44uqFzBKDyL_X6YBE_rYp6P.webp)
+- [Shoelace](https://shoelace.style/components/avatar) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/EP6n0z-yRvOzxhs103WliF4wyXaq6u0jZ4s0TSEUHQs_1v29Np.webp)
+- [Spectrum](https://spectrum.adobe.com/page/avatar/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/g7loGaNv7TL_XSucHcDGhZ_p8LnUcVhJg1Syhi1gqC8_ZQgWbT.webp)
+- [Stacks](https://stackoverflow.design/product/components/avatars) — Stacks · Stimulus — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/BGWDH8KzIqZ5trBdeWaf-LlPkQsRrgbjn6FEkPRGjMM_2np3QW.webp)
+- [SubZero](https://www.subzero.axis.bank.in/components/avatar) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/dHVA_CNQwEscVhL-6CpfxQGd1fLelMHHhawGCzWgb0c_k65Iv.webp)
+- [Thumbprint ](https://thumbprint.design/components/avatar/react/) — Thumbprint  · React, Sass — Code examples, Open source · [preview](https://component.gallery/_astro/JMA1oJKBTBvzP6nZcm4XgcLTKW5E7kmG9HzZ6B84yNQ_178I1m.webp)
+- [Visa Product Design System](https://design.visa.com/components/avatar/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/s2lgQm8Gn2pWrCVSv6n-s2aSFiwNfAmg15Rd-65YsU0_ZxnzCU.webp)
+- [Wanda](https://design.wonderflow.ai/get-started/components/widgets/avatar) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/C6mBkSRHGt9VMqMow8CJVW-ChhUTq9iJ3j0ZbhUrJtU_1EMti6.webp)
+- [Web Awesome](https://webawesome.com/docs/components/avatar/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/FS03PFZaNPhzgLVGXxiWMcCX10al3WQRP_EtekQX4aw_1V8F2y.webp)
+- [Wise Design](https://wise.design/components/avatar) — Wise Design · Mobile — Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/0SfwQV_M1jXxagnW5DkjrOtPrg4ANxraY_oAd0MIYP0_2fTDIh.webp)
+---
+## Badge
+**Also known as:** Tag · Label · Chip
+[Browse all 122 examples →](https://component.gallery/components/badge/)
+### Design System Implementations
+- [Ant Design](https://ant.design/components/badge) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/_FTHVY_JAW9_KfhsoPy4jkmy-kFKDGXSrM8FKfCegt4_Z26AIjO.webp)
+- [Tag](https://ant.design/components/tag) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/hnQxBQD9sdH9L7SwoRAawPETP5DJaOmwnDzQ11DuyZk_1qXEMP.webp)
+- [Atlassian Design System](https://atlassian.design/components/badge/examples) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/wcprT5_zVgUjpXpKhq-U5EDeGhjRwp-5Y3dpwV5Ozj8_ZS1qnB.webp)
+- [Lozenge](https://atlassian.design/components/lozenge/examples) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/8ulzsbuw_wDzhzdb29s0cCZGgB7o5ze4nfI37dnW5Ck_Z17iT3o.webp)
+- [Tag](https://atlassian.design/components/tag/examples) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/O-7kduBowM5zt_MAm0COkCUvabieHOb1gyH_scKjVeU_Z14x2n9.webp)
+- [Auro](https://auro.alaskaair.com/components/auro/badge) — Auro · Web Components, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/_cJd4eaYPx_deaptK9PdmZGNYN-U5NTJ2PRhwIG2S1U_UDzAD.webp)
+- [Aurora](https://design.gccollab.ca/component/badges) — Aurora · CSS — Code examples, Tone of voice, Open source, Unmaintained · [preview](https://component.gallery/_astro/zAjabLnCEtGknn-oKHjQ0rIICfVsfk9HkgsxtD5bpjk_Z1x1gQG.webp)
+- [Backpack](https://www.skyscanner.design/latest/components/badge/overview-SAeHUC0G) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/YMvn5s8PeeE5F_-m1eIK33akDudUL7Lf2TOwC2XFpyM_Z2aigg2.webp)
+- [Chip](https://www.skyscanner.design/latest/components/chip/overview-vOGv6skV) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/o5EPlFoYluH_XJi9-MGnMq-ZFhIXoBra6P-OfRmtRqA_ZeKVgi.webp)
+- [Tag](https://baseweb.design/components/tag/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/pLVwmWMncYMAFqT-z4e5L-aIazOARlLNP8E1XggPceA_Z1VL7hX.webp)
+- [Base Web](https://baseweb.design/components/badge/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/zkXmxeKfpCwFVSnc_TVajUfsBzukfrS3pOAAQ_M1hE8_ZzNGnH.webp)
+- [Tag](https://blueprintjs.com/docs/#core/components/tag) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/SzzvnpISP5waHSgXYcEDWWmXOwtYG0ELXQpJI_nczWo_ZFyfAH.webp)
+- [Compound tag](https://blueprintjs.com/docs/#core/components/compound-tag) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/xHKW6ZyjvFdxPGizEG-F82Qmgu5BOqOj1sQJKFhmG1U_dzbBq.webp)
+- [Chip](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-chip) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/QO3SGbDbFYgkTdfiyTDSdHa1mvtO0Ro5Pn4fqD_D_2A_Xgloo.webp)
+- [Bootstrap](https://getbootstrap.com/docs/4.3/components/badge/) — Bootstrap · Sass — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/33mcf-nh2lkUuOhZwxCPIJkILDiACdypq5I7C_S69Cs_12UKFp.webp)
+- [Tag](https://bulma.io/documentation/elements/tag/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/zWWNCTkf2lcmUJogIzWUITUQe1IiM0iMz6KjaWSSrB4_2i7QLa.webp)
+- [Tag](https://carbondesignsystem.com/components/tag/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/NM1kUX20Y0d92t-6vdcTuKUBa1qYMZ7rsGqiBc9Ic68_h1Xge.webp)
+- [Cauldron](https://cauldron.dequelabs.com/components/Badge) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/7I88l1pRrQxzKIYaaWo9E4mitfmVG1kvtXWe4OZ54Gs_ZC8rBA.webp)
+- [ImpactBadge](https://cauldron.dequelabs.com/components/ImpactBadge) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/tMf1QeAN-CAoxM0HEP2g_GX7K5hZxKB6auq_hKP80mQ_Z1pfuBg.webp)
+- [Tag](https://cauldron.dequelabs.com/components/Tag) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/7RYW1hsuti0gzj-4IUuk_QRIGjnMmGK8dBStxxvdeGg_ZCa61e.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/badge) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/NUVqHd7Zmx93n9ncHZeZEyucVTfzWDHxlhCa9-JcyYc_TkvgA.webp)
+- [Tag](https://chakra-ui.com/docs/components/tag) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/Jb05cPygIg-LUHrX2U95dKPtd9jDZP_aukktNlGbsOI_Z7MOex.webp)
+- [Status](https://chakra-ui.com/docs/components/status) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/FoflH2hl4FwZ2NGy3A2wjm-h8rtcyua47DHoCS0PEU0_1Ko8A5.webp)
+- [Clarity Design System](https://clarity.design/documentation/badge) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/XKzx6ITroRKjwMRZebRhqB-5zmeX3s-P6LZvHE7cJyc_ZcBRmO.webp)
+- [Label](https://clarity.design/documentation/label) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/xbxT9TmQY2gEXPBg0Pme9EYKPvYXijF_E-bpSfeXbhA_ZrhvGv.webp)
+- [Tag](https://design.talend.com/?path=/docs/messaging-tag--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/Ext8ZwQd74dL6MZhEdNxR6HlTaE6BkmG32NVpVXioY4_10WMN.webp)
+- [Coral](https://design.talend.com/?path=/docs/messaging-badge--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/K6uBqyCbpdje1KMYXsc7oCodcc7RNLL-MYOv6WJc5bA_1YtuqQ.webp)
+- [Status](https://design.talend.com/?path=/docs/feedback-status--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/QwE1h68gYo-2FeZ8Wnm-1qw_r_KpCZ6uDvQN0dScCmI_2ufgT0.webp)
+- [Label](https://crayons.freshworks.com/components/core/label/) — Crayons · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/JV_p4r0dVMcNz2ufVNhfq97ES4Gv1LrunrsCaC6-4VI_Z2fgouu.webp)
+- [Tag](https://crayons.freshworks.com/components/core/tag/) — Crayons · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/7yaSWBGz8_sah6KEy_kFIXSKxQdqJuoOALL7YGMHey4_Z1JErzK.webp)
+- [Pill](https://crayons.freshworks.com/components/core/pill/) — Crayons · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/PLiyXnB7Ochvmh7heEH0-FezW06ZczU9-drZwJtQAWQ_Z1x1NOC.webp)
+- [Decathlon Design System](https://www.decathlon.design/726f8c765/p/465f7c-badge/b/5496b9) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/T5t0NHINWviAszgl1DHm5C1jdYZM28thHtLLHztontM_ZhLihm.webp)
+- [Tag](https://www.decathlon.design/726f8c765/p/129f57-tag/b/065880) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/apKZ8JeMc2G4KDSsN1c8hkQuiY3IUIJxZabRLIQK_Qk_1waihG.webp)
+- [Dell Design System](https://www.delldesignsystem.com/components/badge/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/rHk5WP6qKV83qIUvoXcbBngFErge6OlE3q0Q_1h2MLo_ZdPmXg.webp)
+- [Tag](https://www.delldesignsystem.com/components/tag/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/fJ_T3oSpqkmT7vthIblNae7d4j2Frjq770P4cKGKtUk_ZGBIP9.webp)
+- [eBay Playbook](https://playbook.ebay.com/design-system/components/badge) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/h0CXG0Fh3rYf5aP2X287lSbDF-1qvwOlFJl_CDOwoqE_ZpvOfb.webp)
+- [Signal](https://playbook.ebay.com/design-system/components/signal) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/bstP-kjR7mCSwhDojZ39vhHkkgvNq07sQfSxBSdIIwk_EaOTh.webp)
+- [Elastic UI framework](https://eui.elastic.co/docs/components/display/badge/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/YkcgJ71JclcPouP0mVmFVl1eHSMQHqMM3vZF4SS8Na8_MqQ3T.webp)
+- [Elisa Design System](https://designsystem.elisa.fi/9b207b2c3/p/9356c3-badge) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/rVHywe37ieIuT_xrXXMMF10hPz-wrsBG-NeKulcejnI_1Fv94O.webp)
+- [Badge &#38; Pill](https://evergreen.segment.com/components/badges) — Evergreen · React — Open source · [preview](https://component.gallery/_astro/fPJ3MU_Zc3_gVL_cTmDFcgl1ZPV1jLMMGA0gbskRwTY_ZtbQr8.webp)
+- [Flowbite](https://flowbite.com/docs/components/badge/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/Oe0EDeDj2Ug3Xu1In6tJ_1-sK3PMSFQ6Cs36jEcpFMQ_O24mU.webp)
+- [Forma 36](https://f36.contentful.com/components/badge) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/kcComxyaqHeFZi2Dv3GT2jLpgxZ4tR2aaOSTRJ2woOY_Izdms.webp)
+- [Entity status badge](https://f36.contentful.com/components/entity-status-badge) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/_-RukUpAZxcXoNz6hxtna3BFOvWH3HbnfEqreaRlkPs_19iEh5.webp)
+- [Geist Design System](https://vercel.com/geist/badge) — Geist Design System · React — Code examples · [preview](https://component.gallery/_astro/SEfJ84VH84YY9lLK2scXEKfUHlmMpBz8aUVTmfhLmmM_Z21nhCS.webp)
+- [Gestalt](https://gestalt.pinterest.systems/web/badge) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/FD1kYtACbqLJjmGbwbvm3xPk0OIDwUUbNqrmfvqgfuQ_17CwxV.webp)
+- [Tag](https://gestalt.pinterest.systems/web/tag) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/DP_n3PuQ1DNDAFpBewJi6g5AmDKQ8azPQOmeMuEVZek_Z1u9Kl9.webp)
+- [Tag](https://gold.designsystemau.org/components/tags/) — GOLD Design System · React, Sass — Code examples, Usage guidelines, Accessibility, Open source, Unmaintained · [preview](https://component.gallery/_astro/ANaZ1jcpTo2IZG14SnbkYRIS9ob25u9c-X1GF6YXitY_za3fG.webp)
+- [Tag](https://design-system.service.gov.uk/components/tag/) — GOV.UK Design System · Nunjucks — Code examples, Usage guidelines, Research, Open source · [preview](https://component.gallery/_astro/jwG2uNzXhqu4EjRDTgPOC_ZiUr5fQtYj3cEDp5p5KX4_ZHl0TQ.webp)
+- [Helios](https://helios.hashicorp.design/components/badge) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/f2pMocWXSSqtivix_G-KMvTmgICdGck6yec6i4wi77c_Z1Rd617.webp)
+- [Badge count](https://helios.hashicorp.design/components/badge-count) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/8nBlxkB5n5QZ3xNlPOGJTUXjjD340NpN8nzoVr2Zo7Y_2lEoEU.webp)
+- [Tag](https://helios.hashicorp.design/components/tag) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/yLTbCxA8jNm9KXi4wiJ_q5zJbPk6OFw_ruCqR4SYG_M_Z2tpH54.webp)
+- [Status label](https://hds.hel.fi/components/status-label) — Helsinki Design System · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/28UwrXo_yCk5ShwRCNe3a22wxr1ZAgwC2HhzW2Sk1po_Z1MHRnF.webp)
+- [Tag](https://hds.hel.fi/components/tag) — Helsinki Design System · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/ko4mewxU-BskJekoSidFs2XGOf6a0844sgPjwwV6bho_1iXdro.webp)
+- [HeroUI](https://www.heroui.com/docs/components/badge) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/CxcYV8hCm3EM7vYh3TlNjmbUE7oibqdRg8KJOwX9MSs_pg1Rd.webp)
+- [Chip](https://www.heroui.com/docs/components/chip) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/wbrw_wLj6b964UTDkfdK4OCqcHUkXCl2nlq5UQ7j_j4_Zwnlak.webp)
+- [Instructure-UI](https://instructure.design/#Badge) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/46BVRC3QrW8pMCeWklxJPu2Rt-uOWA-hCqsI3m0TsjE_ZqNeyj.webp)
+- [Pill](https://instructure.design/#Pill) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/CMATb9cNdV5FVDvRJ92Myo10mIHSuaMI2Wmb3hJxBU0_Tj00o.webp)
+- [Tag](https://instructure.design/#Tag) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/nAvZetYvMrIWyX321FMNPek06gIpLT9ixq-KPIamNHo_Z27LlEq.webp)
+- [Tag](https://jokul.fremtind.no/komponenter/tag) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/0Oxq6V1yUbOTbhS_AAY_8kzyIfWgVH-JA6okK_FJ6pY_2pQ7Da.webp)
+- [Lightning Design System](https://www.lightningdesignsystem.com/components/badges/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/yJT0kZbhTClejj6S2kG3TDPhJkQbX0l8rcCv7ofj7sU_Z1h95ea.webp)
+- [Lightning Design System](https://www.lightningdesignsystem.com/components/badges/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/vvjNHi7MUP0At5vZ32ApxNXy292qHt4v3Fo_1auZsqg_Z1TYfK5.webp)
+- [Pill](https://www.lightningdesignsystem.com/components/pills/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/-gYwxJkiBs31jW0wzir6Q3YWRKNdyOzwsVN6JIL1mVc_Z1Qgj6m.webp)
+- [Material Design](https://m3.material.io/components/badges/overview) — Material Design · Mobile, Web Components, Sass — Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/rtXIMiPOLCKOzVwSnb2ZfQ2zRK5ZBqhcRIW6EO4n5Z4_Z17QxM.webp)
+- [Momentum Design](https://momentum.design/components/badge) — Momentum Design · React, Web Components — Usage guidelines, Open source · [preview](https://component.gallery/_astro/-6VjVLvZbNS1g-xaQRzKiI1KFolW3-S7ikDfPpiZyZU_ZfBo0G.webp)
+- [Chip](https://momentum.design/components/chip) — Momentum Design · React, Web Components — Usage guidelines, Open source · [preview](https://component.gallery/_astro/ycamRDw_I_KzycJh9gizepOIx9scT8cNVAX1ePLKlhc_ZPEQ3W.webp)
+- [Inline message](https://design.morningstar.com/systems/product/components/inline-message) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/gmtEC7_Cb5iJ_Ebdrc4sP7p_QLlt7BvAx7SZHfsdekY_ZwUqQV.webp)
+- [Tag](https://design.morningstar.com/systems/product/components/tag) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/TrhzRZ_DGn9olmRBjyVvTBuevKgFDtloM_lc2yHUzRY_Z1UcSy3.webp)
+- [Nessie](https://design.ns.nl/4a05a30ad/p/97c5c0-badge) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/pfXWyo89FCmpTcI84HmuZ2QzEvD8BgT8EFxgbuT6bdU_2tfcTk.webp)
+- [Sticker](https://design.ns.nl/4a05a30ad/p/863c3b-sticker) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/fQZtjzVHYt4SC3Yn1u9yML-f8_o4CqAiHJNoDX969mc_Z24wJIq.webp)
+- [Tag](https://www.newskit.co.uk/components/tag/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/h8swZ7Yopogp4gynTBv98aMOX5QbyXh6T_eAP81rBZM_rPX32.webp)
+- [Flag](https://www.newskit.co.uk/components/flag/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/lQDyZzE_OZHDxkPu_dbLFduBRi_axcSli2cBM2yVxjQ_Z1lBiz9.webp)
+- [Tag](https://service-manual.nhs.uk/design-system/components/tag) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/sQ7qpP0oFp0T-ZDBloRECt-5RIGpQFxoTozv7OwV6wQ_ZcfoVA.webp)
+- [Nord Design System](https://nordhealth.design/components/badge/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/v-k6NvLy4dmkPQ60Q0-YhZcCripyHmScsaraWKxYrqs_Z1Wpwvf.webp)
+- [Pill](https://britishgas.design/docs/components/ns-pill) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/SMA_fRBFov_ULEeD9d_naCYYlTbsqxGuISm3Cr7KPCg_d4v0P.webp)
+- [Orbit](https://orbit.kiwi/components/badge/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/6KnjfYLfw9ewtiC8OsYGDRwhfyt7nB3SWqa6lhgqGLI_Z1WBEF5.webp)
+- [Notification badge](https://orbit.kiwi/components/notificationbadge/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/sOszLgEamLN4zrfipWfnPPfkbswm9Jsgv04YSTuy9fU_1Tk6mW.webp)
+- [Tag](https://orbit.kiwi/components/tag/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/AW_LLUWUNeNjJFZu6jdfiKnEcMHFYjCM8CGBlcrJJEQ_2lmcUq.webp)
+- [Pajamas](https://design.gitlab.com/components/badge) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/SCx1KERm-KWDGFmMzRE3FvbC7ZxMLj6M7xdP4uAEeA4_WlHa5.webp)
+- [Label](https://design.gitlab.com/components/label) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/KkDgMPFzkC_FUM5Ew_8KIhr07fgKPvKyui4W21osYQc_ZJCrrr.webp)
+- [PatternFly](https://www.patternfly.org/components/badge) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/SsEzWdx_-EzpbJi0ljPlknMXwMIpxXUeFkIKjRlYPVs_ZArK1e.webp)
+- [Label](https://www.patternfly.org/components/label) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/h79eOlj7vRs9LRTimIzBX-5I0fTxJOLav9oUBkDZET4_Fjj2O.webp)
+- [Notification badge](https://www.patternfly.org/components/notification-badge) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/1pR4xZ4B7zJ7jd1u-yGFZiiXLVTyBuvbF5cYAQxC9_Y_8cS1X.webp)
+- [Tag](https://polaris.shopify.com/components/selection-and-input/tag) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/HKnWYnl1FDWiwzKHIb3H_q_gsJWjzN4ROzzNQJ2XoLE_Z9mHCp.webp)
+- [Polaris](https://polaris.shopify.com/components/feedback-indicators/badge) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/wURnvjFZOaVqPjHZ99xyQ5AuPfoTLOVuGQF_6B8X41A_Z1tOzQj.webp)
+- [Tag](https://designsystem.porsche.com/v3/components/tag/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/taMvUv6Y2JnlgNCoZK-XitYNzQ-i-L7lk1xj0CW6doY_2l8AwC.webp)
+- [Tag Dismissible](https://designsystem.porsche.com/v3/components/tag-dismissible/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/3qnfHxOk3Ex_pwl7uf6aTCphs10uuHKUGdS_gfrpLC0_Z1WodYn.webp)
+- [Circle badge](https://primer.style/design/components/circle-badge) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/TIlascX4PgkW1zhTKFu2EUaD_oe6FB_DjqePhgt5IzY_1n6R70.webp)
+- [Counter label](https://primer.style/design/components/counter-label) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/8zeQlljOt2WBKPRXPP1O7pijYx88a6JCzyj_kh8Vv_k_ZOogX3.webp)
+- [Label](https://primer.style/design/components/label) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/V19FiUTTHgyuvp8lpyGvlApuNBk0jlFz4sRvCqnpo2Y_Z1JuAnb.webp)
+- [State label](https://primer.style/design/components/state-label) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/FlOMNtmnKIu5W3xOyoLM5qLydB-8gQO3jDFEN0c3UMM_Z2sj5hz.webp)
+- [Token](https://primer.style/design/components/token) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/k2vfoPNspgXpboXtkicd4gXGPO4YkG7W_3H0tQAaxgE_ZmtXfq.webp)
+- [Purple3](https://design.herokai.com/purple3/docs/#badges) — Purple3 · CSS — Code examples, Unmaintained · [preview](https://component.gallery/_astro/9WDuysPdyrhP646bnp13pkG-r_IqYukFarCr0vLd-8s_Z2tOTNo.webp)
+- [Quasar Framework](https://quasar.dev/vue-components/badge) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/MwRc7pYqXw3OGw7ONRd6pi6Ym0njZY0gBGtfmOdyNZ4_ZyQfmc.webp)
+- [Chip](https://quasar.dev/vue-components/chip) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/eyYnrzmnPbmL3LJj2n8EBnewY6at2bsGfyLk9wwCByI_pa0Ty.webp)
+- [Red Hat design system](https://ux.redhat.com/elements/badge/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/tqm2fs1b_HjGaNNZdBbkRYM_XyAcZfpeJBNdgb_YR9I_j4FN.webp)
+- [Tag](https://ux.redhat.com/elements/tag/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/Z7ppe1jALHgaVTENB6w3U82ZZZoXSDkMWHpwNlX4IUg_Z29bzNS.webp)
+- [Bullet Badge](https://components.ruter.as/#/Components/Badges/BulletBadge) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/GZRMN1JCQojDTs-Qn57tgowbGrQvZjXKzh7U3dbkIpQ_Z1jg7qV.webp)
+- [Status Badge](https://components.ruter.as/#/Components/Badges/StatusBadge) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/C3ZS94YkBtMaRSrqRu5OKh5lzmldysUWHEz_L13UdxU_1SWeQJ.webp)
+- [Counter Badge](https://components.ruter.as/#/Components/Badges/CounterBadge) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/TYy4J3aRIMDChZo5IG_3Ud1WQ2mH9z-MVyb7c8Y4M4M_1AEMs0.webp)
+- [Tag](https://design-systems.sainsburys.co.uk/components/tag/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/lnULM3sRTAnVRqggwuzG8ByvUs6VyUeZyr6EapZ698g_1eciwA.webp)
+- [Seeds](https://sproutsocial.com/seeds/components/badge) — Seeds · React — Code examples, Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/tfidLlJUQWNleCm1V8yTZObE-Onr7lDndDRVmdtmX9w_Jj6k3.webp)
+- [Pill](https://seek-oss.github.io/seek-style-guide/pill) — Seek style guide · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/NmYgmu9w9W3pBzfzf_YNleY4U16iP0v1QpBYUkug5eI_vJea0.webp)
+- [Seek style guide](https://seek-oss.github.io/seek-style-guide/badge) — Seek style guide · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/qsPvihASe_uK-WpbQmIa8WkMv806OvhaWiWzB0HdW9U_ZV4mDO.webp)
+- [shadcn/ui](https://ui.shadcn.com/docs/components/badge) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/MNzGcnXD0r4lB2GpMuhpIAdfKrUo7pRirVelczCovFU_Z1dKQlI.webp)
+- [Shoelace](https://shoelace.style/components/badge) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/SJho2Hxutlar6RKZCORRWK77gG4QWzHNR65pG8xnr-4_PiaY9.webp)
+- [Tag](https://shoelace.style/components/tag) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/aR4qz_g5nNiNOL9RAfFbBQg8gB16bau1pRLnyaGRlso_90MoO.webp)
+- [Tag](https://spectrum.adobe.com/page/tag/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/Wudx1eIqAVQv8rLUR976KDkCsQ2qdYrtsJgUk6aTPQc_1KFAmI.webp)
+- [Spectrum](https://spectrum.adobe.com/page/badge/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/pVF7bIFVX3F0gGMZsYrvcVNbqwHJGisilYS_4vxXLjM_1RaExl.webp)
+- [Stacks](https://stackoverflow.design/product/components/badges) — Stacks · Stimulus — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/7WLbij-0bJtlJrR24nMRFf852lmGvvsSRt41bIEHR-U_1PGYa9.webp)
+- [Tag](https://stackoverflow.design/product/components/tags) — Stacks · Stimulus — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/yspaZhXCBYa_k8qc1LUyTFfp21W8XvBJDpwT8fzyz3E_Z18uIqh.webp)
+- [SubZero](https://www.subzero.axis.bank.in/components/badge) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/Spcw5IYcpaFm6nzPKzaLY2cRQGJRX7F0I_ZcJ6378iQ_ZLipAj.webp)
+- [Chip](https://www.subzero.axis.bank.in/components/chip) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/7lz28bjzMILUFMr2sWuwO_P0EFHbALIzrkE2Q5bfDOM_Zoitaa.webp)
+- [Tag](https://www.subzero.axis.bank.in/components/tag) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/obhkxy5rRGCB4h3dK71nhBpgYQw0Gx0eWjCrjx-z5Ys_Z2bHihl.webp)
+- [Pill](https://thumbprint.design/components/pill/react/) — Thumbprint  · React, Sass — Code examples, Open source · [preview](https://component.gallery/_astro/UBRCBECq64giUbiibb40kVOfzPG2XHzZRYsJEKZKXtQ_OYsuD.webp)
+- [Tag](https://designsystem.digital.gov/components/tag/) — United States Web Design System · Nunjucks — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/1KL_ba2A7_uIQcSfxRVktUpytla50r7jLmpQ_Vke4Aw_1BOf93.webp)
+- [Visa Product Design System](https://design.visa.com/components/badge/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/XCOdo6LlBH_DcSPGG1CtIMjhZf2JSFg_8sVZ6K6y5AE_Z1gSFva.webp)
+- [Chips](https://design.visa.com/components/chips/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/FSM0drm2mOcQdsSYLZ7bFG7MGJZWsStKtXUiJ73WbaQ_Z1jrbO7.webp)
+- [Chip](https://design.wonderflow.ai/get-started/components/widgets/chip) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/vZFonL70yRQEqIyi-tk2mmp4P7GVQ20MpqaSFQLYX5I_ZJpXqL.webp)
+- [Web Awesome](https://webawesome.com/docs/components/badge/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/p1REEwRLrjPjK08o27NNy1J54HXJuoUXMwpcIOXGCys_Z37PaE.webp)
+- [Tag](https://webawesome.com/docs/components/tag/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/sncdGLOpnOqk7WA2tavzfEGu2-Gi5Rl5r7UYyHU2_wA_ZrADtA.webp)
+- [Status Indicator](https://canvas.workday.com/components/indicators/status-indicator/) — Workday Canvas Design System · React — Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/Z63qUzUxvV0P0n0ytEzuVlX4ZulloXtAxI_sTu8n61s_IePt0.webp)
+- [Pill](https://canvas.workday.com/components/indicators/pill) — Workday Canvas Design System · React — Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/TuUuAZIBEXpK4cEz_r7XO3ExbfSbhaZaq2sT6aKTvTg_ZWqKwE.webp)
+---
+## Card
+**Also known as:** Tile
+[Browse all 79 examples →](https://component.gallery/components/card/)
+### Design System Implementations
+- [A11Y Style Guide](https://a11y-style-guide.com/style-guide/section-cards.html) — A11Y Style Guide · jQuery — Code examples, Usage guidelines, Accessibility, Unmaintained, Open source · [preview](https://component.gallery/_astro/7gdmZ5qoHWOFVjB-nI-pNKchssw-XQM6i8hZvIGItjc_Z24ylPi.webp)
+- [Ant Design](https://ant.design/components/card) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/5g_6XFG6UvznzTrSHxewyd8rkdijXhW6pX2c6QepLRo_29hHf8.webp)
+- [Auro](https://auro.alaskaair.com/components/auro/card) — Auro · Web Components, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/wbJTL4CJGdj6bVjxCw5pLDPjl9IDbfC_D7XOULfRRgA_Z1xdFjc.webp)
+- [Aurora](https://design.gccollab.ca/component/cards) — Aurora · CSS — Code examples, Tone of voice, Open source, Unmaintained · [preview](https://component.gallery/_astro/7KDPFCATEoqTCf0ks1l4wkPg7V6XeWLuJuS_W0UtZ8Y_Tw766.webp)
+- [Content card](https://www.skyscanner.design/latest/components/content-cards/web-n7qSZpec) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/8XGKPgp52jbLGAgWuHbxhir9wKRZmhJo-y0g-q800zs_1Oy85d.webp)
+- [Base Web](https://baseweb.design/components/card/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/3_Eq7axVtLtCbJGoca8xyolhX8E2jScTrygAynGCpZQ_1C4cjm.webp)
+- [Message Card](https://baseweb.design/components/message-card/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/yYloI3lAA1pyrVuRo8BSwmSgBIe2jNRzYci5pccMhok_duBTD.webp)
+- [Cards](https://www.bbc.co.uk/gel/guidelines/cards) — BBC Global Experience Language — Accessibility, Usage guidelines, Unmaintained · [preview](https://component.gallery/_astro/6JQiWE-R5StVOAeujgKl00tqbKeqnXqH5rALH5Z5gx0_1Q04su.webp)
+- [Blueprint](https://blueprintjs.com/docs/#core/components/card) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/_w7N4H2rECg6DpYw7d4tQ0yFzVHhn8RWvdR82lasD0I_Z2p81wz.webp)
+- [Bolt Design System](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-card) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/0oMtVVAKyVxO1N_iqrbhoaZQPOwP_5URHj5qLobmGb8_ZmAI7Y.webp)
+- [Bootstrap](https://getbootstrap.com/docs/4.3/components/card/) — Bootstrap · Sass — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/srmvbXDVip-K8SItkuZiq3zZ1jzB-ywUQYzFsIpoiVM_3451M.webp)
+- [Bulma](https://bulma.io/documentation/components/card/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/59fhLilyooqYER-5EYJ91oR8WWMFfi-QcQMjC8qawWw_CRPzB.webp)
+- [Cedar](https://cedar.rei.com/components/card) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/RL_IgifYgxYxNlH62M17dS0fCOQke6DdfL973bfrzzQ_1bTevD.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/card) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/2wvIjtQF9u2PiaT8uAk76ImLKZQqWq1UGKjImqUcijM_2mX0Ro.webp)
+- [Clarity Design System](https://clarity.design/documentation/card) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/TNlT-o18Hc9V_ViWxG4NBA6zTrVyYH_dmwkrdUGK4WY_ZqlCkg.webp)
+- [Coral](https://design.talend.com/?path=/docs/layout-card--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/oKvPeICzIx1NRsqR2ojKriiPdF0EyKDqv377hr_GPyI_Z25vVfU.webp)
+- [Decathlon Design System](https://www.decathlon.design/726f8c765/p/88fc2b-card/b/51e109) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/3CyFzKo8vTVkWOG5CyqQv-sYTsmubtsS5cCJY2KW0U0_1DmKTI.webp)
+- [Dell Design System](https://www.delldesignsystem.com/components/card/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/zoEslDhxvnoly-NpudTENtsruoxEWZPBJWor1qMsazs_1yvaDq.webp)
+- [Duet Design System](https://www.duetds.com/components/card/) — Duet Design System · Angular, Vue, React — Code examples · [preview](https://component.gallery/_astro/eeqQIWH6OWHukTkyGwLG41UCgE1ct_9DtwlUo46ZhqE_12lpWD.webp)
+- [Tile](https://ebay.gitbook.io/mindpatterns/navigation/tile) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/hxspgwRhOgo_OjHC6ekFSjVolBBNRJR_WUllmC4m2yI_16tfSU.webp)
+- [Item tile](https://playbook.ebay.com/design-system/components/item-tile) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/gJdlS6HcqQECCjgIaiVd_ZgWudktHtEvdpbbyzPQjgM_Z221WdA.webp)
+- [Panel](https://eui.elastic.co/docs/components/containers/panel/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/SdFjD8NHDC6IklDOjcMWlivDb3xHxaYTqhhDaXVsc1c_Z1Ibtfv.webp)
+- [Elastic UI framework](https://eui.elastic.co/docs/components/containers/card/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/b-QaQSW-uV8lDI4jsBTUpoZ5T-XZivNt3wermpv8gpU_Z1LtVDB.webp)
+- [Elisa Design System](https://designsystem.elisa.fi/9b207b2c3/p/850b09-card) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/Oj5eU7gpCcwYbNIGR8ZniIkykGnb8zCtvnjnQPymnzE_Z2562yR.webp)
+- [Flowbite](https://flowbite.com/docs/components/card/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/weCwQmjRu-jxWbBLVFPO7ebEZJw6qhUK7Zb4M9kr2pk_1aitRe.webp)
+- [DocumentCard](https://developer.microsoft.com/en-us/fluentui#/controls/web/documentcard) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/lFoOB9LlvQ4YDDudKmZiRZoJrlUzsZDvpZ6iZSM5oCs_10xSY1.webp)
+- [Asset card](https://f36.contentful.com/components/asset-card) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/0WZGFHLsNURAyEx7p-hXBSz0IPNaENhfHjKLlQ9BCPE_Z2bAXo4.webp)
+- [Forma 36](https://f36.contentful.com/components/card) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/_oc61dpYLs1lMzrmuyCVejYSUHqePrGDrcATl4GclQE_cstcE.webp)
+- [Entry card](https://f36.contentful.com/components/entry-card) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/z1kNDIwjofTSOU-6e0VH38x83V1X8ZExwa_5bpz7TB4_18h4gl.webp)
+- [ActivationCard](https://gestalt.pinterest.systems/web/activationcard) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/otPlic0vrLY4Z0Ly8_Yfl1BZ-vdzt_f5Rr0UXHE5zlk_1upSnU.webp)
+- [giffgaff design system](https://www.giffgaff.design/components/for-web/cards/) — giffgaff design system — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/1FhOJLK8WQm5W-YAeIOZ_ZPK_Bp8VSyaL8NVP7le0n0_19RYPj.webp)
+- [GOLD Design System](https://gold.designsystemau.org/components/card/) — GOLD Design System · React, Sass — Code examples, Usage guidelines, Accessibility, Open source, Unmaintained · [preview](https://component.gallery/_astro/yHsiI0Mx1c5N0-yY0dPnAi7kQxz2sb5MhzLOJhruiOk_LGaHc.webp)
+- [Helios](https://helios.hashicorp.design/components/card) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/JNSdrYRS3nIOWbDteM_0M5q6JfUrKcxR3MyMhnVis4I_Z12RVU6.webp)
+- [Helsinki Design System](https://hds.hel.fi/components/card) — Helsinki Design System · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/uuzrlPBhiQftjcmVBAboMpeigjqcw_FNJup0gP-TD0k_Z1avGem.webp)
+- [HeroUI](https://www.heroui.com/docs/components/card) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/uRRYKtlBfzsr6L4l__sIj8a58QbPVZCAfU5OgESoZb4_Z1r9c2d.webp)
+- [Inclusive Components](https://inclusive-components.design/cards/) — Inclusive Components — Code examples, Accessibility, Unmaintained · [preview](https://component.gallery/_astro/hJVdHfIItW87DUQueZyGKAI16_X3P6gc5Uv_p1EhfSI_Z1TJkQA.webp)
+- [Jøkul Designsystem](https://jokul.fremtind.no/komponenter/card) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/KM3vbFTiLBOLIqw9K1laYSlPg39qcpjyAIyoEV6_-08_EcL1A.webp)
+- [Lightning Design System](https://www.lightningdesignsystem.com/components/cards/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/f4Gc1DUKeJ89plRMxfU62XzVAEdH2enhGXyoDMyOk14_Z1E7Yyf.webp)
+- [Material Design](https://m3.material.io/components/cards/overview) — Material Design · Mobile, Web Components, Sass — Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/oyxvvD5h3eixfIuThTEbq2H7zOG8C8280aOzH7vZ5qQ_Z1HKJKA.webp)
+- [Morningstar Product System](https://design.morningstar.com/systems/product/components/card) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/KnFFDeqc4MeBceTeN4hu6aeoKomO8meXQnlGCCTYefQ_Z1Hpq8N.webp)
+- [Mozilla Protocol](https://protocol.mozilla.org/components/detail/card--overview.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/tWlj-EuQ8wvrGQf3gUhLVxro8I7hx2viAF31Krp3BGI_ZlgPSx.webp)
+- [Tile](https://design.ns.nl/4a05a30ad/p/26b3c4-tile) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/EDwEnojpVtvRwFBiZsNTb1bVkbwrPefy-5Ae04-JRkA_Vm1Ng.webp)
+- [Tile Product](https://design.ns.nl/4a05a30ad/p/198731-tile-product) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/sWUjohjERueH86nZa1O3pa_90YItxvIIVMP43Un09LU_Z5Pr0y.webp)
+- [NewsKit](https://www.newskit.co.uk/components/card/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/Y_NckrnMM11yzBgIptSYpZUkIYOmVTmc3zcTdID8IMY_Z2tfVEc.webp)
+- [Card Composable](https://www.newskit.co.uk/components/card-composable/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/VsP4KOD439-A6jGweC8RzuC2n11yekTYV6ynBoQQQp0_ZeNnEN.webp)
+- [NHS Digital service manual](https://service-manual.nhs.uk/design-system/components/card) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/uNmTnoySsGABMNHC1X_LCjX1DAXJnnmXJF8LL-nj0lo_ZfmtQs.webp)
+- [Nord Design System](https://nordhealth.design/components/card/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/Xk4lqE_CT6j0IRqHLPqVgkzvQcnycXKbEUYcQ8AKe7g_24Cz3a.webp)
+- [Nucleus Design System](https://britishgas.design/docs/components/ns-card) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/zSdJDS0NT4r4q0Tx4G5wPMRX0YD8pKSUJqBg8m_UzH4_ZHWwnk.webp)
+- [Product card](https://britishgas.design/docs/components/ns-product-card) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/arZa-rLvAusf2pfa4XALNsOMcSgg4wUWP3uXK-T9HlE_Zw9trD.webp)
+- [ONS Design System](https://ons-design-system.netlify.app/components/card/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/Mm-DVQPs3nUehOSk_r89T5ceB8R1cPWlwU6Kt7KvQrU_ZkC4u7.webp)
+- [Orbit](https://orbit.kiwi/components/card/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/xnCQsIIW4C3dt6U1VJOFHs05cju1ssGn1XiAn4555Gc_ZJg5Je.webp)
+- [Tile](https://orbit.kiwi/components/tile/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/OjGnP7qIwRs5W2cIxIMDnYGILmywO2emygK38Gfh5Sc_2vuadu.webp)
+- [Pajamas](https://design.gitlab.com/components/card) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/1TSx9rKgDNiC8gqhqntJHtFJWoC2Rzi35CCUj-mZADM_Nu6G6.webp)
+- [Paste](https://paste.twilio.design/components/card) — Paste · React, CSS-in-JS — Usage guidelines, Code examples, Tone of voice, Accessibility, Open source · [preview](https://component.gallery/_astro/-0VO-Tyf5pf-Oti4MJliGdgAHh8z8D0Vy6IwfcrRQCw_1PPT0y.webp)
+- [PatternFly](https://www.patternfly.org/components/card) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/8BWXSULKkI90TcB9yruZcXhCsztY97WdAxT5UG-1WpM_2nor9C.webp)
+- [Image card](https://pharos.jstor.org/components/image-card) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/NeX-0y3LD5bL5MRQDVQrhbu9Eu6k4EnXxHC90aTxfDs_Z1QGJ6i.webp)
+- [Polaris](https://polaris.shopify.com/components/layout-and-structure/card) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/dLLmseCiPFFPJaoaLBHvHXDFHyvveW28M3kuhtXqEAw_8qCHn.webp)
+- [Callout card](https://polaris.shopify.com/components/layout-and-structure/callout-card) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/4pf1YyuXcLz1foTo0gEVq26DqQiyn1CpbsZFpy4ab3Y_Z2j5YCa.webp)
+- [Quasar Framework](https://quasar.dev/vue-components/card) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/LBVnQkWXpqxWcXnASFnstLu0fZMfgvkY4HUCGupRJI4_2lxxt5.webp)
+- [Red Hat design system](https://ux.redhat.com/elements/card/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/T-pNtsfjRuU4v4Pq9YKJ-57gbVkNQig3ku1HW4k0Cvs_49tjQ.webp)
+- [Tile](https://ux.redhat.com/elements/tile/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/NJi7xC2P-3y4Y0MIE_Ns8qZD-kRc9k3WTQAVV_R2jjg_Z1MTlVk.webp)
+- [Ruter Components](https://components.ruter.as/#/Components/Cards/Card) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/AH6xpQDrtJv026xPwkqJg2GuvVmPPWm5v9sB0SYM1tM_mGshT.webp)
+- [Navigation Card](https://components.ruter.as/#/Components/Cards/NavigationCard) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/Kz-vkDzIm9wCFC4c050VRxjq2YozEn1g3sP41N6jVZs_Hwky4.webp)
+- [Content card](https://design-systems.sainsburys.co.uk/components/content-card/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/wfXz66MQ9uGvf3umLEEsZt1Xj4lUY7v6MjzQPz4cM7U_1xYyAP.webp)
+- [Product card](https://design-systems.sainsburys.co.uk/components/product-card/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/JpnBaNH6uvTdrVT-Vn7YhJhh_BM00CNHAhpf73MpSQA_Gjzn1.webp)
+- [SEB Design Library](https://designlibrary.sebgroup.com/components/card/) — SEB Design Library · Sass, React, Angular — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/QBpDPGMRN_lswiZ6GCUYry0Q8Zeyw8u93G6OMO76w0g_RUNQt.webp)
+- [Seek style guide](https://seek-oss.github.io/seek-style-guide/card) — Seek style guide · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/YhnGccLRxZ8N3NVZIlknmwqJyn_1_-0gmdC358lqKrI_OmsUQ.webp)
+- [shadcn/ui](https://ui.shadcn.com/docs/components/card) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/8-3T0M4b1thPzk5m8r7Aps7dDwS32JRrOcdCV_HuGys_ZgUeeU.webp)
+- [Shoelace](https://shoelace.style/components/card) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/ffme8o3McqFBxz3tBD3BC4oMSNz3B-e_zsqUTAgXO6M_Mo28D.webp)
+- [Spectrum](https://spectrum.adobe.com/page/cards/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/WP213xaIkeMHbsq1CcyaJfqRukBJF8pv-VR4g4SLfwk_53M8D.webp)
+- [Stacks](https://stackoverflow.design/product/components/cards) — Stacks · Stimulus — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/x3w_ncUuziIt6YZsIrBSc6d7_4UZsRQxaswLb5LgOxs_Z1cU9jw.webp)
+- [Service Card](https://thumbprint.design/components/service-card/usage/) — Thumbprint  · React, Sass — Code examples, Open source · [preview](https://component.gallery/_astro/4gxKNEpUZnzQ33Sp9A7jpeow5eWigYcHdQWX01rEcJQ_1VhdGd.webp)
+- [Content card](https://design.visa.com/components/content-card/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/Gtg-Pu8x44B1jvwTwN800dAPi9P5Pi6MWtElHBxexf8_ZvYvWF.webp)
+- [W3C design system](https://design-system.w3.org/components/cards.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/61tjuhNtt9_3gGDAaOuzeCMKZVjkpAwQaQfh9SMN5nc_1Dy6Sl.webp)
+- [Wanda](https://design.wonderflow.ai/get-started/components/layouts/card) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/_hd5tt6XUVRerstioBoFbJrY0pL7DSJnTrWQPhcw5ac_1Hkzdc.webp)
+- [Product card](https://design.wonderflow.ai/get-started/components/layouts/product-card) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/NzLkt_d9JlI8iOxiY8mt1nGwvJG2FAwdMyfv3OtjMas_Z1EJcA2.webp)
+- [Web Awesome](https://webawesome.com/docs/components/card/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/LQSfAdjGRwj4ODLbMQ3ZGQkAYLgv2GNm8aJPi3UNTK4_2mK4MX.webp)
+- [Content card](https://designsystem.tfwm.org.uk/components/content-card/) — West Midlands Network Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/rZVDMXHolOeV2grHwDSbMab_VodEBD7qGS7noaM7jko_FE2xe.webp)
+- [Workday Canvas Design System](https://canvas.workday.com/components/containers/card) — Workday Canvas Design System · React — Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/U9Vwilpd6p8yRKi3qJ3Ug8PN3sR9HsiEooYmASW795s_11kU52.webp)
+---
+## Carousel
+**Also known as:** Content slider
+[Browse all 22 examples →](https://component.gallery/components/carousel/)
+### Design System Implementations
+- [Ant Design](https://ant.design/components/carousel) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/k_0QAbwSQUhaJbTamqY3n4UmrYE5uRu8vNniFMzJzoU_1CwcmP.webp)
+- [Auro](https://auro.alaskaair.com/components/auro/carousel) — Auro · Web Components, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/UhGfnJg8sq-c8AuxCBG7DAGQsEMxIrGtcvzN2Nh7ouY_ZOBLoQ.webp)
+- [BBC Global Experience Language](https://www.bbc.co.uk/gel/guidelines/carousel) — BBC Global Experience Language — Accessibility, Usage guidelines, Unmaintained · [preview](https://component.gallery/_astro/G_5hCOZCJwsokPZvR65YCGDg9zcXgZr0BbexDScA-KA_1w5eYE.webp)
+- [Bootstrap](https://getbootstrap.com/docs/4.3/components/carousel/) — Bootstrap · Sass — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/E76Km1Y-0bkKSHerSKkUrvoIOmani2Vq-ApeOyOviAk_276VeP.webp)
+- [Filmstrip](https://cedar.rei.com/components/filmstrip) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/Xe1y6EhuCUq6tZAno_fbUHJeM7hV475oHRw5Js-Co1k_1fRoYK.webp)
+- [eBay MIND Patterns](https://ebay.gitbook.io/mindpatterns/disclosure/carousel) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/3of9ioeIrcTFexyzQP3hIWayAxD9Snm77BPvCmJZcKA_Z94TCb.webp)
+- [eBay Playbook](https://playbook.ebay.com/design-system/components/carousel) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/gmL-SpO4D7nC2e4Lqr0XO-jFVGa4NXXihhesibOGXyc_Z1Qpqdo.webp)
+- [Elisa Design System](https://designsystem.elisa.fi/9b207b2c3/p/362948-carousel-wip) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/VNn5fTbOT_dNef2CNZi30F9vJA22senqmIA3ktb6mO0_14K4wq.webp)
+- [Flowbite](https://flowbite.com/docs/components/carousel/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/P_lvBmryWPFPsz9vnZoCk3gP28srbIx8XNSA8Mhlvwc_A00K.webp)
+- [Grommet](https://v2.grommet.io/carousel) — Grommet · React — Code examples, Open source · [preview](https://component.gallery/_astro/tL_OCnJnS1XqV2IngKQfc6w9tLQL91otCzmVfaZpV4E_1T4hHC.webp)
+- [Content Slider](https://inclusive-components.design/a-content-slider/) — Inclusive Components — Code examples, Accessibility, Unmaintained · [preview](https://component.gallery/_astro/k-g-LDj_NMIpJQ7PPg5ftLBywbwPf4m9_yb2ALelGRw_ZMLSwV.webp)
+- [Lightning Design System](https://www.lightningdesignsystem.com/components/carousel/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/w9haow8ySdLiNz4ANNwVXazd_OmspkRQFlI4XiHQPjY_Zq5Ry2.webp)
+- [Material Design](https://m3.material.io/components/carousel/overview) — Material Design · Mobile, Web Components, Sass — Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/-1JnogdbU4j4Tz54LRq11OBBvHjHKUD2PnInBlx1Dxk_2oSgo2.webp)
+- [Porsche Design System](https://designsystem.porsche.com/v3/components/carousel/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/OL6bzkpIyGZn5QxGRUyRHFClCAwjOzgwemr0-CJg5yM_ZcmSm3.webp)
+- [Quasar Framework](https://quasar.dev/vue-components/carousel) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/GvqPIn-tjau3cY3rbGc_ySpLr0oCdOhIjKr5sV8MjCo_Z1QOdkH.webp)
+- [Banner Carousel](https://design-systems.sainsburys.co.uk/components/banner-carousel/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/gsQFSjA2UuOIhvtdnUZ23IJ0jg2LHtCUFlgwWlUohF0_Z1Eb2mY.webp)
+- [Sainsbury's Design System](https://design-systems.sainsburys.co.uk/components/carousel/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/mcb30gzQst2CyVStcOHojS2gRt0tdzWgAL4a50baISQ_Z2wLGB9.webp)
+- [shadcn/ui](https://ui.shadcn.com/docs/components/carousel) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/ks2z-k07w9MU4nnZ5avu4hlDAcUDSrOFn0XKDgTVrDw_1QfoNt.webp)
+- [SubZero](https://www.subzero.axis.bank.in/components/carousel) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/cn8mLg3gBb6GbrvfIWNIBr5REpssByCi1stA2ajm3_k_vd3Ky.webp)
+- [Thumbprint ](https://thumbprint.design/components/carousel/react/) — Thumbprint  · React, Sass — Code examples, Open source · [preview](https://component.gallery/_astro/c7yADyYY201rvMmkBA5PyDEAe2XgLYA9sgHlDzZ2ba4_Z2lrbPB.webp)
+- [Content slider](https://design-system.w3.org/components/slider.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/8ADEUCc90L6XNeTfKhgdVsnMI-0e5E3f8q9QB-eboKA_2a13pi.webp)
+- [Web Awesome](https://webawesome.com/docs/components/carousel/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/pUlvceuMZoljAgzXwvYfNR4UiBMJrw7Q_P9-6IyG7N0_Z2uAccS.webp)
+---
+## Heading
+[Browse all 28 examples →](https://component.gallery/components/heading/)
+### Design System Implementations
+- [A11Y Style Guide](https://a11y-style-guide.com/style-guide/section-structure.html#kssref-structure-headings) — A11Y Style Guide · jQuery — Code examples, Usage guidelines, Accessibility, Unmaintained, Open source · [preview](https://component.gallery/_astro/PVWJnf658FX2rkl_D9EUZJqjYGlRjwyyqbS8E1-XzrU_Z2mh6G7.webp)
+- [Ariakit](https://ariakit.org/components/heading) — Ariakit · React — Code examples, Open source, Accessibility · [preview](https://component.gallery/_astro/7btyYvu-sczmeK7Xt8BeA62aRiTVL3GBSjTebgSiuyA_Z1itxgt.webp)
+- [Header](https://auro.alaskaair.com/components/auro/header) — Auro · Web Components, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/Q4XP70IlytR8KsOudLGwvkGuaoPP0Pp-B_e6Juc_tfA_Z27uReU.webp)
+- [Base Web](https://baseweb.design/components/heading/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/E-fDey2egLcEuNcJhdIK4GXOZ-LxMrmnQlmnYUAWDB4_ZGYXPt.webp)
+- [Headline](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-headline) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/kLnvmJF2FZDzr1_ESUd7_BjhmZ9SEPbe3-jfiKmktHI_Z2mkxre.webp)
+- [Title](https://bulma.io/documentation/elements/title/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/4i82vMfUFBnOwCPxK1CndImIbZ2idTZOi6CK34dp64I_2sYL2A.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/heading) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/FLtB7lsxhWVvPl9erxmcMNjZIyXwds6wu-K6iv35lMc_2eHNix.webp)
+- [Duet Design System](https://www.duetds.com/components/heading/) — Duet Design System · Angular, Vue, React — Code examples · [preview](https://component.gallery/_astro/YzlJev1qZAaTP9o7p3lWK4anDVY3q_9ry6EGtVOlZJE_ZiUNSz.webp)
+- [eBay MIND Patterns](https://ebay.gitbook.io/mindpatterns/structure/heading) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source
+- [Title](https://eui.elastic.co/docs/components/display/title/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/0a8hvq_muEEDTlcBEzshv_p8qDrhXuQ8_OB0eTlNygw_ZkqevN.webp)
+- [Flowbite](https://flowbite.com/docs/typography/headings/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/FKdL-qxMRmXzPMFnvLDLpPCLNP0YbFI8AJJl_wMHBNU_17x5FI.webp)
+- [Forma 36](https://f36.contentful.com/components/heading) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/xylHQcNC8nNzhpBuGNiPHP0SznfCO9EZmMzjG2I2OyU_ZMD0QR.webp)
+- [Section heading](https://f36.contentful.com/components/section-heading) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/efeLafSf4jD0aqolVP1ScNxqvAt77mVp0o72Ak7YjPo_Z1REDO6.webp)
+- [Subheading](https://f36.contentful.com/components/subheading) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/t6K0aHN6rLAnUxL5yPsEHEpxWYMt5EdP_oEjf5l5jEo_Z22C1lK.webp)
+- [Gestalt](https://gestalt.pinterest.systems/web/heading) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/HRKbqYiE7mBMMFK14nrJDFLewGYEY1kg42k89me-QHg_JPP4R.webp)
+- [GOLD Design System](https://gold.designsystemau.org/components/headings/) — GOLD Design System · React, Sass — Code examples, Usage guidelines, Accessibility, Open source, Unmaintained · [preview](https://component.gallery/_astro/w-NpTr4PB57rmgPCfekNTr8mecpBoTY3X_x0E2-dUYM_19bxwn.webp)
+- [Grommet](https://v2.grommet.io/heading) — Grommet · React — Code examples, Open source · [preview](https://component.gallery/_astro/pcSTw-C8brTJoJqlb1H2L-mUHFJX8HBToZgswqMhfLs_Z1zCFoq.webp)
+- [Instructure-UI](https://instructure.design/#Heading) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/qDTqAE1Z2ubftX9lt-njQF1gS4TP3LF2hXaD12TuQmw_2wfCmh.webp)
+- [Headings](https://protocol.mozilla.org/components/detail/headings.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/ndsFxGPyQH8XAZSp2MCE-iuxiNvNH8mG-f2I0rjnDaU_Z1MiYJu.webp)
+- [Section heading](https://protocol.mozilla.org/components/detail/section-heading.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/bLB2uz3w0aqwpeBY4WMyc49X05jPYbf7YQ-CC6Yt6w8_Z12I5f6.webp)
+- [Orbit](https://orbit.kiwi/components/heading/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/ijdVyYZNo00H7NLt1qQV-PDwNJfJZtfa0G3tWssilNc_1vHIW8.webp)
+- [Paste](https://paste.twilio.design/components/heading) — Paste · React, CSS-in-JS — Usage guidelines, Code examples, Tone of voice, Accessibility, Open source · [preview](https://component.gallery/_astro/ZHGBuG6dOhhsJn8BkLuY6HDCXLmfSBN782U-U8ZbPVI_ZW3tK4.webp)
+- [Title](https://www.patternfly.org/components/title) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/ml4SJNFDqlA2oihbbj-tAGS8sd5I_9Sg7y_WBExwhIs_Z1Vew9u.webp)
+- [Pharos](https://pharos.jstor.org/components/heading) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/CDhXT2zoxGmT0WYZJHViv8EXxq-6BNHEmHkTzrevUDY_Z1LAv56.webp)
+- [Porsche Design System](https://designsystem.porsche.com/v3/components/heading/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/EPSlE8JpddzasBhP1GKBRIC_IZhvUxs2xIrAgBxwnKc_2gIj2U.webp)
+- [Primer](https://primer.style/design/components/heading) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/qS5N-yFYheY-wJqaAcCmUKo83G_7Tq57oWTLDCCvSPg_Z2kHEjS.webp)
+- [Spectrum](https://spectrum.adobe.com/page/heading/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/0hboYbF7xJxs0Jou-QvtR4hZdWqiywdvcHxfLdhRShc_Z1iVvbe.webp)
+- [uStyle](https://ustyle.guide/pattern-library/typography.html#headings) — uStyle · Sass — Tone of voice, Code examples, Usage guidelines, Open source, Unmaintained · [preview](https://component.gallery/_astro/0hwtgHj-HPXFwKmebB-8k1b-BQEecrSX0AV9WB6bkNE_8jzuz.webp)
+---
+## Icon
+[Browse all 45 examples →](https://component.gallery/components/icon/)
+### Design System Implementations
+- [Ant Design](https://ant.design/components/icon) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/I9LCTdB43hjqPvmgQpxatfPrd7N91a0ig_ed_EB6YC0_1D1r1k.webp)
+- [Atlassian Design System](https://atlassian.design/components/icon/icon-explorer) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/jCIwO9AbryR7EbG9zgDW5W-F0OD2ufmlv7aYVTBve-o_ZQcxmQ.webp)
+- [Auro](https://auro.alaskaair.com/components/auro/icon) — Auro · Web Components, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/vpBqWQuuE25Lz8OIpAVrG1COys9RcqgZvjYZhg7PWLo_1DU5k3.webp)
+- [Aurora](https://design.gccollab.ca/component/icons) — Aurora · CSS — Code examples, Tone of voice, Open source, Unmaintained · [preview](https://component.gallery/_astro/nW5nUZDp12YgVeI0WEMBNgGy41pJ0SOSsKdWfc0tYus_wSCiL.webp)
+- [Backpack](https://www.skyscanner.design/latest/components/icon/overview-GqEdq0zt) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/F6NFpyf27KtfJdgyn7Y9FChm0jFF1hdegGUPJ_ELV5M_yOySt.webp)
+- [Base Web](https://baseweb.design/components/icon/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/3j6DnlrQ5qNWHdc6MaW7pJX8eoR74OAGQ5B-JTbgFhY_ZkBO9r.webp)
+- [Blueprint](https://blueprintjs.com/docs/#core/components/icon) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/g28TmUs9fUv2uYyhBD46E_E-z9qlW0kxMDYRpz8teQA_Zlya5l.webp)
+- [Service icons](http://design.brighton-hove.gov.uk/website-pattern-library.php?p=service-icons) — Brighton &#38; Hove City Council Website pattern library — Unmaintained · [preview](https://component.gallery/_astro/o2v-hSabhLA-xN_uYiSB1BbPG1RzZA59o9fUvUIFtvg_LeYwO.webp)
+- [Bulma](https://bulma.io/documentation/elements/icon/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/akTPreNr-sdy4zNTeXzn_VJ-VrBMS4BMfwsaUNvb-_M_2m2qv1.webp)
+- [Cauldron](https://cauldron.dequelabs.com/components/Icon) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/rItqa51eiB5OqKneVjqTFMcmB_KR2cFHD4If5shOHx0_Z1LeO0O.webp)
+- [Cedar](https://cedar.rei.com/components/icon) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/hPxT-GZBB4Y3TNZlg0YZm0k6w9_PgEHFlyr2PflJwrg_16Ga6.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/icon) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/IoKAkXOtG7f2GQMHw58ohW0pVGZcQvtlnZcO-6uSx1A_1bSaky.webp)
+- [SizedIcon](https://design.talend.com/?path=/docs/icons-sizedicon--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/rCaeSq4qKbxn7lMqz03adM0JXdDPH5FDUQSYaBmn2ws_Z1QT040.webp)
+- [Coral](https://design.talend.com/?path=/docs/icons-icon--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/V4E7vbT2ixSQzVtWTeDgRRydKIy2H95rg6xxZzKzgX4_ZNQPik.webp)
+- [Crayons](https://crayons.freshworks.com/components/core/icon/) — Crayons · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/jF2yGua3ydqNnw_iptgPdxB0YCy34RS-eUoBZhX0Kn8_1C02r7.webp)
+- [Elastic UI framework](https://eui.elastic.co/docs/components/display/icons/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/1S0As_eq9nHcdGxNG_pZxsrpWLg6XeXFl2aBtRpZBIw_1zGPGi.webp)
+- [Elisa Design System](https://designsystem.elisa.fi/9b207b2c3/p/396f55-icon) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/w0nZjTHYO_RXFOh_9gJ1rFZliQuwikT1aQsoZfvJgRc_Z227Kyw.webp)
+- [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/icon) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/rj8HqKFiL4Yh90MJ7c1kwK_U-EHQccA4Jofzp2fGcUY_Z10j1rB.webp)
+- [Forma 36](https://f36.contentful.com/components/icon) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/TjYPP5kCowYkmuitdT2byajWlEiwrthIvJlu4f6C72Y_ynbRt.webp)
+- [Gestalt](https://gestalt.pinterest.systems/web/icon) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/yc7qCOl8nMnAHfwHflsWQ3KuqHVukJuKHilDKwsonKM_Z19fe1l.webp)
+- [Icon tile](https://helios.hashicorp.design/components/icon-tile) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/z73KsvXxSJVaRq2z1vWMSAQZwcIlDK2YKlU-1-kZTEE_Z2rOFWE.webp)
+- [SVGIcon](https://instructure.design/#SVGIcon) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/ug_K9VCDWTQaFbgH_8hU0ZrS__DVt6GiSAzUhgtAqog_Zytnml.webp)
+- [Icons](https://jokul.fremtind.no/komponenter/icons) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/9jzNAVnFRkUxH_hYa16sL9ZP3awcbWMoxHQ2coHwTdQ_9Ge1e.webp)
+- [Button icon](https://www.lightningdesignsystem.com/components/button-icons/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/FtmL8mZGVrQ0xAqtOC_oYpSMoNU4x-D4E4efyibV_4g_Z1fE3MI.webp)
+- [Lightning Design System](https://www.lightningdesignsystem.com/components/icons/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/KJV0_LnYAoyo7RlnnO85aWPGqa4O9yqoyk8qTApyhao_Z17lxYu.webp)
+- [NewsKit](https://www.newskit.co.uk/components/icons/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/xoZqickz58utXU7GTAte4Bl8WPiRSzjDBAgwzOOLuPs_Z2qvCch.webp)
+- [Nord Design System](https://nordhealth.design/components/icon/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/_wu85yBfoqdjznxCMk42n0UQQwot7xQkmV4FNBruDSU_Z1Q8UPg.webp)
+- [Nucleus Design System](https://britishgas.design/docs/components/ns-icon) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/64cSMjIJkxfma2bbuk16y0o2Pp31eSYOVUd-ppK4AvQ_Z1qpGFJ.webp)
+- [Ontario Design System](https://designsystem.ontario.ca/components/detail/icons-primary.html) — Ontario Design System · HTML, Sass — Code examples, Usage guidelines, Accessibility · [preview](https://component.gallery/_astro/eY-9MsO-o7m-FyJbdMXyTQp_wex7I_KzefQEs00WSzg_Z84RNP.webp)
+- [Orbit](https://orbit.kiwi/components/icon/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/jj5lWty7fen7-R_jvH-k0aPm1NjibFThUevLeyYEulU_ZRcnTD.webp)
+- [PatternFly](https://www.patternfly.org/components/icon) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/ZDHRrz_jKx4KZfFReXl60lezY7MNBjrXvj1RQAQprQc_An9oI.webp)
+- [Pharos](https://pharos.jstor.org/components/icon) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/6lBiQiZBBg-02i1XAAgs61kG1aDaL7Xl-srIfa5ISJw_Z2fJTtr.webp)
+- [Polaris](https://polaris.shopify.com/components/images-and-icons/icon#navigation) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/FMHoQlwVBIVpmNA9Usqu7qLSfmdiu9O_-ICsVjud3Zo_2mkc09.webp)
+- [Porsche Design System](https://designsystem.porsche.com/v3/components/icon/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/zpwJLsNwyYNroj8pM-6NjfZGTloFz1-W88Y2ilRfE8U_Z1B9e8Y.webp)
+- [Primer](https://primer.style/design/components/icon) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/-MGJszNUqrNe4w4Pnj5vNJlWeoLbQLAwCPleZa0XGcE_ZwTuB3.webp)
+- [Identicons](https://design.herokai.com/purple3/docs/#identicons) — Purple3 · CSS — Code examples, Unmaintained · [preview](https://component.gallery/_astro/euLlUQUaNNJYurhjLqpVqqEPqiLmeOoSLOjRShAh_E0_Z1of3dM.webp)
+- [Quasar Framework](https://quasar.dev/vue-components/icon) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/X8KNpIdcyjKeCpztQ1ui-FAHCsNgouIZdrv4zuJFawY_ZJXh8Q.webp)
+- [Ruter Components](https://components.ruter.as/#/Components/Visual/Icon) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/1_rNWpOhNS6ApOVTAgbC-0hWPWEs7Tw2d3ga8IaWDU0_2pRuOm.webp)
+- [Seeds](https://sproutsocial.com/seeds/components/icon) — Seeds · React — Code examples, Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/_Am2sGExGs90FGpaOnIqM1vtObZefDm9Z72axrPVz5E_SRE5C.webp)
+- [Shoelace](https://shoelace.style/components/icon) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/koVGIlWh_8yP4y94SXkofB1TkGry10TegqGlFvk6yec_ZcuT1a.webp)
+- [uStyle](https://ustyle.guide/design/icons.html) — uStyle · Sass — Tone of voice, Code examples, Usage guidelines, Open source, Unmaintained · [preview](https://component.gallery/_astro/j5aNjGfDK4u5Ajjmbmg-MCr9_xk5cSoGgjAdXTmdoEM_pqbll.webp)
+- [Visa Product Design System](https://design.visa.com/components/icons-illustrations/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/I_4dgJkxJrpcBqtvHg6U8yVEWmgFs-rmRAay8Y2hzGE_4KT9x.webp)
+- [SVG Icon](https://design-system.w3.org/styles/svg-icons.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/vXPuIffLdQlMXgXlRsQigQn_Zis_ERCJl5SMAAZcI5g_2qEXHp.webp)
+- [Symbol](https://design.wonderflow.ai/get-started/components/widgets/symbol) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/ZlXF-6wRoYxq_RU1LGUnrYwuUU9tAiXoojVSB6aZ5C4_Z1iitPx.webp)
+- [Web Awesome](https://webawesome.com/docs/components/icon/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/8aRNEXzZpeUcx-WxM77UjNnIG2iIWEN8bZLQKwcEgr4_2iAJ8K.webp)
+---
+## Image
+**Also known as:** Picture
+[Browse all 27 examples →](https://component.gallery/components/image/)
+### Design System Implementations
+- [A11Y Style Guide](https://a11y-style-guide.com/style-guide/section-media.html#kssref-media-images) — A11Y Style Guide · jQuery — Code examples, Usage guidelines, Accessibility, Unmaintained, Open source · [preview](https://component.gallery/_astro/42MSbU7W5hwjF2M7PbCx_x_VZfqOuqwwNTE2q6fx_qA_2bhljl.webp)
+- [Ant Design](https://ant.design/components/image) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/bvbxffTI70BN3-raryz6H-itxieKrut_okn5vIYGxqY_Z2sbMEU.webp)
+- [Backpack](https://www.skyscanner.design/latest/components/image/web-O1z3ATvN) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/lwBm8Sr-TP6A065O3tj3XFPAlb8g5Uz70OsnNA-abM4_26EWx5.webp)
+- [Bulma](https://bulma.io/documentation/elements/image/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/_nPnUlLzJMj27sTtYAg5Q156hnQpO4jAE9nAekDpV9s_24Dpma.webp)
+- [Cedar](https://cedar.rei.com/components/image) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/1ClahlQXT_-ZWAprxjuNO1cZuggpkEucotTEfgI2tWA_Z1BvtxQ.webp)
+- [Picture](https://cedar.rei.com/components/picture) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/WBAtf8RglrcGw22EcgPtjBDz-tqjiO6TZJooivotGIc_ermUb.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/image) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/Z01brezXVdfgSdCJ3fpPblLKB4p6midojOxgZ_uXQ3E_ZnYUwJ.webp)
+- [eBay MIND Patterns](https://ebay.gitbook.io/mindpatterns/structure/image) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source
+- [Elastic UI framework](https://eui.elastic.co/docs/components/display/image/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/7ot39oHWSLmBlzf1lZFSUZZBlO0Yu1HdN0hxiImH3pw_Z1v7Ndd.webp)
+- [Picture](https://designsystem.elisa.fi/9b207b2c3/p/4174ee-picture) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/bFftOq8okH38oavO3ra7tVON6wi469uynMSXpDDAnYQ_Z1kVfdL.webp)
+- [Flowbite](https://flowbite.com/docs/typography/images/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/7sZ8mZz_YM4INLw9FxchdeHaFOxB-mWyO37UV5YpcgY_KX185.webp)
+- [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/image) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/5zlHA5Bkex9c6V8YwFsmTv068icEtJjtcecrBNykKjU_ZSiAON.webp)
+- [Gestalt](https://gestalt.pinterest.systems/web/image) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/W2X9RLTG6WLHhBh_sZiT3o6vdeeW2uIogR4o1RcKLxg_10DXyF.webp)
+- [Grommet](https://v2.grommet.io/image) — Grommet · React — Code examples, Open source · [preview](https://component.gallery/_astro/5M-sHGcOKTmUJnraNcl4xuB6fcOBTDDV6qrnIYsvMvw_Z1goSBJ.webp)
+- [HeroUI](https://www.heroui.com/docs/components/image) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/C-HdSh747xwF5sVZOY0BXQ1AK0NIdS2zcR6e50XmI2M_pHWE4.webp)
+- [Img](https://instructure.design/#Img) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/cDVaDuGe3GhovncPqhoifYmx4rhvl9SbOdXFATY7a-s_9yo7b.webp)
+- [Jøkul Designsystem](https://jokul.fremtind.no/komponenter/image) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/JfGAWd0WTTte6tY8a1x64AfA3V61eZvlgJFiRWXGBBo_imX4r.webp)
+- [Nessie](https://design.ns.nl/4a05a30ad/p/59a83b-image) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/nKSG64-TH4faFBD9uDykB6rVXfjPzONzQ1Z8jB2EO8U_ZWjnj2.webp)
+- [NewsKit](https://www.newskit.co.uk/components/image/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/1fg3nPdOrI2T8T2W_HtPSi8Moz829ISgR4hpKFEShGk_DkwxE.webp)
+- [NHS Digital service manual](https://service-manual.nhs.uk/design-system/components/images) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source
+- [Nucleus Design System](https://britishgas.design/docs/components/ns-image) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/VpMyFI_pN1-pZfJTAGodT0nFfjypwTs5YnfVlrZ97Jw_22mqi.webp)
+- [Img](https://quasar.dev/vue-components/img) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/QnL0iiasw-xdz3b5XwGlWi81l5wLZwj-0HTZpYCccZM_ZHhwoY.webp)
+- [Ruter Components](https://components.ruter.as/#/Components/Visual/Image) — Ruter Components · React — Code examples, Unmaintained
+- [Figure](https://components.ruter.as/#/Components/Visual/Figure) — Ruter Components · React — Code examples, Unmaintained
+- [Seeds](https://sproutsocial.com/seeds/components/image) — Seeds · React — Code examples, Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/nVsbYX5NIVTxed2qymBZTv38nRQtMmTXR1vpLG3RlVM_Z12pucw.webp)
+- [Thumbprint ](https://thumbprint.design/components/image/react/) — Thumbprint  · React, Sass — Code examples, Open source · [preview](https://component.gallery/_astro/A2Xdz-uv99HOWB_j-6VYtOSvoVpJaS5MfD42Ckm3E_M_Z5YWLf.webp)
+- [W3C design system](https://design-system.w3.org/components/image.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/grL8gmdFbSTXMFE7XC2mswTAiW5m0M0I3gDqa3cNA7g_ZefTic.webp)
+---
+## List
+[Browse all 69 examples →](https://component.gallery/components/list/)
+### Design System Implementations
+- [A11Y Style Guide](https://a11y-style-guide.com/style-guide/section-structure.html#kssref-structure-lists) — A11Y Style Guide · jQuery — Code examples, Usage guidelines, Accessibility, Unmaintained, Open source · [preview](https://component.gallery/_astro/pDbCFWqjxM4Njef_HcfFXA2nRT2NYDDE48Fy-ffrY6k_Z1cWNEw.webp)
+- [Description list](https://ant.design/components/descriptions) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/t7bjKq5caf0JFJHpFy3QSAeVb7CrGfhFZi-skJ2T89Q_GTUcG.webp)
+- [Ant Design](https://ant.design/components/list) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/dQEpaR1YAGlvg0gjc1UUpTfewAHzlmfsqQkaAIuUVrc_1RLsAK.webp)
+- [Backpack](https://www.skyscanner.design/latest/components/list/web-WFg1PM34) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/N84DDV7hAVmHlFFc8xmpFzrCZP7yXOHj4vhQ2jsf4pg_2851it.webp)
+- [Base Web](https://baseweb.design/components/list/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/ClcC6RdecFyZkBekhXkj1Y8ILA79JBz-aTG1Rz4j7c0_ZbPrUe.webp)
+- [Overflow list](https://blueprintjs.com/docs/#core/components/overflow-list) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/9HXCxKVKLlPcZzds-o6aZJzUwgj3SbdsudOHF0bkqp4_1psoml.webp)
+- [Bolt Design System](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-list) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/b-HX1zuUT_XkmjKAjv7V4JrTaYOzho_-VHqQGCBv-T4_26dMC8.webp)
+- [Ordered list](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-ol) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/RKS_QDPdGZqkv_jpm_NJW8Zuxz3Y98Dg0uGii-9Rcps_2w7xs9.webp)
+- [Unordered list](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-ul) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/Tw4CXpgMmNNej50NY78b8WjtDpNs8C-ulgZvBXokS64_1OhiUF.webp)
+- [List group](https://getbootstrap.com/docs/4.3/components/list-group/) — Bootstrap · Sass — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/ZxJGu0a3FL_1TaT5DTBtT6op4E0096zp-MuFtW9bL8Q_Z2281P5.webp)
+- [Brighton &#38; Hove City Council Website pattern library](http://design.brighton-hove.gov.uk/website-pattern-library.php?p=numbered-bullet-check-lists) — Brighton &#38; Hove City Council Website pattern library — Unmaintained · [preview](https://component.gallery/_astro/CPStyKgPHhGLwuRpjBuOuaQnD1FBIAWXYUGtxqalWD0_Z1JscJf.webp)
+- [Comparison list](http://design.brighton-hove.gov.uk/website-pattern-library.php?p=comparison-lists) — Brighton &#38; Hove City Council Website pattern library — Unmaintained · [preview](https://component.gallery/_astro/Kx_-wFQNAUo_x_j4FTbhQHfM_pdaH9gXAKZR0UGC58Q_ZFLp5p.webp)
+- [Carbon Design System](https://carbondesignsystem.com/components/list/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/L8iH31fy8XlQYk_zbbKhnQXvE6CNES4WV83sYcJAyLI_Z28j6m.webp)
+- [DescriptionList](https://cauldron.dequelabs.com/components/DescriptionList) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/UDAOfWpdsu5KAluKNe9msLatxyD0vo1JlkyTwe-8wwY_1yjaeu.webp)
+- [Cedar](https://cedar.rei.com/components/list) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/GK3STzrBYfD2FY1EKbYnxpT7B4363nk1vWLceD9CYnw_2o6c1V.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/list) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/1jRcCM4kEa6yugv2vDSlXHCIcmGY3L_lRUUvr_atl4I_1AQCiF.webp)
+- [Clarity Design System](https://clarity.design/documentation/list) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/K4HE-m45ns0485IT8GMZSUE07g3f2kRjjJgGfQcp2vo_Z8qPB6.webp)
+- [Decathlon Design System](https://www.decathlon.design/726f8c765/p/078570-list/b/9115e7) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/hRMR9EV9gNHmWweSxLhFHxzTglvE1rix9CWnFSQG8yU_Z6KlvF.webp)
+- [Dell Design System](https://www.delldesignsystem.com/components/list/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/iTY8nPbNutjY0joDZ2BHJVfEaL3X_zbHvC-RAwGNbW8_ZddseO.webp)
+- [Description list](https://ebay.gitbook.io/mindpatterns/structure/description-list) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/VFxzPTUcvPRV05RGBL9xuubP4SiFBUPgZiJcL8ducj0_1L3eav.webp)
+- [Description list](https://eui.elastic.co/docs/components/display/description-list/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/yJZQeNnCWFL6Tro5oACr3wYRzSGqwPsXwZW34qXQ1jM_Z2vP6tH.webp)
+- [Elisa Design System](https://designsystem.elisa.fi/9b207b2c3/p/146865-list) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/eJn5ASnqCkuByfqCY_XoeqXnN8P-y9Y6Jadwlki00uc_Z91mWD.webp)
+- [Flowbite](https://flowbite.com/docs/typography/lists/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/ArJYkZAH28W7geQyTNcQWM00Ztb5RBT5tUrHPF7kFrU_27s3KX.webp)
+- [GroupedList](https://developer.microsoft.com/en-us/fluentui#/controls/web/groupedlist) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/lY07DcFB3fn7UbyWZ-9eRj-yjVw9DPaRCrKsbRRwv5I_GF7sU.webp)
+- [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/list) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/V3rZOp0nYRvsS2g7m7MxQxnkgHwjKCb7_w_7kgZj5_U_ofhvW.webp)
+- [Entity list](https://f36.contentful.com/components/entity-list) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/5eFh4HB4eXgjquub0vczfW1PxwHM7hOKmHRPdBbZTnY_1JhgX4.webp)
+- [Forma 36](https://f36.contentful.com/components/list) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/L5M0T8BBwKU0hB6uO_LYWN0OHhEZj0HNl8FDThOuHu4_1kNaW3.webp)
+- [Gestalt](https://gestalt.pinterest.systems/web/list) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/RHEty6NJXcZ9QyfSnLwTYWlAGk27btQYtBYKTxbQ4YI_ZGt6EK.webp)
+- [giffgaff design system](https://www.giffgaff.design/components/for-web/lists/) — giffgaff design system — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/RIPjn8P-wwrL7TEABCSnX4_1O5uPAa444PCbZgmCpKY_avpVM.webp)
+- [InlineList](https://instructure.design/#InlineList) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/kHHHEqCBpl-WGvR7mmoF20QhyF5CoKZeb7ZxGRPg4tQ_zhIIV.webp)
+- [Instructure-UI](https://instructure.design/#List) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/dR5plUBijGy5NhgK1SYld5uSekGrYJwMhmTGbti_VIY_Z26XNI6.webp)
+- [DescriptionList](https://jokul.fremtind.no/komponenter/descriptionlist) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/U8lIbfwo5bQaWnrGJkbKbrwy6vT4BYOUgutDoN4oJl8_ZuIlmI.webp)
+- [Jøkul Designsystem](https://jokul.fremtind.no/komponenter/list) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/GnIIqN_YlNjLhQ2-VgBWQ2MIxwThmajC6dDzwDeeThI_14RKlC.webp)
+- [Material Design](https://m3.material.io/components/lists/overview) — Material Design · Mobile, Web Components, Sass — Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/B5Ps1hf1Py8iiZSUqpbbg3hNSYGVOTmrEcZqw7o21ww_2gRs3D.webp)
+- [Momentum Design](https://momentum.design/components/list) — Momentum Design · React, Web Components — Usage guidelines, Open source · [preview](https://component.gallery/_astro/I4FfLrP6OeFRZTnBXNFnW3SHEl4eN6cJ7SGhBjTFrD8_1KsG2m.webp)
+- [List Group](https://design.morningstar.com/systems/product/components/list-group) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/Mnlb1S3fNmYWPQjF82S186RoJzsKJvcoKtX_Ndv5zqs_Z2tLtqg.webp)
+- [Lists](https://protocol.mozilla.org/components/detail/lists--default.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/7kXP-CrxxT3ByEi_UCmsfh4Qve8VFwpqaWWfEgYgZAQ_ZSkPrd.webp)
+- [Description list](https://design.ns.nl/4a05a30ad/p/2331ae-description-list) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/9jRV3LPRNhz9EJRhZA9_Jd4VbPDEWiEfuQMVC8VggYU_1KNQvi.webp)
+- [Text List](https://design.ns.nl/4a05a30ad/p/615ae7-text-list) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/u38mNHSrff6GdgaoxzICzFvsxfXPsxbXXeIS8AAelRo_2ujfWf.webp)
+- [Ordered List](https://www.newskit.co.uk/components/ordered-list/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/vwLCM3LtLJ3Fu9nprTksxbRBQsu9tKBNdROi9rZdLdg_ZR3Qe5.webp)
+- [Unordered List](https://www.newskit.co.uk/components/unordered-list/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/H66Mani8IHjMI9QoB3jZIJyenw4V6H4OHCIgVxn310k_Z1dNbuq.webp)
+- [Structured list](https://www.newskit.co.uk/components/structured-list/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/Zn4Qx7uhi0vqF7eUiSbxaFjrkEitF1neKLeEA_PrL70_11yVsh.webp)
+- [Contents list](https://service-manual.nhs.uk/design-system/components/contents-list) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/j70KXCW2XuQB6v7e9YuQDpKBgi3fagLyIyX38KaDY1w_3FEsj.webp)
+- [Do and Don't list](https://service-manual.nhs.uk/design-system/components/do-and-dont-lists) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/RigxC0cJ2u3x-VPk-XJpzVpWYFOP3iE2zyH_8p0ki2o_1cL5xX.webp)
+- [Summary list](https://service-manual.nhs.uk/design-system/components/summary-list) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/JIR9thSj2nHCo1JjvT_z4veaHd0vwmiAPIY4vlcxpBE_aCnx5.webp)
+- [Orbit](https://orbit.kiwi/components/list/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/Sv2-FaTvEkKh9cyMMRSLk-_p-f-nEAw8Vjgu0FAa36A_Z26Cerg.webp)
+- [Paste](https://paste.twilio.design/components/list) — Paste · React, CSS-in-JS — Usage guidelines, Code examples, Tone of voice, Accessibility, Open source · [preview](https://component.gallery/_astro/iciRuA249NbfVuZL_SD1MrHT8Z310gYwnFCBrKMdXNQ_Z1E5dw7.webp)
+- [Description list](https://www.patternfly.org/components/description-list/) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/wIkPciEgO7YMtYmxXGW-ImOvYjUIxkmsFSUTYvmo2ds_Z8KTFr.webp)
+- [PatternFly](https://www.patternfly.org/components/list) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/oz37sFheGzRf7nA5QQEZE9qpF6EHRxJSpls-458cJ3M_boLe3.webp)
+- [Simple list](https://www.patternfly.org/components/simple-list) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/2nsvlzwxbd1RbphTD34aqrinHbrdqgz5SvJxF2nxoWI_1dMwsa.webp)
+- [Exception list](https://polaris.shopify.com/components/feedback-indicators/exception-list) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/b8nmBcpKhH0dbVjsqtHNWai82yDLYoGzwkbc2xWToJE_Z1KT2DC.webp)
+- [Description list](https://polaris.shopify.com/components/lists/description-list) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/8vwJ4zfdg-itnMMw4zGYkDEOM51IRzf8IKZHZztW8og_ZWH5Be.webp)
+- [Polaris](https://polaris.shopify.com/components/lists/list) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/H8_A74ql0_h1fkJ16GBf4vF8FzhIVYXW4Z85tC3SGgs_Z1T2GE7.webp)
+- [Resource list](https://polaris.shopify.com/components/lists/resource-list) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/nyMBzTSG6CyzS7Vngt1XFaPFJiktqpawTuOQbSZV6WY_Z2191W6.webp)
+- [Text List](https://designsystem.porsche.com/v3/components/text-list/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/sCZeFFS2wCCQk4Hyq9rGwJ93v1jRSX8K6Nz2LfyDaL0_Z2nmU3L.webp)
+- [Action list](https://primer.style/design/components/action-list) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/tgT-ai59Zb_7k6O6kE9Dfd1LsWBiPKqevsYvBVaOgy0_1hJAhK.webp)
+- [Quasar Framework](https://quasar.dev/vue-components/list-and-list-items) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/2K2Ytkb8ioCOPhqYHH5QYVY2m0-O5AWC3GJOuX3r_qU_1NrPLu.webp)
+- [Bullet List](https://components.ruter.as/#/Components/Lists/BulletList) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/9UCs4a1UjWWoqcn44hiJQAJWZvs-HqdBz3jMXaLGuMw_ZANrHV.webp)
+- [Description List](https://components.ruter.as/#/Components/Lists/DescriptionList) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/4-bJoFcouQhPdckQxo0CWMqOw2OZ1T_LIBaj2tiFv4s_28jrV1.webp)
+- [Number List](https://components.ruter.as/#/Components/Lists/NumberList) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/E2r9NvVyPFXx3WJulwFXDpHv6WFLzz9yPKd7DmAxIsc_ZbYl71.webp)
+- [Sainsbury's Design System](https://design-systems.sainsburys.co.uk/components/list/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/5weXZePRmOIMmuWSfkpJ2Tq8gXJKsIpghwO7xgozVB4_Z1y1kPL.webp)
+- [SEB Design Library](https://designlibrary.sebgroup.com/components/list-components/list/) — SEB Design Library · Sass, React, Angular — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/Nwh8ZesTawe9kL3NrAlPMNKp5e_2V6wRHVIGQhBQ2w4_ZLlbtl.webp)
+- [Bullet List](https://seek-oss.github.io/seek-style-guide/bullet-list) — Seek style guide · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/teNcd_4usAlLVzOSGPQThj-n9mIqfDBRTypDbYzUDNc_1QMcC1.webp)
+- [Thumbprint ](https://thumbprint.design/components/list/react/) — Thumbprint  · React, Sass — Code examples, Open source · [preview](https://component.gallery/_astro/NuJXGSxni1OTQphxakdECxm_0hia36usRSliy7iy0nk_Z11oC3C.webp)
+- [uStyle](https://ustyle.guide/pattern-library/typography.html#lists) — uStyle · Sass — Tone of voice, Code examples, Usage guidelines, Open source, Unmaintained · [preview](https://component.gallery/_astro/HY0DxWSMTxUGGU4L9nT7bc0LpTnw03lpCji8zHy3BUQ_1oCyJD.webp)
+- [Numbered list](https://ustyle.guide/pattern-library/typography.html#numbered_list) — uStyle · Sass — Tone of voice, Code examples, Usage guidelines, Open source, Unmaintained · [preview](https://component.gallery/_astro/wDQjfvF7m9VVKuvMbxza4rNyEHo3qHcXLgWeGYIYMtg_Z28wXJo.webp)
+- [Ticked list](https://ustyle.guide/pattern-library/typography.html#ticked_list) — uStyle · Sass — Tone of voice, Code examples, Usage guidelines, Open source, Unmaintained · [preview](https://component.gallery/_astro/AB2rVQScttijVSQrzGq_k5bF6ttj3vCX7CCFRZebtX8_ZgKBu5.webp)
+- [W3C design system](https://design-system.w3.org/styles/lists.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/kBjJEk9o7nwF-f0w0xSav61WwMcgAKtDJI6q2RbZUS0_Z1NNG5X.webp)
+- [Wanda](https://design.wonderflow.ai/get-started/components/typography/list) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/J3XCFBwQbX5r7-cYQjilJ44ESRk1eLwECEA1e0wiMio_Z2t6D1R.webp)
+---
+## Quote
+**Also known as:** Pull quote · Block quote
+[Browse all 11 examples →](https://component.gallery/components/quote/)
+### Design System Implementations
+- [Blockquote](https://www.skyscanner.design/latest/components/blockquote/web-s5htWiTy) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/C0gp7UGSbnWtgqsgkJCLuut87bnDkur05p7xXUjn-_I_825A1.webp)
+- [Blockquote](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-blockquote) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/_HzFXpGYhLW_VVLxFNjZ5BxWlb4K5mIq44hQwmfEYQY_12BdLE.webp)
+- [Cedar](https://cedar.rei.com/components/quote) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/i_CDhH9sAfjLVIHW6BQvfK3_ugzai6f0sb7G1njNHZw_Z1D4wXE.webp)
+- [Blockquote](https://www.delldesignsystem.com/components/blockquote/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/lNHB4lwjlnZae5CLa4VO3C1Mnw1SSdxvoPnpZJc2osY_Z2u0fn6.webp)
+- [Blockquote](https://flowbite.com/docs/typography/blockquote/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/IWVJg8WjU3tUCEZBmT0wL5tyEeoJ0EfdgIuQxr6sfgA_Z2iiKr6.webp)
+- [Blockquote](https://protocol.mozilla.org/components/detail/blockquote.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/ukmX3BPTWfFpLne1PRTRk-5LqxSyVv1LcT3QdGTZj60_bmeLj.webp)
+- [Testimonial](https://britishgas.design/docs/components/ns-testimonial) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/bhPt0Hb4L4N_AmgcB7hyHKQznQPR8vNgwObMes3jCnc_ZU2HHT.webp)
+- [Blockquote](https://designsystem.ontario.ca/components/detail/blockquote.html) — Ontario Design System · HTML, Sass — Code examples, Usage guidelines, Accessibility · [preview](https://component.gallery/_astro/6WkK_GiCPBMPpLp7JiBdYe8whCkm1d97J1OsyukDntc_2quDy5.webp)
+- [Blockquote](https://ux.redhat.com/elements/blockquote/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/O7dNwKe8fIJ_rAk3obt2zYIuEIt25we0sygrHSi4lcE_fiLYY.webp)
+- [Blockquote](https://ustyle.guide/pattern-library/typography.html#blockquote) — uStyle · Sass — Tone of voice, Code examples, Usage guidelines, Open source, Unmaintained · [preview](https://component.gallery/_astro/TQ24pAt8rVLuoN1dfcssasx50aP_yvvst0XsmgYh1Vg_ZQDV7N.webp)
+- [W3C design system](https://design-system.w3.org/components/quote.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/BZOs37nLk2hwc2XNXTzIuDz1EKqXqKzzkwzoyQt2SdU_Z3awgg.webp)
+---
+## Rating
+[Browse all 19 examples →](https://component.gallery/components/rating/)
+### Design System Implementations
+- [Rate](https://ant.design/components/rate) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/V1ayqwA6NVe6XH44WYJkRmj0TaU3ZXtJwUWlJLz4H-g_1KtyFa.webp)
+- [Star rating](https://www.skyscanner.design/latest/components/star-rating/web-5Y5HQkJv) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/KLlu-pN4rRwHYBZUKyFUBXWYVAxYt4WOHLVLnDg17gg_18194B.webp)
+- [Base Web](https://baseweb.design/components/rating/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/XjG0cS2CRjttAvY_vmRUv2FBMnZXQ4bNc-EvrChWl-M_8r1yn.webp)
+- [Ratings](https://www.bbc.co.uk/gel/guidelines/ratings) — BBC Global Experience Language — Accessibility, Usage guidelines, Unmaintained · [preview](https://component.gallery/_astro/fx_JzHH67ZOdFnNF35C-F-MSYQMmwO1q25n0iI9mQq8_1FArbX.webp)
+- [Cedar](https://cedar.rei.com/components/rating) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/ozQYz3uqFA8sAglrRv6M-nTpvDdLKNa4XuH30lQic3Q_1lA2yw.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/rating) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/otBMCY97QJmaWoCnfNij-RM54TUF87PlmsxGORUpLQg_ZwnDOk.webp)
+- [Star rating](https://ebay.gitbook.io/mindpatterns/input/star-rating) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/pT_DttWUkcYkb5Tv5rsJG1eOuP74jDChzairoReJkng_Z2vh8am.webp)
+- [Flowbite](https://flowbite.com/docs/components/rating/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/n2Siv7FFBnRhbs_MmDDgv7jLyAAalpL5sGxd2WgDHuw_Z2380Xt.webp)
+- [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/rating) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/8uhCLt__xtD-vG9yDdk2smh0vqMIJP87On9mf7LfL1M_1LdzIF.webp)
+- [Instructure-UI](https://instructure.design/#Rating) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/gPb1_obUN92UD77OX8SnIthZiWt0BFIPxJLHyckFnuk_ZfXfdm.webp)
+- [Morningstar ESG Risk Rating](https://design.morningstar.com/systems/product/components/esg-risk-rating) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/CiktWMMV7ykZNUYI2Pka0Ru7Ivf0SrAvFlTx4JiQYPA_Z2jMkUd.webp)
+- [Morningstar Rating](https://design.morningstar.com/systems/product/components/star-rating) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/k_-a1-QT9HKtEDj59FdzO-H5Wo_zRdtYPOOPIONbvag_Z2kFsR8.webp)
+- [Quasar Framework](https://quasar.dev/vue-components/rating) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/qyRs0aynMYr13XD0UowcVcJ-6bRPw9np3nJI9HK6r6s_1f6DPj.webp)
+- [Sainsbury's Design System](https://design-systems.sainsburys.co.uk/components/rating/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/hO1vkQ0LT3E4k2ZhKQZlWARgwelYGyKoLECVj35xr3c_1g7d9h.webp)
+- [Shoelace](https://shoelace.style/components/rating) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/TaHjXTFjVmz87CDZoej-n-TKkAZYNQky0voeSPioQuo_Z1j86Fn.webp)
+- [Spectrum](https://spectrum.adobe.com/page/rating/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/-ZI1tBYubWIeAAPHIYdl_Il9QEk1kJa6g2Z6uL6wLWU_ZVh80k.webp)
+- [Star Rating](https://thumbprint.design/components/star-rating/react/) — Thumbprint  · React, Sass — Code examples, Open source · [preview](https://component.gallery/_astro/9yix6SGW-3WK9D3GhxtiqtktwVuEchC-Kd1Hk6eNArk_Z207R8w.webp)
+- [Star meter](https://design.wonderflow.ai/get-started/components/widgets/star-meter) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/NPyPGKowOEquwozf7uoWV8mTpUiZ_uK_URCgGxPS5Qc_Z1pGSkY.webp)
+- [Web Awesome](https://webawesome.com/docs/components/rating/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/v5qTb6QPJKtWSbJBpE8jt_y8-DNCdMgL9MYauusDUww_1gpQ7U.webp)
+---
+## Table
+**Also known as:** Data table
+[Browse all 74 examples →](https://component.gallery/components/table/)
+### Design System Implementations
+- [A11Y Style Guide](https://a11y-style-guide.com/style-guide/section-structure.html#kssref-structure-tables) — A11Y Style Guide · jQuery — Code examples, Usage guidelines, Accessibility, Unmaintained, Open source · [preview](https://component.gallery/_astro/omFHWmcLR2uiNXN-zKifd0aE8pMmVYT2d6mLjAbuT7o_2vDWR8.webp)
+- [Ant Design](https://ant.design/components/table) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/DgCiAtxHoFHU84lcRTSwLm5zhZ0Lo_5ZBv2mJgAojwc_Sqv3B.webp)
+- [Dynamic table](https://atlassian.design/components/dynamic-table/examples) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/DaMflMfjWVJzpH_iHyeUkrE7zdu2-eeNe1YW_cZ9moE_Z1Sx1he.webp)
+- [Table tree](https://atlassian.design/components/table-tree/examples) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/HvOVbwwXb9e3ZcAVohI7YJEgQzmTzPcYNMBhxx2-Lc0_ZCXBHv.webp)
+- [Auro](https://auro.alaskaair.com/components/auro/table) — Auro · Web Components, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/RC6__LQMdHNOoFum2qz8Xxs0SwZKUR7eZdtUGCDcfc4_8mBqu.webp)
+- [Backpack](https://www.skyscanner.design/latest/components/table/web-0i0MzMkj) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/lmPdKpLGc0H4mtldjaBYQUDMBoujy-nRtanjtSIHRHE_1719Ds.webp)
+- [Data table](https://www.skyscanner.design/latest/components/data-table/web-S6OeN67N) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/ijEnsp1pkWov5AeDaaqigSOQRgMbN0-ZWTzpsB0T1_o_1tQmUP.webp)
+- [Base Web](https://baseweb.design/components/table/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/EVbBDGLHvnPlKriMNpeUutGcELkTVMR-g8GnNX-BI70_Z1XYS9C.webp)
+- [Table-Grid](https://baseweb.design/components/table-grid/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/kv7oXmIk2QIn2__B0-Fk623y7WavgmnaB4h2OlE11yM_Z2u17Xk.webp)
+- [Semantic Table](https://baseweb.design/components/table-semantic/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/4JTXR5bJF8T37iGvt2H2-WRc2U6JdQavKzyzrkDT2aQ_ZwQXfN.webp)
+- [Bolt Design System](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-table) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/OUW5S9q26tYDvkldmnhhDY4fp-3G3Exnbau3J1gXL3I_1QEj1.webp)
+- [Responsive tables](http://design.brighton-hove.gov.uk/website-pattern-library.php?p=responsive-tables) — Brighton &#38; Hove City Council Website pattern library — Unmaintained · [preview](https://component.gallery/_astro/c3wnArCbW0oTYGK_jdnbvgJqYP1fWkhnOQUdmNzat2o_ZtX0fH.webp)
+- [Bulma](https://bulma.io/documentation/elements/table/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/PyhLtW-e5CbI5-bIKVf_mB-knJxwJYYZP3mxgFtF4Kc_2lxgFo.webp)
+- [Data table](https://carbondesignsystem.com/components/data-table/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/4MRLsoJWFTJqpL2GYXACv6yRjKa0AOi91143Pg_Bfns_ZXIDJl.webp)
+- [Structured list](https://carbondesignsystem.com/components/structured-list/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/O5r27bpehn-Gi5TlRC3rX3XaChIa-6hEpnepOotPV1k_Z2ei7EJ.webp)
+- [Cauldron](https://cauldron.dequelabs.com/components/Table) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/CWTGSK4gfCG36zZ7PbrRdyvh0cx2lm5-xUcVRPXHW-g_Z1djcqa.webp)
+- [Cedar](https://cedar.rei.com/components/table) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/fjsDkxQ5hNkwMrmBCfTG4sgN5f0sgn06CaCFRQDMul4_Z1r8qEj.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/table) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/9rv5IguWUrA0ftMHPTxBoReg55br9gdmZWuVxFKIRr0_Z1GyYzM.webp)
+- [Datagrid](https://clarity.design/documentation/datagrid) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/T07mlvY8JLH-V8Pyx767G7agjE2k8j9wnfZSEzD2iVs_15muuC.webp)
+- [Clarity Design System](https://clarity.design/documentation/table) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/24_PnPpbbwc5br_fFE9Efuwl7kO_NnyP44_ATk9uDUQ_1rl2gu.webp)
+- [DataTable](https://crayons.freshworks.com/components/core/data-table/) — Crayons · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/redm3LoVsRmqIkUx4MHVbIHTjTMdgle607Z3M0jHPfM_2317kz.webp)
+- [Dell Design System](https://www.delldesignsystem.com/components/table/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/D4zQZZ-9jCi0mOjFZ-nwhqtsjlnMwAsg2_2CZfkRQrc_2dzcYx.webp)
+- [eBay MIND Patterns](https://ebay.gitbook.io/mindpatterns/structure/table) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source
+- [eBay Playbook](https://playbook.ebay.com/design-system/components/table) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/YCfqNe5hLwoaOnePxYeubnRn3sCiVwi1afFVYJwAJtI_1VXzbD.webp)
+- [Elastic UI framework](https://eui.elastic.co/docs/components/tables/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/i1AgPmFcPMDhNhXDH_6A9yDWH7GKg8KAFJXjnrqg72s_Z1QUyit.webp)
+- [Elisa Design System](https://designsystem.elisa.fi/9b207b2c3/p/1592f3-table) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/87pvay14AGBK6bLIOFKMxjv3AO8iFbfVZPLRmg-xRuQ_ZHK1yK.webp)
+- [Comparison Table](https://designsystem.elisa.fi/9b207b2c3/p/112522-comparison-table) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/wB-jX5aa6cutNbbDF-7MbScE1RV8j8a6UmQ_G_bKsZU_efl8k.webp)
+- [Evergreen](https://evergreen.segment.com/components/table) — Evergreen · React — Open source · [preview](https://component.gallery/_astro/H7HU_9Lh_i-JhjLYIEBfATZDvV-YIj4TEHyWwfXO8Aw_Z1UsQ9m.webp)
+- [Flowbite](https://flowbite.com/docs/components/tables/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/ZbbFhIrCYXIzGk0Rw-EuhNFns4I1XQ4gpEgvdQQKyeU_mAE54.webp)
+- [Forma 36](https://f36.contentful.com/components/table) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/ciFV-SdrDrB27mywF-vvb0Q8M2iQKhc7jWiWWh3-nJM_Z1sVtmR.webp)
+- [Geist Design System](https://vercel.com/geist/table) — Geist Design System · React — Code examples · [preview](https://component.gallery/_astro/RXpDgzm5lm16vit9C384Y3D-SgTPTo8Wqlyje5bLJso_1mMS7x.webp)
+- [Gestalt](https://gestalt.pinterest.systems/web/table) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/_vdM8B_bffexkfzUoVXmtJO6ISRLQKo_xbyv034U8uw_jNM5S.webp)
+- [Striped table](https://www.giffgaff.design/components/for-web/table/) — giffgaff design system — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/3V_48lZ3SURTKsyiqw1g0tg6vv0r-bl1HrnoFUfvrSg_fKNNL.webp)
+- [GOLD Design System](https://gold.designsystemau.org/components/table/) — GOLD Design System · React, Sass — Code examples, Usage guidelines, Accessibility, Open source, Unmaintained · [preview](https://component.gallery/_astro/DNwQFHaTxa8ZReRrrYdNJA9shtAfQghR3Z3nq_5sKs4_1PNGfH.webp)
+- [GOV.UK Design System](https://design-system.service.gov.uk/components/table/) — GOV.UK Design System · Nunjucks — Code examples, Usage guidelines, Research, Open source · [preview](https://component.gallery/_astro/ZNH5psQKZROvyffoh2JDHXT9STfW7iAvs5wiidFwmYo_Zqxo7k.webp)
+- [Grommet](https://v2.grommet.io/table) — Grommet · React — Code examples, Open source · [preview](https://component.gallery/_astro/RU7b7WlgTBmGXpfhiliP15tGWPlW5ONwG7Zfj-W-BFI_h5Mml.webp)
+- [DataTable](https://v2.grommet.io/datatable) — Grommet · React — Code examples, Open source · [preview](https://component.gallery/_astro/BKxhj38T0WAyAUtXe3Ng9r4S4xu_imJ5YgOUs-8atFA_1MURGx.webp)
+- [HeroUI](https://www.heroui.com/docs/components/table) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/aKbPQGxn32gG-8c6KGzmaW--FAsFwR_IOW5pf8PUpeE_Z2brJ2o.webp)
+- [Data table](https://inclusive-components.design/data-tables/) — Inclusive Components — Code examples, Accessibility, Unmaintained · [preview](https://component.gallery/_astro/eNIMfvEnB55E1TFmMnzqr5z9KqmlPgn8TQuqrMG9HzM_l58yj.webp)
+- [Instructure-UI](https://instructure.design/#Table) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/pOY5E6NvNHfGxIcAv3ESrEprQHo1X1aNxPA3SbjwJrc_11oHVh.webp)
+- [SummaryTable](https://jokul.fremtind.no/komponenter/summarytable) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/MkieAtgJcsu43NMUrpbdM-30nljPYdSo90_XPfelY78_Z1qHQXT.webp)
+- [Jøkul Designsystem](https://jokul.fremtind.no/komponenter/table) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/XOUImh1ue-dHtlx0m7gLkzjxYamzyDqvwh4RcitCpqI_TmzEI.webp)
+- [Data Table](https://www.lightningdesignsystem.com/components/data-tables/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/5bZ09rC3wki6bQStoS8Qn0kYZ9tErMThmRjriRAPg6I_86ecV.webp)
+- [Data table](https://design.morningstar.com/systems/product/components/data-table) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/JF34BN_pUbBTQoBK_hLxiQm_UyrWFzeTfYbB8WdT3Cw_ZbWKbU.webp)
+- [Mozilla Protocol](https://protocol.mozilla.org/components/detail/tables.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/0UA3VP4Zz6ctTqV4Kt1FWrjwLtErMA9J7ynvfsRKRKU_18N6bs.webp)
+- [Data Table](https://design.ns.nl/4a05a30ad/p/60f17e-data-table) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/eZ2NuXfuv2RkP3DgOmfh4xhEEnY2_nJLj5bPRnvm2n8_iI6ef.webp)
+- [NHS Digital service manual](https://service-manual.nhs.uk/design-system/components/table) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/cLPcVuioyPWzytC4L05JLqx74Xsme-qkVbOtfmIczG8_Z25j0gO.webp)
+- [Nord Design System](https://nordhealth.design/components/table/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/UkrkCPES41c80r7v38rA-qhKZysZraf6tN-dt9Y_Rwc_Z22FGGX.webp)
+- [Nucleus Design System](https://britishgas.design/docs/components/ns-table) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/dqzuL0B9btJQ49ncUOotn_tCgQIH4OjrRkFU5hRmHyg_Z22Y5ai.webp)
+- [ONS Design System](https://ons-design-system.netlify.app/components/table/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/1euW8nDPem9M8uo1umiUWhXT_s4NVRoOkV5OGP_bcQA_Z26QbjJ.webp)
+- [Orbit](https://orbit.kiwi/components/table/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/i9ViGzanYm38TNpWTcoboDRg20eNpGgj5dEfnfYtowE_Z2bozaw.webp)
+- [Pajamas](https://design.gitlab.com/components/table) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/L6_oXYZOiEtyIvv7HvFa8qR5fv24BjrfZJ2aQOoXrqc_Z1whO5.webp)
+- [PatternFly](https://www.patternfly.org/components/table) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/SnKk1BfQStCtIkDKYCOZfq_5ea9HdoSThrOqbJ7t8iE_13rmq7.webp)
+- [Data table](https://polaris.shopify.com/components/tables/data-table) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/zpdOnFPSzfqzrXATECr15AUzG3Moh7H-Q6CogCoB-OA_18FWzr.webp)
+- [Index table](https://polaris.shopify.com/components/tables/index-table) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/79ukE3g0q-Bz5pTJE6Nd9hOww-BXQLB3wWydvEzaX4c_2a60PV.webp)
+- [Porsche Design System](https://designsystem.porsche.com/v3/components/table/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/JPyAYRMSlD20_ACySqgWUN6jEh3Rq9-LuYY5KkMufD8_i6b1H.webp)
+- [Data table](https://primer.style/design/components/data-table) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/1AyKKZPuH95-0fmDO13QM-jZqYD1lBcgR9bnXV7rYwI_2lzzL.webp)
+- [Markup table](https://quasar.dev/vue-components/markup-table) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/DGFOM2cpInzQFiEj1-07z52x6zCMVIsTKC4TmwCn0Yk_1qw9zt.webp)
+- [Quasar Framework](https://quasar.dev/vue-components/table) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/GD-tRlQ77FhrU-B0405UVEtTs2UQj_Q_IphMkfuTDq4_ZKu9Gu.webp)
+- [Red Hat design system](https://ux.redhat.com/elements/table/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/gr05wQ_w6S3l9j0LEb_sbAjTWVy-c_W0Ou9SbxRiPqM_f4DAw.webp)
+- [Ruter Components](https://components.ruter.as/#/Components/Interactive/Table) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/7R02VPn-X8y9gzBwmrIebgfb7VWSHuZFDpVYQb7er-0_Z3GFGn.webp)
+- [Sainsbury's Design System](https://design-systems.sainsburys.co.uk/components/table/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/tDnzKN_4Vh7tsBxv-z2DQOUK-wmsRgVDKG3xTplAob4_Z1zx8L4.webp)
+- [SEB Design Library](https://designlibrary.sebgroup.com/components/table/) — SEB Design Library · Sass, React, Angular — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/Wc8gQiBZnQM3EbB9U5m9y2n2vDpEPzxRyj5130KMJ4w_Zc6yvS.webp)
+- [Seeds](https://sproutsocial.com/seeds/components/table) — Seeds · React — Code examples, Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/loqDgrGQKjAbymvzbhbUFpo9uvsqR_3Ktd5txo6DqD0_1Uv7NQ.webp)
+- [Data Table](https://ui.shadcn.com/docs/components/data-table) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/eUjZbh0eoEfpTGdXe4fralF5v_5oCubldG51uHIXH2U_ZQ0bVw.webp)
+- [shadcn/ui](https://ui.shadcn.com/docs/components/table) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/kLq_yr80wrxu0HaDS-9WALaggSuyOH-p5Fj4sRtPIEs_2hXEIY.webp)
+- [Spectrum](https://spectrum.adobe.com/page/table/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/9XywP1BgxEWY3eE0f50KHYAUsf3smGZV1-Uq6NjEj2U_EY783.webp)
+- [Stacks](https://stackoverflow.design/product/components/tables) — Stacks · Stimulus — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/pIwqrEWKaAKCTw5ZS_V4uW9R6c6QZVA3W43vdeVsZ50_25aJyp.webp)
+- [United States Web Design System](https://designsystem.digital.gov/components/table/) — United States Web Design System · Nunjucks — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/bzn9USNAGlHjY7ARBvZ7KQPGo-UJY4AurotVqe0GIdg_1mcC3W.webp)
+- [Visa Product Design System](https://design.visa.com/components/table/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/Wn1f3I5EbOYvio7TrEhuz8uCv-0ak55gxr7XP5xojcg_Z2wGLAA.webp)
+- [W3C design system](https://design-system.w3.org/styles/tables.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/5kCU8f1ifTkaTQiA8pkxtodMU-FUQBwSovJW6cUX3D4_ZwqQQ6.webp)
+- [Wanda](https://design.wonderflow.ai/get-started/components/layouts/table) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/ZMYq93QN2IrY5PLxvU2vRD9Y156v2oQb9E_6dvbAYh4_NG6HD.webp)
+- [West Midlands Network Design System](https://designsystem.tfwm.org.uk/components/table/) — West Midlands Network Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/tcUEwPefg9pBsDowZm9lX1OQCos2xcHQrwRdReAuK9E_tgJp7.webp)
+- [Workday Canvas Design System](https://canvas.workday.com/components/containers/table) — Workday Canvas Design System · React — Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/cqW2QjENGN_f-eaMqV9uFmLS8nmjlBpS8ECCcE2Fm9c_1n8BL5.webp)
+---
+## Tree view
+[Browse all 14 examples →](https://component.gallery/components/tree-view/)
+### Design System Implementations
+- [TreeView](https://jdan.github.io/98.css/#tree-view) — 98.css · CSS — Code examples, Open source · [preview](https://component.gallery/_astro/TXS0uIo_Z5vO-q7Y5nz-K1Hf_BbAUAKZLqhajZaC_yk_Z1dzLaP.webp)
+- [Tree](https://ant.design/components/tree) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/e3h7UQGRHVozrlknV-VZ8pTa1GbLe07KndKz3zz3LiQ_Zwdnhl.webp)
+- [Tree View](https://baseweb.design/components/tree-view/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/hWryNM2fmKrAi7R9zguBRInMqb1_8BS78QNKmtzehgs_Z1AmW5r.webp)
+- [Tree](https://blueprintjs.com/docs/#core/components/tree) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/gt2f3kxlA7HjEHoclmZti_CADFFeh7J48KZ-zaoWX3k_Z1SNlyk.webp)
+- [Carbon Design System](https://carbondesignsystem.com/components/tree-view/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/3km6_vQ3kVTFofJG5hqZAbenRa8qCg7Xp-eCtZDLPws_UF3l9.webp)
+- [Clarity Design System](https://clarity.design/documentation/tree-view) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/jC4UBHF1jQwrGV76RnTGX7oEZg82LhsdvUnYdqkxd0s_1CTsES.webp)
+- [Elastic UI framework](https://eui.elastic.co/docs/components/navigation/tree-view/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/IpVzS_OTQUAJDZC0Kz9AI4IxIgFEWjaLgQc7ZPpFOxE_Z1XRa3C.webp)
+- [TreeBrowser](https://instructure.design/#TreeBrowser) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/JBlB1ZKa47ebvxuBcnCqOs-8_CVdP7kQFHN36GQI7WI_3YJjd.webp)
+- [Tree](https://design.gitlab.com/components/tree) — Pajamas · Vue — Usage guidelines, Code examples, Open source
+- [PatternFly](https://www.patternfly.org/components/tree-view) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/YdRfWorSMbLs1mPkEEXi8Ojre5P0ovvRm3bAXDHL7HU_G26hV.webp)
+- [Primer](https://primer.style/design/components/tree-view) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/RxzuYPUvJhgsXFzrhnIb1K6HToI_p4zU1B_960z2fHo_1yRmiM.webp)
+- [Tree](https://quasar.dev/vue-components/tree) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/b8zHNvPKWp4X92xT9YbTcm8FRS_IVFX6isT_5ylFQJ8_ZMkOM.webp)
+- [Spectrum](https://spectrum.adobe.com/page/tree-view/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/TWWIL-dZe37VyvfnDxP9BFFEbZ0IpNCtrDqLayoZvAg_Z28Iw3G.webp)
+- [Tree](https://webawesome.com/docs/components/tree/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/AXy-Mx7cshfEbc99lAGkeZDM4g5JsBZpbcpvFjdZRmA_ixFl3.webp)
+---
+## Video
+**Also known as:** Video player
+[Browse all 15 examples →](https://component.gallery/components/video/)
+### Design System Implementations
+- [A11Y Style Guide](https://a11y-style-guide.com/style-guide/section-media.html#kssref-media-videos) — A11Y Style Guide · jQuery — Code examples, Usage guidelines, Accessibility, Unmaintained, Open source · [preview](https://component.gallery/_astro/onYAQkrWPEEa8aq2sldrLDnyBHK5Xe80jXzMHq9FCqI_yQ71S.webp)
+- [Video player](https://playbook.ebay.com/design-system/components/video-player) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/k2bF9QVm2xIzBabllESkBcbTZ7xsh0B-KLISg4l-xt0_ZsIyBV.webp)
+- [Flowbite](https://flowbite.com/docs/components/video/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/iBpBKLgfsoQF1KfXTtK7F93sFMO2vZfhg5eMpkBYCM0_ZQIJOJ.webp)
+- [Gestalt](https://gestalt.pinterest.systems/web/video) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/zr8n89xjz-RiLuaBJ-_4NhXNens3oG3xPVdvjIjAa08_Z21hKqQ.webp)
+- [giffgaff design system](https://www.giffgaff.design/components/for-web/video/) — giffgaff design system — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/4keK2wIgO60xE041H9omQRtGK39PlSXYGGri_4tUiTY_20wrVd.webp)
+- [Grommet](https://v2.grommet.io/video) — Grommet · React — Code examples, Open source · [preview](https://component.gallery/_astro/hfLp1GQKj1kXx0F6faVK5mqEqOiiNBh2vqbEaLNXLZk_1WBhyp.webp)
+- [Mozilla Protocol](https://protocol.mozilla.org/components/detail/video.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/yKdMURlaZLd5kfKX_diRCGFf631j2nE9aBopCz0QP1Q_Z1aAVL9.webp)
+- [Video Player](https://design.ns.nl/4a05a30ad/p/02bae6-video-player) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/z7k2qx_KPG_MJulRyuF7rV3fcotsfWGlfb9PAxLLIos_12uMfd.webp)
+- [Video Player](https://www.newskit.co.uk/components/video-player/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/ofBD1gbL0aYXcHWHBC3uZRPokxD4I7lsVW5iYYxgTSQ_Z2jVhve.webp)
+- [Nucleus Design System](https://britishgas.design/docs/components/ns-video) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/UDtszH0mJhFMNSOdqdMonGatHYI_0dVqo5BtCHfaUmk_Rjmfz.webp)
+- [ONS Design System](https://ons-design-system.netlify.app/components/video/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/OkWz7A2nmh2VZbmxfe9P5YRuD1tSjP_E_AJDJ0JbIa0_ZbnzWr.webp)
+- [Quasar Framework](https://quasar.dev/vue-components/video) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/WYq9Ij6zGSVzn8L5Pcjr5a6uwFOua0Xk5LcERTe1qMU_ZrEsy0.webp)
+- [Video embed](https://ux.redhat.com/elements/video-embed/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/uHSFGE_-ti1QwPgoNNzx3-ulgP3ZahYZ55n7eDzQhhY_ZixbXt.webp)
+- [W3C design system](https://design-system.w3.org/components/video.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/OnzYijSNldC07-bWNmbzmpWGMfnQsDlG4jn7x8mYzGA_Z2oTBCz.webp)
+- [Animated image](https://webawesome.com/docs/components/animated-image/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/crf-vag5TWVhCif11-6vd_TRyq6r1nEmZE9Ef3I554c_Z23dohJ.webp)
+---
+*Data from [component.gallery](https://component.gallery) by [Iain Bean](https://iainbean.com). 663 examples across 14 components.*