pi-design-deck 0.2.0 → 0.3.1

package/skills/design-deck/references/component-gallery/components/layout.md

@@ -0,0 +1,167 @@
+# Layout
+
+Components for structuring and organizing page content.
+
+---
+
+## Footer
+
+[Browse all 19 examples →](https://component.gallery/components/footer/)
+
+### Design System Implementations
+
+- [Duet Design System](https://www.duetds.com/components/footer/) — Duet Design System · Angular, Vue, React — Code examples · [preview](https://component.gallery/_astro/dGkkp5QY0Jyjigr_S4I1CQj0YZ3CdygVyluX-MeWt0g_2n3Wk.webp)
+- [Elisa Design System](https://designsystem.elisa.fi/9b207b2c3/p/433770-footer) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/-Jq-DX5Mg5mvCIH_F4nIMweogpl3ws--CcwNBbp1a_0_ZOvCF5.webp)
+- [Flowbite](https://flowbite.com/docs/components/footer/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/Nt35UMOLh5xonDCJfG_lwjyKOZnTwAbRWechj94kdnk_12uVdd.webp)
+- [GOLD Design System](https://gold.designsystemau.org/components/footer/) — GOLD Design System · React, Sass — Code examples, Usage guidelines, Accessibility, Open source, Unmaintained · [preview](https://component.gallery/_astro/dUgAjgw152EEDd9VT99q4kCFMrqvJqOorERnnBhxUBs_6tL4Q.webp)
+- [GOV.UK Design System](https://design-system.service.gov.uk/components/footer/) — GOV.UK Design System · Nunjucks — Code examples, Usage guidelines, Research, Open source · [preview](https://component.gallery/_astro/kXUSyYjLkHLPK9D2a3mr0DqFbMiBwMOd61aTNqMXXBM_2wGnJK.webp)
+- [Helsinki Design System](https://hds.hel.fi/components/footer) — Helsinki Design System · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/2HJ5sbDDzF18vhILAjUDdZ5r9gclMqfW-Ovet5V9n6A_ZeQk7z.webp)
+- [Mozilla Protocol](https://protocol.mozilla.org/components/detail/footer.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/PfgsdCgEqtIgOdEPLEdN9tghamWZgIgFAv-a-pBshZg_Z1EQ43q.webp)
+- [Page Footer](https://design.ns.nl/4a05a30ad/p/84f7ad-page-footer) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/vWDRSaG2PrwnkkwbZseQGrIzpySltl3K-mgJtXm8Vxg_12xqq1.webp)
+- [NHS Digital service manual](https://service-manual.nhs.uk/design-system/components/footer) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/KilpraXIvwLTnNk0vM3XMoB95oza44puOsofJqtdQ3g_Z22XJBq.webp)
+- [Nucleus Design System](https://britishgas.design/docs/components/ns-footer) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/VFTzsyyyarzzsTXISxNdJYBg_ygsr58RiPPd9ojBm-4_20ly9l.webp)
+- [Nucleus Design System](https://britishgas.design/docs/components/nsx-footer) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/_SKofs1fwfPr0KtjBmrQhTWylmOo-3hbDzPddOxYC6o_1A3tEt.webp)
+- [ONS Design System](https://ons-design-system.netlify.app/components/footer/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/kF5Gg9GWAPW3J5Czr9UBb__UVg9BL0O7BlCk9GKLyiE_Z2rHliF.webp)
+- [Pharos](https://pharos.jstor.org/components/footer) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/m-k-BNlHiu5qMiUEBLeRIe9MfWkT6hYnTbnnbb8loBU_1mJL5W.webp)
+- [Red Hat design system](https://ux.redhat.com/elements/footer/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/dWbMkz9wyJhws9nBSA1YD8FoX7uL1PkBus1CMCr33TI_Z9cj7n.webp)
+- [Page Footer](https://components.ruter.as/#/Components/UI%20Shell/PageFooter) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/PcTS80Vfk8Zpux1-4g9Dq8Ent970az7sTcmoKMFobSg_Z5pAsW.webp)
+- [Sainsbury's Design System](https://design-systems.sainsburys.co.uk/components/footer/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/-hynekP6W8vSzzW286aMdyehQ6aBr6qusN26H3ztdbQ_1omO22.webp)
+- [United States Web Design System](https://designsystem.digital.gov/components/footer/) — United States Web Design System · Nunjucks — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/m-1CnIQRuOB18FQfTxHk7GrgiLZ5-vlduurjx7n5HNg_2ipskz.webp)
+- [Visa Product Design System](https://design.visa.com/components/footer/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/cqPL8IFlGKcfUrKSe_HzqiI4sgZp_05V5S69jnQzXJ0_1IkybS.webp)
+- [W3C design system](https://design-system.w3.org/components/footer.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/1vcfYhGRdJIgRq1aVbQelA5JuQc1QlPVrtJvGTms5rE_ZMkmnc.webp)
+
+---
+
+## Header
+
+[Browse all 41 examples →](https://component.gallery/components/header/)
+
+### Design System Implementations
+
+- [Page header](https://atlassian.design/components/page-header/examples) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/HDfTD2cTik1EtW71rGMsK_RRklQ7MmxvW3eN5uYV-cc_Z1EBfy4.webp)
+- [Section header](https://www.skyscanner.design/latest/components/section-header/web-NtxldMJ6) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/ZxLoKH9LKX7PHd_Wp5l4e35QwoX4h_9IfrlGm5o14dQ_l4pgE.webp)
+- [Mobile Header](https://baseweb.design/components/mobile-header/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/VYaxWZBu7treE-dggNu0TxLuqZIu-JFGklb9NVJkTLg_Zo3T1n.webp)
+- [Masthead](https://www.bbc.co.uk/gel/guidelines/masthead) — BBC Global Experience Language — Accessibility, Usage guidelines, Unmaintained · [preview](https://component.gallery/_astro/fSiI8NtdWtj6ggRR0hH1NzFg-cm5lbbcdAekSpI1pfI_Z1IdzqN.webp)
+- [Page header](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-page-header) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/BaSz_p3YTwaxWqXBHwnYCInig07UHd1H2QiZ-jDZXPE_DFaUl.webp)
+- [Topbar](https://cauldron.dequelabs.com/components/TopBar) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/M9p8N3rd338AIjPTsGBGHGA3V96MT_Mz8HltyLOuEqI_ZojbDU.webp)
+- [Clarity Design System](https://clarity.design/documentation/header) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/vxjGjK8X8O-2ENpdirSk9OqAglEH0unZZJhnqXgsB4A_t1C4r.webp)
+- [Elastic UI framework](https://eui.elastic.co/docs/components/layout/header/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/mKNIb6FriwLbYVd7mUCMbf_zmfdoALLgVa4ktYiBJhY_1fy1ye.webp)
+- [Header (Navigation)](https://designsystem.elisa.fi/9b207b2c3/p/61419a-header-navigation) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/ao2ogbC5D3pvwY4dUCHv3FdPVPkTCAJzAAW57kFfsK8_kKUk8.webp)
+- [Navbar](https://flowbite.com/docs/components/navbar/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/eRDU8Ppr-rqxTB8M015zAynVm-Idjy2rSeiZLCRbIlU_Z1vLYzk.webp)
+- [PageHeader](https://gestalt.pinterest.systems/web/pageheader) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/Id06wAK52jEY5NKIvS6OZ2xx8qNyD9gn-OJ7Rd5KKzQ_2pPz8A.webp)
+- [GOLD Design System](https://gold.designsystemau.org/components/header/) — GOLD Design System · React, Sass — Code examples, Usage guidelines, Accessibility, Open source, Unmaintained · [preview](https://component.gallery/_astro/YplMXiwCljZlqtiywL1umV4gCNXAHa3_FS3R8FQsDz0_Z2taNGj.webp)
+- [GOV.UK Design System](https://design-system.service.gov.uk/components/header/) — GOV.UK Design System · Nunjucks — Code examples, Usage guidelines, Research, Open source · [preview](https://component.gallery/_astro/fzo7Au7Gruzq8vaNd-LOj82-qXwRwVvzfVkxEXKjxis_Z10WiGk.webp)
+- [Navbar](https://www.heroui.com/docs/components/navbar) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/dqgGnDzh0qI6H2Kb_E7DMNAyThBSMMJMe8hnGPVV_ow_rqiyr.webp)
+- [Global Header](https://www.lightningdesignsystem.com/components/global-header/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/wYsZFwplny_4_mt7rfYvRaltCot4BMKWNEJOWLCt1w8_ZU7xyI.webp)
+- [Page Header](https://www.lightningdesignsystem.com/components/page-headers/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/tfViXWm8xuHGELp_nIUgB4Z3oP1x-Xl8qlfE7Lz2J0o_2gYaqj.webp)
+- [Top app bar](https://m3.material.io/components/top-app-bar/overview) — Material Design · Mobile, Web Components, Sass — Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/etVv7AKv4_jk58CvlKgERr-xiM3pkJBKyQvnpV7Mml8_ZtTDXw.webp)
+- [Application Header](https://design.morningstar.com/systems/product/components/application-header) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/XJwTEpdb9yUp65kv6yODeaMGi4KVPW3QJ0Gvov_4CC0_1S9Qp5.webp)
+- [Page Header](https://design.ns.nl/4a05a30ad/p/619433-page-header) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/hjpUDawn7Y1M5EUfpdZj5WU4hiif212b5Jq-zCh1XGA_bdmU0.webp)
+- [NHS Digital service manual](https://service-manual.nhs.uk/design-system/components/header) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/41gSLcZHvo0AuzNhnudi2CFgPN-OmpNm5M3U1uhm9F8_2vaMLw.webp)
+- [Nord Design System](https://nordhealth.design/components/header/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/xkfhImw-b3pmWTSaQgtu924OFQ7wAGHhHIu1WaXRoL0_2fv5tP.webp)
+- [Top bar](https://nordhealth.design/components/top-bar/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/mI2Yz_g5pKWmAk_IaS01TklNTfA_zf7snznogtdIJKE_Z10RCUn.webp)
+- [Nucleus Design System](https://britishgas.design/docs/components/ns-header) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/wtWtJ6PIiqFuHzLzYniF_fSB3RPtGpuRUlbjVDHJN-Y_2fQbzN.webp)
+- [Nucleus Design System](https://britishgas.design/docs/components/nsx-header) — Nucleus Design System · Web Components — Usage guidelines · [preview](https://component.gallery/_astro/8ZzOwftYnFuWDlXdWcGzBl5yVP07iY0d3C5KhUpsP8A_1rd6nv.webp)
+- [ONS Design System](https://ons-design-system.netlify.app/components/header/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/bb2Gv57Td2KQDluwioQ2voVD3sQ9PMo1smOGLTKXokA_1eTvIm.webp)
+- [Ontario Design System](https://designsystem.ontario.ca/components/detail/header.html) — Ontario Design System · HTML, Sass — Code examples, Usage guidelines, Accessibility
+- [Navigation bar](https://orbit.kiwi/components/navigationbar/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/ELUqImxh7zYFWBearqjcHF6NkRA-m2yBfRdfL8NUp6U_4enax.webp)
+- [Masthead](https://www.patternfly.org/components/masthead) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/xSjmzTcOUMyVZ8yqIWWY3lyaM72g637xmI-XeMawPzw_ZuaBwY.webp)
+- [Pharos](https://pharos.jstor.org/components/header) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/dioi53w2SX6uQ-72F5hLkN2clWh6n-9zh7uoOOF7y-8_1qJFI9.webp)
+- [Fullscreen bar](https://polaris.shopify.com/components/navigation/fullscreen-bar) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/0HZo2cMUbnF4-bev7U5-IqPOIkXYFT8xSjMzsLw24GQ_YS3h8.webp)
+- [Top bar](https://polaris.shopify.com/components/navigation/top-bar) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/9zzT81ywkMH4BPLmtbfh9yjntq_XLCzenb8hNrttMZo_1vB4D6.webp)
+- [Page header](https://primer.style/design/components/page-header) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/zvJZwigKCDaQaXJoOzOmXL1FX8ekKOpHNr7tj2zLo0Y_Z1HVltf.webp)
+- [Toolbar](https://quasar.dev/vue-components/toolbar) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/EEOKhQ8uZ9ks8wNQMZLy0SCNXqw4NM4kfY7SzLlWpyU_ZGmhGJ.webp)
+- [Page Header](https://components.ruter.as/#/Components/UI%20Shell/PageHeader) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/OIhWHFfRjWOBp6ZDBEUda-SnLqsOG7W1EjjW3Av9Gmg_Z2coPwr.webp)
+- [Sainsbury's Design System](https://design-systems.sainsburys.co.uk/components/header/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/-j0qGZAC_Es4tLmYKHyawq2Wg_FptrXK3-5a-C4km3w_Z1q5wyu.webp)
+- [Spectrum](https://spectrum.adobe.com/page/headers/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/1sXiJMUdDrxupM4W2U-kRzhjR_zcWEgESKxMiQMYHwM_Z1Pb9l8.webp)
+- [App Bar](https://www.subzero.axis.bank.in/components/app-bar) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/zgzAE36MibNiBCeHJRIYJjsPFRgh9CxDmg-Vt1yk14s_Z1oDGsk.webp)
+- [SubZero](https://www.subzero.axis.bank.in/components/header) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/ESwJ5C3EBGm0op4ya3kxVFLxT1TiiQ_EIHIs6qp-KL8_Z1x2UDe.webp)
+- [United States Web Design System](https://designsystem.digital.gov/components/header/) — United States Web Design System · Nunjucks — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/QawESBHX5z51ILli4LVKAuF1QvBOj8DDjq7qD4w2ea8_Z2bC7EW.webp)
+- [Top app bar](https://design.visa.com/components/top-app-bar/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/Et1as-rlb8S1q03XB4aekM6uYiQmUgazgCIlrH4arVI_ZJcBHb.webp)
+- [W3C design system](https://design-system.w3.org/components/header.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/05yK4f3g9takFjzaEPdvsCRx2OSsEKUs1HsQVwJX2Gw_Z1p805G.webp)
+
+---
+
+## Hero
+
+**Also known as:** Jumbotron · Banner
+
+[Browse all 9 examples →](https://component.gallery/components/hero/)
+
+### Design System Implementations
+
+- [Bulma](https://bulma.io/documentation/layout/hero/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/QYTrh7l7qQ2nq0wesqcQN9HtUUV-J3W3oLldY8ieD5g_210cjb.webp)
+- [Hero Area](https://www.duetds.com/components/hero/) — Duet Design System · Angular, Vue, React — Code examples · [preview](https://component.gallery/_astro/QvcSKUaTA7f7uzwb4INOlYMIo4TlRcqbN7-bjydb1BE_qBuHV.webp)
+- [Elisa Design System](https://designsystem.elisa.fi/9b207b2c3/p/2044c3-hero) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/KrVxMr5Tum9u3nom8YM5YhC2wDirJ4lFWAcsLUvuyAI_Z1LFRSc.webp)
+- [Jumbotron](https://flowbite.com/docs/components/jumbotron/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/wirNbIrRx13PXKENE-ra4p4kCAJIyeNCSbsPt-YtdOc_2bHFIQ.webp)
+- [Masthead](https://www.giffgaff.design/components/for-web/masthead/) — giffgaff design system — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/wkqOE5LdS9QF8yZPO_Tu_wdyheD9W39fnzI81mOLJHM_ZdWogR.webp)
+- [Nessie](https://design.ns.nl/4a05a30ad/p/853b22-hero) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/60G5A_BdFO3ckio_H5oAZowfuIuv1oNIcRX73UtmB5o_2cgxmT.webp)
+- [ONS Design System](https://ons-design-system.netlify.app/components/hero/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/PpA1OBzjBwjiyeJTdlZQqN5CUASjOvrBNXBFd-Wz86k_ZnzD2Y.webp)
+- [uStyle](https://ustyle.guide/pattern-library/components.html#hero) — uStyle · Sass — Tone of voice, Code examples, Usage guidelines, Open source, Unmaintained · [preview](https://component.gallery/_astro/5GiGlxGa5VMonm0EvygmD7sD7seTK75_uHyahh61AAY_Z177Ooc.webp)
+- [W3C design system](https://design-system.w3.org/components/hero.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/FuA6Dyi-YVgcNibmjdz4dqelvCSsVl4acz28NDvK8Ow_13be0z.webp)
+
+---
+
+## Separator
+
+**Also known as:** Divider · Horizontal rule · Vertical rule
+
+[Browse all 33 examples →](https://component.gallery/components/separator/)
+
+### Design System Implementations
+
+- [Divider](https://ant.design/components/divider) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/-oKYt5RXt3ze9h-t662inQLmg-4UlWheeVx-6VnIP2k_Z237yJ4.webp)
+- [Ariakit](https://ariakit.org/components/separator) — Ariakit · React — Code examples, Open source, Accessibility · [preview](https://component.gallery/_astro/vniKla_Kuvj-xyWKNzfWBqytkd-6xQy7p-BYJSiX5w8_86CcS.webp)
+- [Divider/Rule](https://design.gccollab.ca/component/divider-rule) — Aurora · CSS — Code examples, Tone of voice, Open source, Unmaintained · [preview](https://component.gallery/_astro/KXM5V8CNZ2-q6UuLySB7fY_ZPt1x6-wJ3pdDd4WjxFM_Z26247R.webp)
+- [Divider](https://blueprintjs.com/docs/#core/components/divider) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/FBV9hPG94Z7jCGMm6lqA1j-xJeEb2vJB9oizhbIXuIE_ZtEVT2.webp)
+- [Line](https://cauldron.dequelabs.com/components/Line) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/sfcRrhHqa3CH40UnjRzOHRxEmjqQuMt_-Hg-g_g-so0_z0Hhu.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/separator) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/VfYaYGDDHNZ55is_g636qJOSUJSiId_lfsluVD4505w_FGGMz.webp)
+- [Divider](https://design.talend.com/?path=/docs/navigation-divider--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/VT21-7GL4HoDjtIPUcrlGHyJw3Nou-2U5bZGItVUOn8_22OWEr.webp)
+- [Divider](https://www.decathlon.design/726f8c765/p/28ad9b-divider/b/75bea6) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/O1FgBRvzHZQkt1cXW1U_01PAOEgtiNFIj4W0SHwMZCU_UXhg0.webp)
+- [Divider](https://www.delldesignsystem.com/components/divider/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/-mQ_VCsqCnVRYd2v3EDQvYehkfUiYWLo3AZLzGJlKQo_Z47S6o.webp)
+- [Divider](https://playbook.ebay.com/design-system/components/divider) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/r_SdrS0NcnlC6EDKCJOxd8nzyMkpxC6kxN2qjm5UbmU_Z1ffB85.webp)
+- [Horizontal rule](https://eui.elastic.co/docs/components/layout/horizontal-rule/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/Ydar7oelBKzv5nGa6D900I4lR4Ohjx1T1nrbDwl4Iso_6Qc5I.webp)
+- [HR](https://flowbite.com/docs/typography/hr/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/fR5mbN1PqnpjUrm5jClWdO38BBJhdv31JpQs9HeCB8w_ZXxrF0.webp)
+- [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/separator) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/ApCWku5qtAFP-FZzg4FTdoxavQV2GbLgiCkqHt6jteY_1cdHOO.webp)
+- [Divider](https://gestalt.pinterest.systems/web/divider) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/gRSaOn_bO4l34botxZ071jq3K4c4gJE0Ktu_PrdFhks_1RjsYH.webp)
+- [Divider](https://www.heroui.com/docs/components/divider) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/n1F0tx8hBvkmzrrgriUdoVfLcb7BbP9qKnsHssZMkTk_ZSYJ78.webp)
+- [Divider](https://m3.material.io/components/divider/overview) — Material Design · Mobile, Web Components, Sass — Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/LuHqm7ifRqP_WmB6sT1K5aDNFaDkAsCg10y29_H5NhE_Z2uv7gC.webp)
+- [Decorator](https://momentum.design/components/decorator) — Momentum Design · React, Web Components — Usage guidelines, Open source · [preview](https://component.gallery/_astro/aKLlppygFhKvvcgmpWIOBshmc6PEE0W84rflqlidkoI_Rb1ui.webp)
+- [Divider](https://design.ns.nl/4a05a30ad/p/02f430-divider) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/zOaODWVFCM-SmniVuZyhkNSwypw_SOGJGNG0oKNrkzE_1IKugz.webp)
+- [Divider](https://www.newskit.co.uk/components/divider/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/5yoqqt5GoWq6wCfzL-oI7WUasmvQO9e7cV_af7Pi5Q8_Z2jYuts.webp)
+- [Divider](https://nordhealth.design/components/divider/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/nTn_o3txMSCboLFBa1g28Tv7ob24Q5z1O14B01hF-WQ_Z1o7D7h.webp)
+- [Orbit](https://orbit.kiwi/components/separator/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/SKLf1OjDrQuN9yjDT9nh-lyNEX7WDUn9VTqibujMZ98_ZVYfgE.webp)
+- [Paste](https://paste.twilio.design/components/separator) — Paste · React, CSS-in-JS — Usage guidelines, Code examples, Tone of voice, Accessibility, Open source · [preview](https://component.gallery/_astro/Uu8RCsM1YoC9ydnD3aG6hGm5dxWCKVg3hyHBaWtcKKo_Z2qVIt6.webp)
+- [Divider](https://www.patternfly.org/components/divider) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/FQCWripE5ImcyVBDLgOGVhHPiVmfTDJG6CUHzeGI8ow_186RMf.webp)
+- [Divider](https://designsystem.porsche.com/v3/components/divider/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/uSws0dD9KwIy7dd7IE3e29qHWDoo_3iyltQ6v1KFFmg_2i2b6h.webp)
+- [Quasar Framework](https://quasar.dev/vue-components/separator) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/cwXh5TC7jWrFGawGpId2fXg3ZFmW9Z4oW08zCYyo7e4_25h4pC.webp)
+- [Radix Primitives](https://radix-ui.com/primitives/docs/components/separator) — Radix Primitives · React — Code examples, Open source · [preview](https://component.gallery/_astro/UlaN4D6xnNa_Zt0aBHMLOBjHp4bmQEVD0-nFf-fWPys_Otspv.webp)
+- [shadcn/ui](https://ui.shadcn.com/docs/components/separator) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/B9VmOaQIBstUhEhmSjWhDE12ki9fmjD5UkvjK4XhYzM_1Nd6hs.webp)
+- [Divider](https://spectrum.adobe.com/page/divider/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/gMRJFz0g7uN66xXUKOKOjC5jXbrR-vzdvSPOvJv6tw0_Z17Pofu.webp)
+- [Divider](https://www.subzero.axis.bank.in/components/divider) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/Ph9XEq0rFXFMFcPa-TucniDYl0svHQSgQOuNd9iGS10_Z2wJdev.webp)
+- [Horizontal Rule](https://thumbprint.design/components/horizontal-rule/react/) — Thumbprint  · React, Sass — Code examples, Open source · [preview](https://component.gallery/_astro/2I8EAkVb71SuBsU60A2JeIeWn3N3D1bJICjwmDxGZr4_Z176lMU.webp)
+- [Divider](https://design.visa.com/components/divider/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/DOSBBTmDUslkWkeDhg_jEQIPyXLxLqwsFhM8ENLSOJs_Z6ledw.webp)
+- [Wanda](https://design.wonderflow.ai/get-started/components/layouts/separator) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/Rlot4hE2J3A-pBPRZxOkVvfdZRVzEf8B5OfcLfBaxBg_Z1O5D6E.webp)
+- [Divider](https://webawesome.com/docs/components/divider/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/DbS8wgiOSSU6Xgh1QuVjDjaZgc-3aAXJ-ImQZ5N_OXQ_1MhzCL.webp)
+
+---
+
+## Stack
+
+[Browse all 9 examples →](https://component.gallery/components/stack/)
+
+### Design System Implementations
+
+- [Bolt Design System](https://boltdesignsystem.com/pattern-lab/?p=viewall-components-stack) — Bolt Design System · Sass, Twig, Web Components — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/47TQ4z5f-lNuedf2vbpqnpIcewpDGQbrglC4Lo_4Zc0_ZTufid.webp)
+- [Chakra UI](https://chakra-ui.com/docs/components/stack) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/Bca3Ua0F8TRHL1CO_XgbrIVxC08zZthIGgXRMCDz6xs_Z2jcOFC.webp)
+- [Coral](https://design.talend.com/?path=/docs/layout-stack--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/58iZjlLLIRSUqo7MOf07SyvestmeNpgIZqzGSUvj2RI_Z2r1KFn.webp)
+- [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/stack) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/MSBIlI0RAewUtS8YUM6DNPh7HZX7MHYQnfp1nKDQocI_2qkQSt.webp)
+- [Forma 36](https://f36.contentful.com/components/stack) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/xLJ4t7RfolxnucvSNSmb8VuAw1-zNLlVQMboBl1YHN0_ZHwBA4.webp)
+- [Geist Design System](https://vercel.com/geist/stack) — Geist Design System · React — Code examples · [preview](https://component.gallery/_astro/3afYa-PafCaRYWrzhtVjVIm3btohEsq-Jb-21XDdKGg_Z1GnxFd.webp)
+- [NewsKit](https://www.newskit.co.uk/components/stack/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/sJhbE8Z1TakF1m_LV3Aytqbxz9KMtnLdcJbmzw9IA3E_ZqdzW6.webp)
+- [Nord Design System](https://nordhealth.design/components/stack/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/Ziey7hQATXeNSnIJaYJEElvVNob2Fc3rNRrbuGbZQ9E_16nNXX.webp)
+- [Wanda](https://design.wonderflow.ai/get-started/components/layouts/stack) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/0SAOBMtICrRhGXGw1MnSxvaoJUWdvqVQ6SQxVRndevU_1OSowc.webp)
+
+---
+
+*Data from [component.gallery](https://component.gallery) by [Iain Bean](https://iainbean.com). 111 examples across 5 components.*