@ctrliq/quantic-components 1.85.1 → 1.86.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 (48) hide show
  1. package/dist/card/card-carousel.stories.js +2 -2
  2. package/dist/card/card-group.stories.js +2 -2
  3. package/dist/checkbox/index.stories.js +3 -3
  4. package/dist/cluster/cluster.component.d.ts +7 -0
  5. package/dist/cluster/cluster.component.js +14 -5
  6. package/dist/cluster/index.constants.d.ts +3 -0
  7. package/dist/cluster/index.constants.js +3 -0
  8. package/dist/code-input/index.stories.js +3 -3
  9. package/dist/grid/grid.component.d.ts +8 -0
  10. package/dist/grid/grid.component.js +16 -2
  11. package/dist/index.js.map +1 -1
  12. package/dist/meta/index.js.map +1 -1
  13. package/dist/meta.json +53 -65
  14. package/dist/number-input/index.stories.js +3 -3
  15. package/dist/option-card/option-card-group.stories.js +3 -3
  16. package/dist/panel/panel-group.stories.js +1 -1
  17. package/dist/quantic-components.js +48 -10
  18. package/dist/quantic-components.js.map +1 -1
  19. package/dist/quantic-components.min.js +3 -3
  20. package/dist/quantic-components.min.js.map +1 -1
  21. package/dist/radio/index.stories.js +1 -1
  22. package/dist/radio/radio-group.stories.js +5 -5
  23. package/dist/register.js.map +1 -1
  24. package/dist/shared/meta.types.d.ts +1 -1
  25. package/dist/tabs/index.stories.js +35 -35
  26. package/dist/text/index.constants.d.ts +4 -0
  27. package/dist/text/index.constants.js +2 -0
  28. package/dist/text/index.d.ts +7 -0
  29. package/dist/text/index.js +13 -3
  30. package/dist/text-input/index.stories.js +3 -3
  31. package/dist/textarea/index.stories.js +3 -3
  32. package/dist/toggle/index.stories.js +3 -3
  33. package/dist/types/cluster/cluster.component.d.ts +7 -0
  34. package/dist/types/cluster/index.constants.d.ts +3 -0
  35. package/dist/types/grid/grid.component.d.ts +8 -0
  36. package/dist/types/shared/meta.types.d.ts +1 -1
  37. package/dist/types/text/index.constants.d.ts +4 -0
  38. package/dist/types/text/index.d.ts +7 -0
  39. package/package.json +1 -1
  40. package/dist/cluster/cluster.stories.d.ts +0 -57
  41. package/dist/cluster/cluster.stories.js +0 -67
  42. package/dist/grid/grid.stories.d.ts +0 -36
  43. package/dist/grid/grid.stories.js +0 -95
  44. package/dist/text/index.stories.d.ts +0 -50
  45. package/dist/text/index.stories.js +0 -55
  46. package/dist/types/cluster/cluster.stories.d.ts +0 -57
  47. package/dist/types/grid/grid.stories.d.ts +0 -36
  48. package/dist/types/text/index.stories.d.ts +0 -50
package/dist/meta.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "schemaVersion": 1,
3
- "generated": "2026-08-28T16:42:21.311Z",
3
+ "generated": "2026-08-28T17:09:40.905Z",
4
4
  "components": [
5
5
  {
6
6
  "tag": "quantic-action-group",
@@ -704,15 +704,15 @@
704
704
  }
705
705
  ],
706
706
  "examples": [
707
- "<div\n style=\"\n display: flex;\n flex-direction: column;\n gap: var(--quantic-spacing-6);\n margin-bottom: var(--quantic-spacing-6);\n margin-inline: var(--quantic-spacing-4);\n \"\n >\n \n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Base\n </quantic-text>\n <div\n style=\"\n width: 20rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xs (≥ 24rem)\n </quantic-text>\n <div\n style=\"\n width: 24rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Sm (≥ 36rem)\n </quantic-text>\n <div\n style=\"\n width: 36rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Md (≥ 48rem)\n </quantic-text>\n <div\n style=\"\n width: 48rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Lg (≥ 64rem)\n </quantic-text>\n <div\n style=\"\n width: 64rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xl (≥ 75rem)\n </quantic-text>\n <div\n style=\"\n width: 75rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xxl (≥ 96rem)\n </quantic-text>\n <div\n style=\"\n width: 96rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n </div>",
708
- "<div\n style=\"\n display: flex;\n flex-direction: column;\n gap: var(--quantic-spacing-6);\n margin-bottom: var(--quantic-spacing-6);\n margin-inline: var(--quantic-spacing-4);\n \"\n >\n \n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Base\n </quantic-text>\n <div\n style=\"\n width: 20rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"compact\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xs (≥ 24rem)\n </quantic-text>\n <div\n style=\"\n width: 24rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"compact\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Sm (≥ 36rem)\n </quantic-text>\n <div\n style=\"\n width: 36rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"compact\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Md (≥ 48rem)\n </quantic-text>\n <div\n style=\"\n width: 48rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"compact\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Lg (≥ 64rem)\n </quantic-text>\n <div\n style=\"\n width: 64rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"compact\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xl (≥ 75rem)\n </quantic-text>\n <div\n style=\"\n width: 75rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"compact\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xxl (≥ 96rem)\n </quantic-text>\n <div\n style=\"\n width: 96rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"compact\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n </div>",
707
+ "<div\n style=\"\n display: flex;\n flex-direction: column;\n gap: var(--quantic-spacing-6);\n margin-bottom: var(--quantic-spacing-6);\n margin-inline: var(--quantic-spacing-4);\n \"\n >\n \n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Base\n </h4>\n <div\n style=\"\n width: 20rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Xs (≥ 24rem)\n </h4>\n <div\n style=\"\n width: 24rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Sm (≥ 36rem)\n </h4>\n <div\n style=\"\n width: 36rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Md (≥ 48rem)\n </h4>\n <div\n style=\"\n width: 48rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Lg (≥ 64rem)\n </h4>\n <div\n style=\"\n width: 64rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Xl (≥ 75rem)\n </h4>\n <div\n style=\"\n width: 75rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Xxl (≥ 96rem)\n </h4>\n <div\n style=\"\n width: 96rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n </div>",
708
+ "<div\n style=\"\n display: flex;\n flex-direction: column;\n gap: var(--quantic-spacing-6);\n margin-bottom: var(--quantic-spacing-6);\n margin-inline: var(--quantic-spacing-4);\n \"\n >\n \n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Base\n </h4>\n <div\n style=\"\n width: 20rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"compact\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Xs (≥ 24rem)\n </h4>\n <div\n style=\"\n width: 24rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"compact\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Sm (≥ 36rem)\n </h4>\n <div\n style=\"\n width: 36rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"compact\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Md (≥ 48rem)\n </h4>\n <div\n style=\"\n width: 48rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"compact\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Lg (≥ 64rem)\n </h4>\n <div\n style=\"\n width: 64rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"compact\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Xl (≥ 75rem)\n </h4>\n <div\n style=\"\n width: 75rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"compact\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Xxl (≥ 96rem)\n </h4>\n <div\n style=\"\n width: 96rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"compact\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n </div>",
709
709
  "<quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>",
710
- "<div\n style=\"\n display: flex;\n flex-direction: column;\n gap: var(--quantic-spacing-6);\n margin-bottom: var(--quantic-spacing-6);\n margin-inline: var(--quantic-spacing-4);\n \"\n >\n \n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Base\n </quantic-text>\n <div\n style=\"\n width: 20rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"dense\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 17\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 17</quantic-card-title>\n Sample card content 17.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 18\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 18</quantic-card-title>\n Sample card content 18.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 19\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 19</quantic-card-title>\n Sample card content 19.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 20\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 20</quantic-card-title>\n Sample card content 20.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xs (≥ 24rem)\n </quantic-text>\n <div\n style=\"\n width: 24rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"dense\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 17\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 17</quantic-card-title>\n Sample card content 17.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 18\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 18</quantic-card-title>\n Sample card content 18.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 19\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 19</quantic-card-title>\n Sample card content 19.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 20\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 20</quantic-card-title>\n Sample card content 20.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Sm (≥ 36rem)\n </quantic-text>\n <div\n style=\"\n width: 36rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"dense\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 17\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 17</quantic-card-title>\n Sample card content 17.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 18\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 18</quantic-card-title>\n Sample card content 18.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 19\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 19</quantic-card-title>\n Sample card content 19.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 20\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 20</quantic-card-title>\n Sample card content 20.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Md (≥ 48rem)\n </quantic-text>\n <div\n style=\"\n width: 48rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"dense\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 17\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 17</quantic-card-title>\n Sample card content 17.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 18\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 18</quantic-card-title>\n Sample card content 18.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 19\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 19</quantic-card-title>\n Sample card content 19.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 20\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 20</quantic-card-title>\n Sample card content 20.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Lg (≥ 64rem)\n </quantic-text>\n <div\n style=\"\n width: 64rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"dense\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 17\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 17</quantic-card-title>\n Sample card content 17.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 18\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 18</quantic-card-title>\n Sample card content 18.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 19\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 19</quantic-card-title>\n Sample card content 19.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 20\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 20</quantic-card-title>\n Sample card content 20.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xl (≥ 75rem)\n </quantic-text>\n <div\n style=\"\n width: 75rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"dense\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 17\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 17</quantic-card-title>\n Sample card content 17.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 18\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 18</quantic-card-title>\n Sample card content 18.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 19\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 19</quantic-card-title>\n Sample card content 19.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 20\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 20</quantic-card-title>\n Sample card content 20.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xxl (≥ 96rem)\n </quantic-text>\n <div\n style=\"\n width: 96rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"dense\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 17\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 17</quantic-card-title>\n Sample card content 17.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 18\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 18</quantic-card-title>\n Sample card content 18.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 19\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 19</quantic-card-title>\n Sample card content 19.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 20\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 20</quantic-card-title>\n Sample card content 20.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n </div>",
710
+ "<div\n style=\"\n display: flex;\n flex-direction: column;\n gap: var(--quantic-spacing-6);\n margin-bottom: var(--quantic-spacing-6);\n margin-inline: var(--quantic-spacing-4);\n \"\n >\n \n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Base\n </h4>\n <div\n style=\"\n width: 20rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"dense\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 17\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 17</quantic-card-title>\n Sample card content 17.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 18\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 18</quantic-card-title>\n Sample card content 18.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 19\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 19</quantic-card-title>\n Sample card content 19.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 20\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 20</quantic-card-title>\n Sample card content 20.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Xs (≥ 24rem)\n </h4>\n <div\n style=\"\n width: 24rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"dense\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 17\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 17</quantic-card-title>\n Sample card content 17.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 18\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 18</quantic-card-title>\n Sample card content 18.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 19\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 19</quantic-card-title>\n Sample card content 19.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 20\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 20</quantic-card-title>\n Sample card content 20.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Sm (≥ 36rem)\n </h4>\n <div\n style=\"\n width: 36rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"dense\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 17\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 17</quantic-card-title>\n Sample card content 17.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 18\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 18</quantic-card-title>\n Sample card content 18.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 19\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 19</quantic-card-title>\n Sample card content 19.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 20\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 20</quantic-card-title>\n Sample card content 20.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Md (≥ 48rem)\n </h4>\n <div\n style=\"\n width: 48rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"dense\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 17\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 17</quantic-card-title>\n Sample card content 17.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 18\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 18</quantic-card-title>\n Sample card content 18.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 19\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 19</quantic-card-title>\n Sample card content 19.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 20\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 20</quantic-card-title>\n Sample card content 20.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Lg (≥ 64rem)\n </h4>\n <div\n style=\"\n width: 64rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"dense\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 17\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 17</quantic-card-title>\n Sample card content 17.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 18\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 18</quantic-card-title>\n Sample card content 18.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 19\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 19</quantic-card-title>\n Sample card content 19.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 20\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 20</quantic-card-title>\n Sample card content 20.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Xl (≥ 75rem)\n </h4>\n <div\n style=\"\n width: 75rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"dense\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 17\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 17</quantic-card-title>\n Sample card content 17.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 18\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 18</quantic-card-title>\n Sample card content 18.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 19\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 19</quantic-card-title>\n Sample card content 19.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 20\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 20</quantic-card-title>\n Sample card content 20.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Xxl (≥ 96rem)\n </h4>\n <div\n style=\"\n width: 96rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"dense\">\n \n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 9\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 9</quantic-card-title>\n Sample card content 9.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 10\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 10</quantic-card-title>\n Sample card content 10.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 11\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 11</quantic-card-title>\n Sample card content 11.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 12\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 12</quantic-card-title>\n Sample card content 12.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 13\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 13</quantic-card-title>\n Sample card content 13.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 14\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 14</quantic-card-title>\n Sample card content 14.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 15\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 15</quantic-card-title>\n Sample card content 15.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 16\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 16</quantic-card-title>\n Sample card content 16.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 17\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 17</quantic-card-title>\n Sample card content 17.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 18\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 18</quantic-card-title>\n Sample card content 18.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 19\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 19</quantic-card-title>\n Sample card content 19.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"sm\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 20\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 20</quantic-card-title>\n Sample card content 20.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n </div>",
711
711
  "<quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n </quantic-card-carousel>",
712
712
  "<quantic-card-carousel density=\"comfortable\" show-navigation=\"false\" show-dots=\"false\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n </quantic-card-carousel>",
713
713
  "<quantic-card-carousel density=\"compact\">\n <quantic-card variant=\"solid\"><quantic-card-image slot=\"header\" bleeds><img src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\" alt=\"Video Tutorial\" /></quantic-card-image><p>Step-by-step walkthrough of key features.</p></quantic-card><quantic-card variant=\"outline\"><quantic-card-title slot=\"header\"><span slot=\"pretitle\">Documentation</span>Getting Started</quantic-card-title><p>Introduction to the platform and basic concepts.</p><quantic-button slot=\"footer\" grow=\"always\" variant=\"secondary\">Read Docs</quantic-button></quantic-card><quantic-card variant=\"solid\"><quantic-card-image slot=\"header\" bleeds><img src=\"https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&auto=format&fit=crop\" alt=\"Advanced Topics\" /></quantic-card-image><p>Deep dive into advanced features and optimizations.</p></quantic-card><quantic-card variant=\"outline\"><div slot=\"header\"><quantic-card-meta><quantic-badge color=\"brand\" size=\"sm\">Live</quantic-badge></quantic-card-meta><quantic-card-title><span slot=\"pretitle\">Webinar</span>Q&A Session</quantic-card-title></div><p>Join us for a live Q&A with the engineering team.</p><quantic-button slot=\"footer\" grow=\"always\" variant=\"primary\">Register</quantic-button></quantic-card><quantic-card variant=\"solid\"><quantic-card-title slot=\"header\">Community Forum</quantic-card-title><p>Connect with other users and share knowledge.</p></quantic-card><quantic-card variant=\"outline\"><quantic-card-title slot=\"header\"><span slot=\"pretitle\">Guide</span>Best Practices</quantic-card-title><p>Tips and tricks for optimal performance.</p></quantic-card>\n </quantic-card-carousel>",
714
714
  "<quantic-card-carousel density=\"comfortable\">\n \n <quantic-card variant=\"solid\">\n <div slot=\"header\">\n <quantic-card-meta><quantic-badge color=\"brand\" size=\"sm\">Featured</quantic-badge></quantic-card-meta>\n <quantic-card-title>\n <span slot=\"pretitle\">Solution Stack</span>\n AI/ML Infrastructure\n </quantic-card-title>\n </div>\n <p>Deploy production-ready AI workloads 9x faster.</p>\n <quantic-button slot=\"footer\" grow=\"always\" variant=\"primary\" size=\"md\">Learn More</quantic-button>\n </quantic-card>\n <quantic-card variant=\"solid\">\n <div slot=\"header\">\n <quantic-card-meta><quantic-badge color=\"success\" size=\"sm\">Popular</quantic-badge></quantic-card-meta>\n <quantic-card-title>\n <span slot=\"pretitle\">Solution Stack</span>\n Federal & Government Compliance\n </quantic-card-title>\n </div>\n <p>FIPS-certified infrastructure for regulated environments.</p>\n <quantic-button slot=\"footer\" grow=\"always\" variant=\"primary\" size=\"md\">Learn More</quantic-button>\n </quantic-card>\n <quantic-card variant=\"solid\">\n <div slot=\"header\">\n \n <quantic-card-title>\n <span slot=\"pretitle\">Solution Stack</span>\n HPC & Scientific Computing\n </quantic-card-title>\n </div>\n <p>Turn-key platform for traditional HPC workloads.</p>\n <quantic-button slot=\"footer\" grow=\"always\" variant=\"primary\" size=\"md\">Learn More</quantic-button>\n </quantic-card>\n <quantic-card variant=\"solid\">\n <div slot=\"header\">\n <quantic-card-meta><quantic-badge color=\"warning\" size=\"sm\">New</quantic-badge></quantic-card-meta>\n <quantic-card-title>\n <span slot=\"pretitle\">Solution Stack</span>\n Cloud Migration\n </quantic-card-title>\n </div>\n <p>Seamlessly migrate your workloads to the cloud.</p>\n <quantic-button slot=\"footer\" grow=\"always\" variant=\"primary\" size=\"md\">Learn More</quantic-button>\n </quantic-card>\n <quantic-card variant=\"solid\">\n <div slot=\"header\">\n \n <quantic-card-title>\n <span slot=\"pretitle\">Solution Stack</span>\n Data Analytics\n </quantic-card-title>\n </div>\n <p>Process massive datasets with distributed computing.</p>\n <quantic-button slot=\"footer\" grow=\"always\" variant=\"primary\" size=\"md\">Learn More</quantic-button>\n </quantic-card>\n <quantic-card variant=\"solid\">\n <div slot=\"header\">\n \n <quantic-card-title>\n <span slot=\"pretitle\">Solution Stack</span>\n Container Orchestration\n </quantic-card-title>\n </div>\n <p>Kubernetes-native platform with advanced scheduling.</p>\n <quantic-button slot=\"footer\" grow=\"always\" variant=\"primary\" size=\"md\">Learn More</quantic-button>\n </quantic-card>\n </quantic-card-carousel>",
715
- "<div\n style=\"\n display: flex;\n flex-direction: column;\n gap: var(--quantic-spacing-6);\n margin-bottom: var(--quantic-spacing-6);\n margin-inline: var(--quantic-spacing-4);\n \"\n >\n \n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Base\n </quantic-text>\n <div\n style=\"\n width: 20rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"sparse\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xs (≥ 24rem)\n </quantic-text>\n <div\n style=\"\n width: 24rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"sparse\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Sm (≥ 36rem)\n </quantic-text>\n <div\n style=\"\n width: 36rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"sparse\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Md (≥ 48rem)\n </quantic-text>\n <div\n style=\"\n width: 48rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"sparse\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Lg (≥ 64rem)\n </quantic-text>\n <div\n style=\"\n width: 64rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"sparse\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xl (≥ 75rem)\n </quantic-text>\n <div\n style=\"\n width: 75rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"sparse\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xxl (≥ 96rem)\n </quantic-text>\n <div\n style=\"\n width: 96rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"sparse\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n </div>",
715
+ "<div\n style=\"\n display: flex;\n flex-direction: column;\n gap: var(--quantic-spacing-6);\n margin-bottom: var(--quantic-spacing-6);\n margin-inline: var(--quantic-spacing-4);\n \"\n >\n \n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Base\n </h4>\n <div\n style=\"\n width: 20rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"sparse\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Xs (≥ 24rem)\n </h4>\n <div\n style=\"\n width: 24rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"sparse\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Sm (≥ 36rem)\n </h4>\n <div\n style=\"\n width: 36rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"sparse\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Md (≥ 48rem)\n </h4>\n <div\n style=\"\n width: 48rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"sparse\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Lg (≥ 64rem)\n </h4>\n <div\n style=\"\n width: 64rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"sparse\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Xl (≥ 75rem)\n </h4>\n <div\n style=\"\n width: 75rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"sparse\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n <div>\n <h4 style=\"margin: 0 0 var(--quantic-spacing-2);\">\n Xxl (≥ 96rem)\n </h4>\n <div\n style=\"\n width: 96rem;\n border: 1px dashed var(--quantic-color-warning-900);\n background-color: rgb(var(--quantic-bg-tertiary) / 0.35);\n \"\n >\n <quantic-card-carousel density=\"sparse\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 7\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 7</quantic-card-title>\n Sample card content 7.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 8\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 8</quantic-card-title>\n Sample card content 8.\n </quantic-card>\n </quantic-card-carousel>\n </div>\n </div>\n </div>",
716
716
  "<quantic-card-carousel density=\"comfortable\" show-dots=\"false\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n </quantic-card-carousel>",
717
717
  "<quantic-card-carousel density=\"comfortable\" show-navigation=\"false\">\n \n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 1\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 1</quantic-card-title>\n Sample card content 1.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 2\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 2</quantic-card-title>\n Sample card content 2.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 3\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 3</quantic-card-title>\n Sample card content 3.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 4\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 4</quantic-card-title>\n Sample card content 4.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 5\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 5</quantic-card-title>\n Sample card content 5.\n </quantic-card>\n <quantic-card variant=\"solid\" size=\"md\">\n <quantic-card-image slot=\"header\" bleeds>\n <img\n src=\"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop\"\n alt=\"Card 6\"\n />\n </quantic-card-image>\n <quantic-card-title slot=\"header\">Card 6</quantic-card-title>\n Sample card content 6.\n </quantic-card>\n </quantic-card-carousel>"
718
718
  ],
@@ -963,11 +963,11 @@
963
963
  "<quantic-checkbox\n name=\"\"\n checked\n label=\"Checkbox label\"\n ></quantic-checkbox>",
964
964
  "<quantic-checkbox\n name=\"\"\n label=\"Checkbox label\"\n ></quantic-checkbox>",
965
965
  "<quantic-checkbox\n name=\"\"\n label=\"Checkbox label\"\n disabled\n ></quantic-checkbox>",
966
- "<form\n style=\"display: flex; gap: 1rem; flex-direction: column; max-width: 400px\"\n >\n <quantic-checkbox\n name=\"terms\"\n label=\"I agree to the terms and conditions\"\n required\n ></quantic-checkbox>\n\n <quantic-checkbox\n name=\"newsletter\"\n label=\"Subscribe to newsletter\"\n checked\n ></quantic-checkbox>\n\n <quantic-checkbox\n name=\"notifications\"\n label=\"Enable email notifications\"\n ></quantic-checkbox>\n\n <div style=\"display: flex; gap: 0.5rem\">\n <quantic-button size=\"sm\" type=\"submit\" variant=\"primary\">Submit</quantic-button>\n <quantic-button size=\"sm\" type=\"reset\" variant=\"outline\">Reset</quantic-button>\n </div>\n\n <quantic-text size=\"xs\">\n This story demonstrates form-associated behavior using ElementInternals.\n Try submitting or resetting the form to see the values in the Actions\n panel.\n </quantic-text>\n </form>",
966
+ "<form\n style=\"display: flex; gap: 1rem; flex-direction: column; max-width: 400px\"\n >\n <quantic-checkbox\n name=\"terms\"\n label=\"I agree to the terms and conditions\"\n required\n ></quantic-checkbox>\n\n <quantic-checkbox\n name=\"newsletter\"\n label=\"Subscribe to newsletter\"\n checked\n ></quantic-checkbox>\n\n <quantic-checkbox\n name=\"notifications\"\n label=\"Enable email notifications\"\n ></quantic-checkbox>\n\n <div style=\"display: flex; gap: 0.5rem\">\n <quantic-button size=\"sm\" type=\"submit\" variant=\"primary\">Submit</quantic-button>\n <quantic-button size=\"sm\" type=\"reset\" variant=\"outline\">Reset</quantic-button>\n </div>\n\n <p class=\"story-note\">\n This story demonstrates form-associated behavior using ElementInternals.\n Try submitting or resetting the form to see the values in the Actions\n panel.\n </p>\n </form>",
967
967
  "<quantic-checkbox\n name=\"\"\n indeterminate\n label=\"Checkbox label\"\n ></quantic-checkbox>",
968
968
  "<quantic-checkbox\n name=\"\"\n checked\n indeterminate\n label=\"Checkbox label\"\n ></quantic-checkbox>",
969
969
  "<quantic-checkbox\n name=\"\"\n label=\"Checkbox label\"\n invalid\n ></quantic-checkbox>",
970
- "<div style=\"display: flex; gap: .5em; flex-direction: column\">\n <quantic-checkbox\n name=\"checkbox\"\n size=\"md\"\n ></quantic-checkbox>\n <quantic-text size=\"xs\">See actions panel for more details.</quantic-text>\n </div>"
970
+ "<div style=\"display: flex; gap: .5em; flex-direction: column\">\n <quantic-checkbox\n name=\"checkbox\"\n size=\"md\"\n ></quantic-checkbox>\n <p class=\"story-note\">See actions panel for more details.</p>\n </div>"
971
971
  ],
972
972
  "relatedTo": [
973
973
  "quantic-field",
@@ -1055,8 +1055,11 @@
1055
1055
  },
1056
1056
  {
1057
1057
  "tag": "quantic-cluster",
1058
- "description": "Generic flex container that arranges child items along a horizontal or vertical axis with consistent spacing. Use for grouping small inline elements like badges, tags, or buttons. Prefer quantic-card-group for cards, quantic-panel-group for panels, and quantic-grid for multi-column responsive layouts — those components provide semantics and density presets that Cluster does not.",
1058
+ "description": "Deprecated generic flex container. Use quantic-tag-group, quantic-badge-group or quantic-action-group for a uniform run of children, and a flex rule in your own stylesheet for anything else.",
1059
1059
  "category": "layout",
1060
+ "deprecated": {
1061
+ "reason": "Every prop maps one-to-one to a CSS property, so the element adds a shadow boundary and nothing else."
1062
+ },
1060
1063
  "props": [
1061
1064
  {
1062
1065
  "name": "axis",
@@ -1107,19 +1110,10 @@
1107
1110
  "description": "Items to arrange."
1108
1111
  }
1109
1112
  ],
1110
- "examples": [
1111
- "<quantic-cluster axis=\"horizontal\" gap=\"md\" align=\"center\" wrap>\n <quantic-badge color=\"purple\" size=\"xs\">Backgrounds</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Email signatures</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">LinkedIn header graphic</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Social media posts</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Presentation slides</quantic-badge>\n </quantic-cluster>",
1112
- "<quantic-cluster axis=\"horizontal\" gap=\"xl\" align=\"start\" wrap>\n <quantic-badge color=\"purple\" size=\"xs\">Backgrounds</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Email signatures</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">LinkedIn header graphic</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Social media posts</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Presentation slides</quantic-badge>\n </quantic-cluster>",
1113
- "<quantic-cluster axis=\"horizontal\" gap=\"xs\" align=\"start\" wrap>\n <quantic-badge color=\"purple\" size=\"xs\">Backgrounds</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Email signatures</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">LinkedIn header graphic</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Social media posts</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Presentation slides</quantic-badge>\n </quantic-cluster>",
1114
- "<quantic-cluster axis=\"horizontal\" gap=\"md\" align=\"start\" wrap>\n <quantic-badge color=\"purple\" size=\"xs\">Backgrounds</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Email signatures</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">LinkedIn header graphic</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Social media posts</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Presentation slides</quantic-badge>\n </quantic-cluster>",
1115
- "<quantic-cluster axis=\"horizontal\" gap=\"lg\" align=\"start\" wrap>\n <quantic-badge color=\"purple\" size=\"xs\">Backgrounds</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Email signatures</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">LinkedIn header graphic</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Social media posts</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Presentation slides</quantic-badge>\n </quantic-cluster>",
1116
- "<quantic-cluster axis=\"horizontal\" gap=\"sm\" align=\"start\" wrap>\n <quantic-badge color=\"purple\" size=\"xs\">Backgrounds</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Email signatures</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">LinkedIn header graphic</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Social media posts</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Presentation slides</quantic-badge>\n </quantic-cluster>",
1117
- "<quantic-cluster axis=\"vertical\" gap=\"md\" align=\"start\" wrap>\n <quantic-badge color=\"purple\" size=\"xs\">Backgrounds</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Email signatures</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">LinkedIn header graphic</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Social media posts</quantic-badge>\n<quantic-badge color=\"purple\" size=\"xs\">Presentation slides</quantic-badge>\n </quantic-cluster>"
1118
- ],
1119
1113
  "relatedTo": [
1120
- "quantic-grid",
1121
- "quantic-card-group",
1122
- "quantic-panel-group"
1114
+ "quantic-tag-group",
1115
+ "quantic-badge-group",
1116
+ "quantic-action-group"
1123
1117
  ]
1124
1118
  },
1125
1119
  {
@@ -1262,14 +1256,14 @@
1262
1256
  "<quantic-code-input\n name=\"code-input\"\n placeholder=\"Enter code here...\"\n rows=\"6\"\n size=\"md\"\n line-numbers\n ></quantic-code-input>",
1263
1257
  "<quantic-code-input\n name=\"code-input\"\n placeholder=\"Enter code here...\"\n rows=\"6\"\n size=\"md\"\n disabled\n line-numbers\n ></quantic-code-input>",
1264
1258
  "<quantic-code-input\n name=\"code-input\"\n placeholder=\"Enter code here...\"\n rows=\"6\"\n size=\"xs\"\n line-numbers\n ></quantic-code-input>",
1265
- "<form\n style=\"display: flex; gap: 1rem; flex-direction: column; max-width: 600px\"\n >\n <quantic-code-input\n name=\"snippet\"\n placeholder=\"Paste your code snippet here...\"\n rows=\"6\"\n required\n ></quantic-code-input>\n\n <div style=\"display: flex; gap: 0.5rem\">\n <quantic-button size=\"sm\" type=\"submit\" variant=\"primary\"\n >Submit</quantic-button\n >\n <quantic-button size=\"sm\" type=\"reset\" variant=\"outline\"\n >Reset</quantic-button\n >\n </div>\n\n <quantic-text size=\"xs\">\n This story demonstrates form-associated behavior using ElementInternals.\n Try submitting or resetting the form to see the values in the Actions\n panel.\n </quantic-text>\n </form>",
1259
+ "<form\n style=\"display: flex; gap: 1rem; flex-direction: column; max-width: 600px\"\n >\n <quantic-code-input\n name=\"snippet\"\n placeholder=\"Paste your code snippet here...\"\n rows=\"6\"\n required\n ></quantic-code-input>\n\n <div style=\"display: flex; gap: 0.5rem\">\n <quantic-button size=\"sm\" type=\"submit\" variant=\"primary\"\n >Submit</quantic-button\n >\n <quantic-button size=\"sm\" type=\"reset\" variant=\"outline\"\n >Reset</quantic-button\n >\n </div>\n\n <p class=\"story-note\">\n This story demonstrates form-associated behavior using ElementInternals.\n Try submitting or resetting the form to see the values in the Actions\n panel.\n </p>\n </form>",
1266
1260
  "<quantic-code-input\n name=\"code-input\"\n placeholder=\"Enter code here...\"\n rows=\"6\"\n size=\"md\"\n invalid\n line-numbers\n ></quantic-code-input>",
1267
1261
  "<quantic-code-input\n name=\"code-input\"\n placeholder=\"Enter code here...\"\n rows=\"6\"\n size=\"lg\"\n line-numbers\n ></quantic-code-input>",
1268
1262
  "<quantic-code-input\n name=\"code-input\"\n placeholder=\"Enter code here...\"\n rows=\"6\"\n size=\"md\"\n ></quantic-code-input>",
1269
1263
  "<quantic-code-input\n name=\"code-input\"\n placeholder=\"Enter code here...\"\n rows=\"6\"\n size=\"md\"\n readonly\n line-numbers\n ></quantic-code-input>",
1270
1264
  "<quantic-code-input\n name=\"code-input\"\n placeholder=\"Enter code here...\"\n rows=\"6\"\n size=\"sm\"\n line-numbers\n ></quantic-code-input>",
1271
1265
  "<div\n style=\"\n display: flex;\n flex-direction: column;\n width: 380px;\n height: 520px;\n background: var(--quantic-bg-secondary);\n border-radius: 8px;\n font-family: sans-serif;\n \"\n >\n <div style=\"flex: 1; min-height: 0; padding: var(--quantic-spacing-3);\">\n <quantic-code-input\n name=\"yaml-editor\"\n size=\"sm\"\n stretch\n style=\"\n --quantic-component-code-input-border-color: transparent;\n --quantic-component-code-input-focus-ring-color: transparent;\n --quantic-component-code-input-padding-block: 0;\n --quantic-component-code-input-padding-inline: 0;\n --quantic-bg-secondary: transparent;\n height: 100%;\n \"\n ></quantic-code-input>\n </div>\n </div>",
1272
- "<div style=\"display: flex; gap: .5em; flex-direction: column\">\n <quantic-code-input value=\"function greet(name) {\n return `Hello, ${name}!`;\n}\n\nconsole.log(greet('World'));\" placeholder=\"Enter code here...\" rows=\"6\" size=\"md\"></quantic-code-input>\n <quantic-text size=\"xs\">See actions panel for more details.</quantic-text>\n </div>"
1266
+ "<div style=\"display: flex; gap: .5em; flex-direction: column\">\n <quantic-code-input value=\"function greet(name) {\n return `Hello, ${name}!`;\n}\n\nconsole.log(greet('World'));\" placeholder=\"Enter code here...\" rows=\"6\" size=\"md\"></quantic-code-input>\n <p class=\"story-note\">See actions panel for more details.</p>\n </div>"
1273
1267
  ],
1274
1268
  "relatedTo": [
1275
1269
  "quantic-field",
@@ -2217,8 +2211,12 @@
2217
2211
  },
2218
2212
  {
2219
2213
  "tag": "quantic-grid",
2220
- "description": "CSS grid layout container that arranges child items into a responsive multi-column grid. Column count and gap scale automatically with container width based on the chosen density preset.",
2214
+ "description": "Deprecated public export, becoming internal anatomy of quantic-card-group and quantic-option-card-group. Use quantic-card-group, quantic-option-card-group for option cards, or write the grid in your own stylesheet.",
2221
2215
  "category": "layout",
2216
+ "deprecated": {
2217
+ "use": "quantic-card-group",
2218
+ "reason": "Grid sizes its children, so any track or row rule it does not anticipate cannot be reached from outside."
2219
+ },
2222
2220
  "props": [
2223
2221
  {
2224
2222
  "name": "density",
@@ -2240,12 +2238,9 @@
2240
2238
  "description": "Grid items to be laid out."
2241
2239
  }
2242
2240
  ],
2243
- "examples": [
2244
- "<div\n style=\"\n display: flex;\n flex-direction: column;\n gap: var(--quantic-spacing-6);\n margin-inline: var(--quantic-spacing-4);\n \"\n >\n \n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Base\n </quantic-text>\n <div\n style=\"\n width: 20rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"comfortable\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xs (≥ 24rem)\n </quantic-text>\n <div\n style=\"\n width: 24rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"comfortable\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Sm (≥ 36rem)\n </quantic-text>\n <div\n style=\"\n width: 36rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"comfortable\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Md (≥ 48rem)\n </quantic-text>\n <div\n style=\"\n width: 48rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"comfortable\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Lg (≥ 64rem)\n </quantic-text>\n <div\n style=\"\n width: 64rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"comfortable\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xl (≥ 75rem)\n </quantic-text>\n <div\n style=\"\n width: 75rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"comfortable\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xxl (≥ 96rem)\n </quantic-text>\n <div\n style=\"\n width: 96rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"comfortable\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n </div>",
2245
- "<div\n style=\"\n display: flex;\n flex-direction: column;\n gap: var(--quantic-spacing-6);\n margin-inline: var(--quantic-spacing-4);\n \"\n >\n \n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Base\n </quantic-text>\n <div\n style=\"\n width: 20rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"compact\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xs (≥ 24rem)\n </quantic-text>\n <div\n style=\"\n width: 24rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"compact\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Sm (≥ 36rem)\n </quantic-text>\n <div\n style=\"\n width: 36rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"compact\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Md (≥ 48rem)\n </quantic-text>\n <div\n style=\"\n width: 48rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"compact\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Lg (≥ 64rem)\n </quantic-text>\n <div\n style=\"\n width: 64rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"compact\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xl (≥ 75rem)\n </quantic-text>\n <div\n style=\"\n width: 75rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"compact\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xxl (≥ 96rem)\n </quantic-text>\n <div\n style=\"\n width: 96rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"compact\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n </div>",
2246
- "<div\n style=\"\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid\n density=\"custom\"\n style=\"--quantic-component-grid-columns: 5; --quantic-component-grid-gap: var(--quantic-spacing-2);\"\n >\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>",
2247
- "<div\n style=\"\n display: flex;\n flex-direction: column;\n gap: var(--quantic-spacing-6);\n margin-inline: var(--quantic-spacing-4);\n \"\n >\n \n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Base\n </quantic-text>\n <div\n style=\"\n width: 20rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"dense\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xs (≥ 24rem)\n </quantic-text>\n <div\n style=\"\n width: 24rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"dense\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Sm (≥ 36rem)\n </quantic-text>\n <div\n style=\"\n width: 36rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"dense\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Md (≥ 48rem)\n </quantic-text>\n <div\n style=\"\n width: 48rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"dense\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Lg (≥ 64rem)\n </quantic-text>\n <div\n style=\"\n width: 64rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"dense\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xl (≥ 75rem)\n </quantic-text>\n <div\n style=\"\n width: 75rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"dense\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xxl (≥ 96rem)\n </quantic-text>\n <div\n style=\"\n width: 96rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"dense\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 9\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 10\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 11\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 12\n </div>\n </quantic-grid>\n </div>\n </div>\n </div>",
2248
- "<div\n style=\"\n display: flex;\n flex-direction: column;\n gap: var(--quantic-spacing-6);\n margin-inline: var(--quantic-spacing-4);\n \"\n >\n \n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Base\n </quantic-text>\n <div\n style=\"\n width: 20rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"sparse\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xs (≥ 24rem)\n </quantic-text>\n <div\n style=\"\n width: 24rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"sparse\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Sm (≥ 36rem)\n </quantic-text>\n <div\n style=\"\n width: 36rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"sparse\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Md (≥ 48rem)\n </quantic-text>\n <div\n style=\"\n width: 48rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"sparse\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Lg (≥ 64rem)\n </quantic-text>\n <div\n style=\"\n width: 64rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"sparse\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xl (≥ 75rem)\n </quantic-text>\n <div\n style=\"\n width: 75rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"sparse\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n </quantic-grid>\n </div>\n </div>\n <div>\n <quantic-text as=\"h4\" style=\"margin-bottom: var(--quantic-spacing-2);\">\n Xxl (≥ 96rem)\n </quantic-text>\n <div\n style=\"\n width: 96rem;\n border: 1px dashed var(--quantic-color-blue-900);\n background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);\n \"\n >\n <quantic-grid density=\"sparse\">\n \n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 1\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 2\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 3\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 4\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 5\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 6\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 7\n </div>\n <div\n style=\"\n background: var(--quantic-bg-secondary);\n height: 100px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n \"\n >\n Item 8\n </div>\n </quantic-grid>\n </div>\n </div>\n </div>"
2241
+ "relatedTo": [
2242
+ "quantic-card-group",
2243
+ "quantic-option-card-group"
2249
2244
  ]
2250
2245
  },
2251
2246
  {
@@ -2644,11 +2639,11 @@
2644
2639
  "<quantic-number-input\n value=\"16\"\n placeholder=\"0\"\n size=\"md\"\n name=\"number-input\"\n ></quantic-number-input>",
2645
2640
  "<quantic-number-input\n value=\"16\"\n placeholder=\"0\"\n size=\"md\"\n name=\"number-input\"\n disabled\n ></quantic-number-input>",
2646
2641
  "<quantic-number-input\n value=\"16\"\n placeholder=\"0\"\n size=\"xs\"\n name=\"number-input\"\n ></quantic-number-input>",
2647
- "<form\n style=\"display: flex; gap: 1rem; flex-direction: column; max-width: 400px\"\n >\n <quantic-number-input\n name=\"count\"\n placeholder=\"0\"\n min=\"0\"\n max=\"999\"\n required\n ></quantic-number-input>\n\n <div style=\"display: flex; gap: 0.5rem\">\n <quantic-button size=\"sm\" type=\"submit\" variant=\"primary\">Submit</quantic-button>\n <quantic-button size=\"sm\" type=\"reset\" variant=\"outline\">Reset</quantic-button>\n </div>\n\n <quantic-text size=\"xs\">\n Demonstrates form-associated behavior. Submit to see value in Actions panel.\n </quantic-text>\n </form>",
2642
+ "<form\n style=\"display: flex; gap: 1rem; flex-direction: column; max-width: 400px\"\n >\n <quantic-number-input\n name=\"count\"\n placeholder=\"0\"\n min=\"0\"\n max=\"999\"\n required\n ></quantic-number-input>\n\n <div style=\"display: flex; gap: 0.5rem\">\n <quantic-button size=\"sm\" type=\"submit\" variant=\"primary\">Submit</quantic-button>\n <quantic-button size=\"sm\" type=\"reset\" variant=\"outline\">Reset</quantic-button>\n </div>\n\n <p class=\"story-note\">\n Demonstrates form-associated behavior. Submit to see value in Actions panel.\n </p>\n </form>",
2648
2643
  "<quantic-number-input\n value=\"16\"\n placeholder=\"0\"\n size=\"md\"\n name=\"number-input\"\n invalid\n ></quantic-number-input>",
2649
2644
  "<quantic-number-input\n value=\"16\"\n placeholder=\"0\"\n size=\"lg\"\n name=\"number-input\"\n ></quantic-number-input>",
2650
2645
  "<quantic-number-input\n value=\"16\"\n placeholder=\"0\"\n size=\"sm\"\n name=\"number-input\"\n ></quantic-number-input>",
2651
- "<div style=\"display: flex; gap: .5em; flex-direction: column\">\n <quantic-number-input\n value=\"42\"\n placeholder=\"\"\n size=\"md\"\n ></quantic-number-input>\n <quantic-text size=\"xs\">See actions panel for more details.</quantic-text>\n </div>",
2646
+ "<div style=\"display: flex; gap: .5em; flex-direction: column\">\n <quantic-number-input\n value=\"42\"\n placeholder=\"\"\n size=\"md\"\n ></quantic-number-input>\n <p class=\"story-note\">See actions panel for more details.</p>\n </div>",
2652
2647
  "<quantic-number-input\n value=\"50\"\n placeholder=\"0\"\n size=\"md\"\n name=\"number-input\"\n min=\"0\"\n max=\"100\"\n ></quantic-number-input>",
2653
2648
  "<quantic-number-input\n placeholder=\"Enter a number...\"\n size=\"md\"\n name=\"number-input\"\n ></quantic-number-input>",
2654
2649
  "<quantic-number-input\n value=\"16\"\n placeholder=\"0\"\n size=\"md\"\n name=\"number-input\"\n >\n <span slot=\"prefix\">#</span>\n </quantic-number-input>",
@@ -2875,7 +2870,7 @@
2875
2870
  "examples": [
2876
2871
  "<quantic-option-card-group type=\"single\" name=\"dense-options\" density=\"dense\" size=\"sm\">\n <quantic-option-card value=\"1\" variant=\"ghost\"><div>Option 1</div></quantic-option-card>\n <quantic-option-card value=\"2\" variant=\"ghost\"><div>Option 2</div></quantic-option-card>\n <quantic-option-card value=\"3\" variant=\"ghost\"><div>Option 3</div></quantic-option-card>\n <quantic-option-card value=\"4\" variant=\"ghost\"><div>Option 4</div></quantic-option-card>\n <quantic-option-card value=\"5\" variant=\"ghost\"><div>Option 5</div></quantic-option-card>\n <quantic-option-card value=\"6\" variant=\"ghost\"><div>Option 6</div></quantic-option-card>\n </quantic-option-card-group>",
2877
2872
  "<quantic-option-card-group type=\"single\" name=\"disabled-group\" density=\"comfortable\" size=\"md\" disabled>\n <quantic-option-card value=\"option1\" variant=\"ghost\">\n <div>Option 1</div>\n <div slot=\"description\">This entire group is disabled</div>\n </quantic-option-card>\n\n <quantic-option-card value=\"option2\" variant=\"ghost\">\n <div>Option 2</div>\n <div slot=\"description\">All cards inherit disabled state</div>\n </quantic-option-card>\n\n <quantic-option-card value=\"option3\" variant=\"ghost\">\n <div>Option 3</div>\n <div slot=\"description\">Cannot be selected</div>\n </quantic-option-card>\n </quantic-option-card-group>",
2878
- "<div>\n <quantic-text variant=\"label\">Select a payment method *</quantic-text>\n <quantic-option-card-group type=\"single\" name=\"invalid-group\" density=\"comfortable\" size=\"md\" required invalid>\n <quantic-option-card value=\"credit\" variant=\"ghost\">\n <quantic-icon-lucide-credit-card slot=\"icon\"></quantic-icon-lucide-credit-card>\n <div>Credit Card</div>\n <div slot=\"description\">Pay with Visa, Mastercard, or Amex</div>\n </quantic-option-card>\n\n <quantic-option-card value=\"paypal\" variant=\"ghost\">\n <quantic-icon-lucide-wallet slot=\"icon\"></quantic-icon-lucide-wallet>\n <div>PayPal</div>\n <div slot=\"description\">Fast and secure payment with PayPal</div>\n </quantic-option-card>\n\n <quantic-option-card value=\"bank\" variant=\"ghost\">\n <quantic-icon-lucide-landmark slot=\"icon\"></quantic-icon-lucide-landmark>\n <div>Bank Transfer</div>\n <div slot=\"description\">Direct transfer from your bank account</div>\n </quantic-option-card>\n </quantic-option-card-group>\n <quantic-text variant=\"helper\" style=\"color: var(--quantic-text-error); margin-top: 0.5rem;\">\n Please select a payment method to continue\n </quantic-text>\n </div>",
2873
+ "<div>\n <p class=\"story-label\">Select a payment method *</p>\n <quantic-option-card-group type=\"single\" name=\"invalid-group\" density=\"comfortable\" size=\"md\" required invalid>\n <quantic-option-card value=\"credit\" variant=\"ghost\">\n <quantic-icon-lucide-credit-card slot=\"icon\"></quantic-icon-lucide-credit-card>\n <div>Credit Card</div>\n <div slot=\"description\">Pay with Visa, Mastercard, or Amex</div>\n </quantic-option-card>\n\n <quantic-option-card value=\"paypal\" variant=\"ghost\">\n <quantic-icon-lucide-wallet slot=\"icon\"></quantic-icon-lucide-wallet>\n <div>PayPal</div>\n <div slot=\"description\">Fast and secure payment with PayPal</div>\n </quantic-option-card>\n\n <quantic-option-card value=\"bank\" variant=\"ghost\">\n <quantic-icon-lucide-landmark slot=\"icon\"></quantic-icon-lucide-landmark>\n <div>Bank Transfer</div>\n <div slot=\"description\">Direct transfer from your bank account</div>\n </quantic-option-card>\n </quantic-option-card-group>\n <p class=\"story-note\" style=\"color: var(--quantic-text-error); margin-top: var(--quantic-spacing-2);\">\n Please select a payment method to continue\n </p>\n </div>",
2879
2874
  "<quantic-option-card-group type=\"single\" name=\"mixed-variants\" density=\"comfortable\" size=\"md\">\n <quantic-option-card value=\"free\" variant=\"ghost\">\n <quantic-icon-lucide-gift slot=\"icon\"></quantic-icon-lucide-gift>\n <div>Free tier</div>\n <div slot=\"description\">No credit card required</div>\n </quantic-option-card>\n\n <quantic-option-card value=\"starter\" variant=\"solid\">\n <quantic-icon-lucide-rocket slot=\"icon\"></quantic-icon-lucide-rocket>\n <div>Starter (Recommended)</div>\n <div slot=\"description\">Best for small teams</div>\n </quantic-option-card>\n\n <quantic-option-card value=\"business\" variant=\"ghost\">\n <quantic-icon-lucide-briefcase slot=\"icon\"></quantic-icon-lucide-briefcase>\n <div>Business</div>\n <div slot=\"description\">Advanced features</div>\n </quantic-option-card>\n </quantic-option-card-group>",
2880
2875
  "<quantic-option-card-group type=\"multiple\" name=\"features\" density=\"comfortable\" size=\"md\">\n <quantic-option-card value=\"analytics\" variant=\"solid\">\n <quantic-icon-lucide-chart-bar slot=\"icon\"></quantic-icon-lucide-chart-bar>\n <div>Analytics</div>\n <div slot=\"description\">Advanced reporting and insights</div>\n </quantic-option-card>\n\n <quantic-option-card value=\"api\" variant=\"solid\">\n <quantic-icon-lucide-code slot=\"icon\"></quantic-icon-lucide-code>\n <div>API Access</div>\n <div slot=\"description\">Full API integration capabilities</div>\n </quantic-option-card>\n\n <quantic-option-card value=\"support\" variant=\"solid\">\n <quantic-icon-lucide-headphones slot=\"icon\"></quantic-icon-lucide-headphones>\n <div>Priority Support</div>\n <div slot=\"description\">24/7 dedicated support team</div>\n </quantic-option-card>\n\n <quantic-option-card value=\"training\" variant=\"solid\">\n <quantic-icon-lucide-graduation-cap slot=\"icon\"></quantic-icon-lucide-graduation-cap>\n <div>Training</div>\n <div slot=\"description\">Onboarding and training sessions</div>\n </quantic-option-card>\n </quantic-option-card-group>",
2881
2876
  "<quantic-option-card-group type=\"single\" name=\"plan-selection\" density=\"comfortable\" size=\"md\">\n <quantic-option-card value=\"basic\" variant=\"ghost\">\n <quantic-icon-lucide-package slot=\"icon\"></quantic-icon-lucide-package>\n <div>Basic plan</div>\n <div slot=\"description\">$10/month - Perfect for individuals</div>\n </quantic-option-card>\n\n <quantic-option-card value=\"pro\" variant=\"ghost\">\n <quantic-icon-lucide-star slot=\"icon\"></quantic-icon-lucide-star>\n <div>Pro plan</div>\n <div slot=\"description\">$20/month - For growing teams</div>\n </quantic-option-card>\n\n <quantic-option-card value=\"enterprise\" variant=\"ghost\">\n <quantic-icon-lucide-building-2 slot=\"icon\"></quantic-icon-lucide-building-2>\n <div>Enterprise plan</div>\n <div slot=\"description\">Custom pricing - For large organizations</div>\n </quantic-option-card>\n </quantic-option-card-group>",
@@ -3515,7 +3510,7 @@
3515
3510
  "<quantic-radio\n name=\"radio-example\"\n value=\"option1\"\n size=\"md\"\n label=\"Medium radio\"\n ></quantic-radio>",
3516
3511
  "<div style=\"display: flex; gap: 1.5rem; align-items: center\">\n <quantic-radio name=\"size-demo-xs\" value=\"xsmall\" label=\"XSmall\" size=\"xs\" checked></quantic-radio>\n <quantic-radio name=\"size-demo-sm\" value=\"small\" label=\"Small\" size=\"sm\" checked></quantic-radio>\n <quantic-radio name=\"size-demo-md\" value=\"medium\" label=\"Medium\" size=\"md\" checked></quantic-radio>\n <quantic-radio name=\"size-demo-lg\" value=\"large\" label=\"Large\" size=\"lg\" checked></quantic-radio>\n </div>",
3517
3512
  "<quantic-radio\n name=\"radio-example\"\n value=\"option1\"\n size=\"sm\"\n label=\"Small radio\"\n ></quantic-radio>",
3518
- "<div style=\"display: flex; gap: .5em; flex-direction: column\">\n <quantic-radio\n name=\"radio\"\n value=\"option1\"\n size=\"md\"\n label=\"Radio option\"\n ></quantic-radio>\n <quantic-text size=\"xs\">See actions panel for more details.</quantic-text>\n </div>",
3513
+ "<div style=\"display: flex; gap: .5em; flex-direction: column\">\n <quantic-radio\n name=\"radio\"\n value=\"option1\"\n size=\"md\"\n label=\"Radio option\"\n ></quantic-radio>\n <p class=\"story-note\">See actions panel for more details.</p>\n </div>",
3519
3514
  "<quantic-radio\n name=\"radio-example\"\n value=\"option1\"\n size=\"xs\"\n label=\"XSmall radio\"\n ></quantic-radio>"
3520
3515
  ],
3521
3516
  "relatedTo": [
@@ -3608,7 +3603,7 @@
3608
3603
  "examples": [
3609
3604
  "<div style=\"display: flex; gap: 1rem; flex-direction: column\">\n <quantic-radio-group\n name=\"color\"\n value=\"red\"\n >\n <quantic-radio value=\"red\" label=\"Red\" size=\"md\"></quantic-radio>\n <quantic-radio value=\"blue\" label=\"Blue\" size=\"md\"></quantic-radio>\n <quantic-radio value=\"green\" label=\"Green\" size=\"md\"></quantic-radio>\n <quantic-radio value=\"yellow\" label=\"Yellow\" size=\"md\"></quantic-radio>\n </quantic-radio-group>\n <code style=\"\n margin: 0;\n display: inline-block;\n width: fit-content;\n font-family: var(--quantic-font-family-body);\n color: var(--quantic-text-primary);\n font-size: var(--quantic-font-size-body-sm);\n padding: var(--quantic-spacing-2) var(--quantic-spacing-4);\n background: var(--quantic-bg-secondary);\n border-radius: var(--quantic-radius-md);\n\">Selected: red</code>\n </div>",
3610
3605
  "<quantic-radio-group name=\"plan\" value=\"basic\" disabled>\n <div style=\"display: flex; gap: 1rem; flex-direction: column\">\n <quantic-radio value=\"basic\" label=\"Basic - $10/month\" size=\"md\"></quantic-radio>\n <quantic-radio value=\"pro\" label=\"Pro - $25/month\" size=\"md\"></quantic-radio>\n <quantic-radio value=\"enterprise\" label=\"Enterprise - Contact us\" size=\"md\"></quantic-radio>\n </div>\n </quantic-radio-group>",
3611
- "<form\n style=\"display: flex; gap: 1rem; flex-direction: column; max-width: 400px\"\n >\n <quantic-radio-group name=\"contact\" value=\"email\" required>\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n <quantic-text size=\"sm\" style=\"font-weight: 600\">\n Select your preferred contact method:\n </quantic-text>\n <quantic-radio value=\"email\" label=\"Email\"></quantic-radio>\n <quantic-radio value=\"phone\" label=\"Phone\"></quantic-radio>\n <quantic-radio value=\"sms\" label=\"SMS\"></quantic-radio>\n </div>\n </quantic-radio-group>\n\n <quantic-radio-group name=\"plan\" value=\"basic\">\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n <quantic-text size=\"sm\" style=\"font-weight: 600\">Select your plan:</quantic-text>\n <quantic-radio value=\"basic\" label=\"Basic - $10/month\"></quantic-radio>\n <quantic-radio value=\"pro\" label=\"Pro - $25/month\"></quantic-radio>\n <quantic-radio value=\"enterprise\" label=\"Enterprise - Contact us\"></quantic-radio>\n </div>\n </quantic-radio-group>\n\n <div style=\"display: flex; gap: 0.5rem\">\n <quantic-button size=\"sm\" type=\"submit\" variant=\"primary\">Submit</quantic-button>\n <quantic-button size=\"sm\" type=\"reset\" variant=\"outline\">Reset</quantic-button>\n </div>\n\n <quantic-text size=\"xs\">\n This story demonstrates form-associated behavior using ElementInternals\n with RadioGroup. Try submitting or resetting the form to see the values\n in the Actions panel.\n </quantic-text>\n </form>",
3606
+ "<form\n style=\"display: flex; gap: 1rem; flex-direction: column; max-width: 400px\"\n >\n <quantic-radio-group name=\"contact\" value=\"email\" required>\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n <p class=\"story-label\">\n Select your preferred contact method:\n </p>\n <quantic-radio value=\"email\" label=\"Email\"></quantic-radio>\n <quantic-radio value=\"phone\" label=\"Phone\"></quantic-radio>\n <quantic-radio value=\"sms\" label=\"SMS\"></quantic-radio>\n </div>\n </quantic-radio-group>\n\n <quantic-radio-group name=\"plan\" value=\"basic\">\n <div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n <p class=\"story-label\">Select your plan:</p>\n <quantic-radio value=\"basic\" label=\"Basic - $10/month\"></quantic-radio>\n <quantic-radio value=\"pro\" label=\"Pro - $25/month\"></quantic-radio>\n <quantic-radio value=\"enterprise\" label=\"Enterprise - Contact us\"></quantic-radio>\n </div>\n </quantic-radio-group>\n\n <div style=\"display: flex; gap: 0.5rem\">\n <quantic-button size=\"sm\" type=\"submit\" variant=\"primary\">Submit</quantic-button>\n <quantic-button size=\"sm\" type=\"reset\" variant=\"outline\">Reset</quantic-button>\n </div>\n\n <p class=\"story-note\">\n This story demonstrates form-associated behavior using ElementInternals\n with RadioGroup. Try submitting or resetting the form to see the values\n in the Actions panel.\n </p>\n </form>",
3612
3607
  "<div style=\"display: flex; gap: 1rem; flex-direction: column\">\n <quantic-radio-group\n name=\"size\"\n value=\"medium\"\n variant=\"inline\"\n >\n <quantic-radio value=\"small\" label=\"Small\" size=\"md\"></quantic-radio>\n <quantic-radio value=\"medium\" label=\"Medium\" size=\"md\"></quantic-radio>\n <quantic-radio value=\"large\" label=\"Large\" size=\"md\"></quantic-radio>\n </quantic-radio-group>\n <code style=\"\n margin: 0;\n display: inline-block;\n width: fit-content;\n font-family: var(--quantic-font-family-body);\n color: var(--quantic-text-primary);\n font-size: var(--quantic-font-size-body-sm);\n padding: var(--quantic-spacing-2) var(--quantic-spacing-4);\n background: var(--quantic-bg-secondary);\n border-radius: var(--quantic-radius-md);\n\">Selected: medium</code>\n </div>",
3613
3608
  "<div style=\"display: flex; gap: 1rem; flex-direction: column\">\n <quantic-radio-group\n name=\"alignment\"\n value=\"center\"\n variant=\"segmented\"\n >\n <quantic-radio value=\"left\" label=\"Left\" size=\"md\"></quantic-radio>\n <quantic-radio value=\"center\" label=\"Center\" size=\"md\"></quantic-radio>\n <quantic-radio value=\"right\" label=\"Right\" size=\"md\"></quantic-radio>\n </quantic-radio-group>\n <code style=\"\n margin: 0;\n display: inline-block;\n width: fit-content;\n font-family: var(--quantic-font-family-body);\n color: var(--quantic-text-primary);\n font-size: var(--quantic-font-size-body-sm);\n padding: var(--quantic-spacing-2) var(--quantic-spacing-4);\n background: var(--quantic-bg-secondary);\n border-radius: var(--quantic-radius-md);\n\">Selected: center</code>\n </div>"
3614
3609
  ],
@@ -4674,19 +4669,19 @@
4674
4669
  }
4675
4670
  ],
4676
4671
  "examples": [
4677
- "<style>\n .stack-tabs-frame {\n width: 28rem;\n max-width: 100%;\n border: 1px solid var(--quantic-border-secondary);\n border-radius: var(--quantic-radius-md);\n padding: var(--quantic-spacing-4);\n resize: horizontal;\n overflow: auto;\n }\n </style>\n <div class=\"stack-tabs-frame\">\n <quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"vertical\"\n collapse-below=\"640px\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <quantic-text>Stacked when the tabs container is 640px wide or less.</quantic-text>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"1\">\n <quantic-text>Email Notifications: Enabled</quantic-text>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"2\">\n <quantic-text>Change Password</quantic-text>\n </quantic-tab-panel>\n </quantic-tabs>\n </div>",
4678
- "<quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"horizontal\"\n style=\"--quantic-component-tabs-gap: var(--quantic-spacing-1)\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <quantic-text size=\"lg\">Jane Doe</quantic-text>\n <quantic-text>Email: jane.doe@example.com</quantic-text>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"1\">\n <quantic-text size=\"md\">Email Notifications: Enabled</quantic-text>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"2\">\n <quantic-text size=\"md\">Change Password</quantic-text>\n </quantic-tab-panel>\n </quantic-tabs>",
4679
- "<style>\n .dot-tabs {\n --quantic-component-tab-indicator-inset: 50% var(--quantic-spacing-3) auto auto;\n --quantic-component-tab-indicator-width: var(--quantic-spacing-2);\n --quantic-component-tab-indicator-height: var(--quantic-spacing-2);\n --quantic-component-tab-indicator-radius: 50%;\n --quantic-component-tab-indicator-origin: center;\n --quantic-component-tab-indicator-transform: translateY(-50%) scale(0);\n --quantic-component-tab-active-bg: var(--quantic-bg-active);\n --quantic-component-tab-hover-bg: var(--quantic-bg-secondary-hover);\n --quantic-component-tab-radius: var(--quantic-radius-md);\n }\n .dot-tabs quantic-tab-button[selected] {\n --quantic-component-tab-indicator-transform: translateY(-50%) scale(1);\n }\n .dot-tabs quantic-tab-button::part(button) {\n width: 100%;\n padding-inline-end: var(--quantic-spacing-8);\n }\n .dot-tabs::part(nav) {\n gap: var(--quantic-spacing-1);\n }\n </style>\n <quantic-tabs\n class=\"dot-tabs\"\n selected-index=\"0\"\n size=\"md\"\n orientation=\"vertical\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <quantic-text size=\"lg\">Jane Doe</quantic-text>\n <quantic-text>Email: jane.doe@example.com</quantic-text>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"1\">\n <quantic-text size=\"md\">Email Notifications: Enabled</quantic-text>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"2\">\n <quantic-text size=\"md\">Change Password</quantic-text>\n </quantic-tab-panel>\n </quantic-tabs>",
4680
- "<quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <quantic-text size=\"lg\">Jane Doe</quantic-text>\n <quantic-text>Email: jane.doe@example.com</quantic-text>\n <quantic-text>Member since Jan 2021</quantic-text>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"1\">\n <quantic-text size=\"md\">Email Notifications: Enabled</quantic-text>\n <quantic-text size=\"md\">SMS Alerts: Disabled</quantic-text>\n <quantic-button>Edit</quantic-button>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"2\">\n <quantic-text size=\"md\">Change Password</quantic-text>\n <quantic-password-input placeholder=\"New password\"></quantic-password-input>\n <quantic-button>Save</quantic-button>\n </quantic-tab-panel>\n </quantic-tabs>",
4681
- "<quantic-tabs\n selected-index=\"0\"\n size=\"xs\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <quantic-text size=\"lg\">Jane Doe</quantic-text>\n <quantic-text>Email: jane.doe@example.com</quantic-text>\n <quantic-text>Member since Jan 2021</quantic-text>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"1\">\n <quantic-text size=\"md\">Email Notifications: Enabled</quantic-text>\n <quantic-text size=\"md\">SMS Alerts: Disabled</quantic-text>\n <quantic-button>Edit</quantic-button>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"2\">\n <quantic-text size=\"md\">Change Password</quantic-text>\n <quantic-password-input placeholder=\"New password\"></quantic-password-input>\n <quantic-button>Save</quantic-button>\n </quantic-tab-panel>\n </quantic-tabs>",
4682
- "<style>\n .scroll-tabs-frame {\n height: 16rem;\n border: 1px solid var(--quantic-border-secondary);\n border-radius: var(--quantic-radius-md);\n padding: var(--quantic-spacing-4);\n }\n .scroll-tabs-frame quantic-tabs {\n height: 100%;\n }\n .scroll-tabs-frame quantic-tabs::part(panels) {\n overflow: auto;\n }\n </style>\n <div class=\"scroll-tabs-frame\">\n <quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"vertical\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <quantic-text>Profile row 1</quantic-text><quantic-text>Profile row 2</quantic-text><quantic-text>Profile row 3</quantic-text><quantic-text>Profile row 4</quantic-text><quantic-text>Profile row 5</quantic-text><quantic-text>Profile row 6</quantic-text><quantic-text>Profile row 7</quantic-text><quantic-text>Profile row 8</quantic-text><quantic-text>Profile row 9</quantic-text><quantic-text>Profile row 10</quantic-text><quantic-text>Profile row 11</quantic-text><quantic-text>Profile row 12</quantic-text>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"1\">\n <quantic-text>Email Notifications: Enabled</quantic-text>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"2\">\n <quantic-text>Change Password</quantic-text>\n </quantic-tab-panel>\n </quantic-tabs>\n </div>",
4683
- "<quantic-tabs\n selected-index=\"0\"\n size=\"lg\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <quantic-text size=\"lg\">Jane Doe</quantic-text>\n <quantic-text>Email: jane.doe@example.com</quantic-text>\n <quantic-text>Member since Jan 2021</quantic-text>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"1\">\n <quantic-text size=\"md\">Email Notifications: Enabled</quantic-text>\n <quantic-text size=\"md\">SMS Alerts: Disabled</quantic-text>\n <quantic-button>Edit</quantic-button>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"2\">\n <quantic-text size=\"md\">Change Password</quantic-text>\n <quantic-password-input placeholder=\"New password\"></quantic-password-input>\n <quantic-button>Save</quantic-button>\n </quantic-tab-panel>\n </quantic-tabs>",
4672
+ "<style>\n .stack-tabs-frame {\n width: 28rem;\n max-width: 100%;\n border: 1px solid var(--quantic-border-secondary);\n border-radius: var(--quantic-radius-md);\n padding: var(--quantic-spacing-4);\n resize: horizontal;\n overflow: auto;\n }\n </style>\n <div class=\"stack-tabs-frame\">\n <quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"vertical\"\n collapse-below=\"640px\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <p class=\"story-copy\">Stacked when the tabs container is 640px wide or less.</p>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"1\">\n <p class=\"story-copy\">Email Notifications: Enabled</p>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"2\">\n <p class=\"story-copy\">Change Password</p>\n </quantic-tab-panel>\n </quantic-tabs>\n </div>",
4673
+ "<quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"horizontal\"\n style=\"--quantic-component-tabs-gap: var(--quantic-spacing-1)\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <p class=\"story-lead\">Jane Doe</p>\n <p class=\"story-copy\">Email: jane.doe@example.com</p>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"1\">\n <p class=\"story-copy\">Email Notifications: Enabled</p>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"2\">\n <p class=\"story-copy\">Change Password</p>\n </quantic-tab-panel>\n </quantic-tabs>",
4674
+ "<style>\n .dot-tabs {\n --quantic-component-tab-indicator-inset: 50% var(--quantic-spacing-3) auto auto;\n --quantic-component-tab-indicator-width: var(--quantic-spacing-2);\n --quantic-component-tab-indicator-height: var(--quantic-spacing-2);\n --quantic-component-tab-indicator-radius: 50%;\n --quantic-component-tab-indicator-origin: center;\n --quantic-component-tab-indicator-transform: translateY(-50%) scale(0);\n --quantic-component-tab-active-bg: var(--quantic-bg-active);\n --quantic-component-tab-hover-bg: var(--quantic-bg-secondary-hover);\n --quantic-component-tab-radius: var(--quantic-radius-md);\n }\n .dot-tabs quantic-tab-button[selected] {\n --quantic-component-tab-indicator-transform: translateY(-50%) scale(1);\n }\n .dot-tabs quantic-tab-button::part(button) {\n width: 100%;\n padding-inline-end: var(--quantic-spacing-8);\n }\n .dot-tabs::part(nav) {\n gap: var(--quantic-spacing-1);\n }\n </style>\n <quantic-tabs\n class=\"dot-tabs\"\n selected-index=\"0\"\n size=\"md\"\n orientation=\"vertical\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <p class=\"story-lead\">Jane Doe</p>\n <p class=\"story-copy\">Email: jane.doe@example.com</p>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"1\">\n <p class=\"story-copy\">Email Notifications: Enabled</p>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"2\">\n <p class=\"story-copy\">Change Password</p>\n </quantic-tab-panel>\n </quantic-tabs>",
4675
+ "<quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <p class=\"story-lead\">Jane Doe</p>\n <p class=\"story-copy\">Email: jane.doe@example.com</p>\n <p class=\"story-copy\">Member since Jan 2021</p>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"1\">\n <p class=\"story-copy\">Email Notifications: Enabled</p>\n <p class=\"story-copy\">SMS Alerts: Disabled</p>\n <quantic-button>Edit</quantic-button>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"2\">\n <p class=\"story-copy\">Change Password</p>\n <quantic-password-input placeholder=\"New password\"></quantic-password-input>\n <quantic-button>Save</quantic-button>\n </quantic-tab-panel>\n </quantic-tabs>",
4676
+ "<quantic-tabs\n selected-index=\"0\"\n size=\"xs\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <p class=\"story-lead\">Jane Doe</p>\n <p class=\"story-copy\">Email: jane.doe@example.com</p>\n <p class=\"story-copy\">Member since Jan 2021</p>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"1\">\n <p class=\"story-copy\">Email Notifications: Enabled</p>\n <p class=\"story-copy\">SMS Alerts: Disabled</p>\n <quantic-button>Edit</quantic-button>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"2\">\n <p class=\"story-copy\">Change Password</p>\n <quantic-password-input placeholder=\"New password\"></quantic-password-input>\n <quantic-button>Save</quantic-button>\n </quantic-tab-panel>\n </quantic-tabs>",
4677
+ "<style>\n .scroll-tabs-frame {\n height: 16rem;\n border: 1px solid var(--quantic-border-secondary);\n border-radius: var(--quantic-radius-md);\n padding: var(--quantic-spacing-4);\n }\n .scroll-tabs-frame quantic-tabs {\n height: 100%;\n }\n .scroll-tabs-frame quantic-tabs::part(panels) {\n overflow: auto;\n }\n </style>\n <div class=\"scroll-tabs-frame\">\n <quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"vertical\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <p class=\"story-copy\">Profile row 1</p><p class=\"story-copy\">Profile row 2</p><p class=\"story-copy\">Profile row 3</p><p class=\"story-copy\">Profile row 4</p><p class=\"story-copy\">Profile row 5</p><p class=\"story-copy\">Profile row 6</p><p class=\"story-copy\">Profile row 7</p><p class=\"story-copy\">Profile row 8</p><p class=\"story-copy\">Profile row 9</p><p class=\"story-copy\">Profile row 10</p><p class=\"story-copy\">Profile row 11</p><p class=\"story-copy\">Profile row 12</p>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"1\">\n <p class=\"story-copy\">Email Notifications: Enabled</p>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"2\">\n <p class=\"story-copy\">Change Password</p>\n </quantic-tab-panel>\n </quantic-tabs>\n </div>",
4678
+ "<quantic-tabs\n selected-index=\"0\"\n size=\"lg\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <p class=\"story-lead\">Jane Doe</p>\n <p class=\"story-copy\">Email: jane.doe@example.com</p>\n <p class=\"story-copy\">Member since Jan 2021</p>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"1\">\n <p class=\"story-copy\">Email Notifications: Enabled</p>\n <p class=\"story-copy\">SMS Alerts: Disabled</p>\n <quantic-button>Edit</quantic-button>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"2\">\n <p class=\"story-copy\">Change Password</p>\n <quantic-password-input placeholder=\"New password\"></quantic-password-input>\n <quantic-button>Save</quantic-button>\n </quantic-tab-panel>\n </quantic-tabs>",
4684
4679
  "<quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">Dashboard</quantic-tab-button>\n <quantic-tab-button index=\"1\">Analytics</quantic-tab-button>\n <quantic-tab-button index=\"2\">Reports</quantic-tab-button>\n <quantic-tab-button index=\"3\">Settings</quantic-tab-button>\n </quantic-tabs>",
4685
- "<quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">Outer A</quantic-tab-button>\n <quantic-tab-button index=\"1\">Outer B</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <quantic-text size=\"xs\">Switching inner tabs here must leave the outer selection on Outer A.</quantic-text>\n <quantic-tabs selected-index=\"0\" size=\"md\" orientation=\"horizontal\">\n <quantic-tab-button index=\"0\">Inner 1</quantic-tab-button>\n <quantic-tab-button index=\"1\">Inner 2</quantic-tab-button>\n <quantic-tab-button index=\"2\">Inner 3</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\"><quantic-text>Inner panel 1</quantic-text></quantic-tab-panel>\n <quantic-tab-panel index=\"1\"><quantic-text>Inner panel 2</quantic-text></quantic-tab-panel>\n <quantic-tab-panel index=\"2\"><quantic-text>Inner panel 3</quantic-text></quantic-tab-panel>\n </quantic-tabs>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"1\">\n <quantic-text>Outer panel B.</quantic-text>\n </quantic-tab-panel>\n </quantic-tabs>",
4686
- "<quantic-tabs\n selected-index=\"0\"\n size=\"sm\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <quantic-text size=\"lg\">Jane Doe</quantic-text>\n <quantic-text>Email: jane.doe@example.com</quantic-text>\n <quantic-text>Member since Jan 2021</quantic-text>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"1\">\n <quantic-text size=\"md\">Email Notifications: Enabled</quantic-text>\n <quantic-text size=\"md\">SMS Alerts: Disabled</quantic-text>\n <quantic-button>Edit</quantic-button>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"2\">\n <quantic-text size=\"md\">Change Password</quantic-text>\n <quantic-password-input placeholder=\"New password\"></quantic-password-input>\n <quantic-button>Save</quantic-button>\n </quantic-tab-panel>\n </quantic-tabs>",
4687
- "<quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"vertical\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <quantic-text size=\"lg\">Jane Doe</quantic-text>\n <quantic-text>Email: jane.doe@example.com</quantic-text>\n <quantic-text>Member since Jan 2021</quantic-text>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"1\">\n <quantic-text size=\"md\">Email Notifications: Enabled</quantic-text>\n <quantic-text size=\"md\">SMS Alerts: Disabled</quantic-text>\n <quantic-button>Edit</quantic-button>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"2\">\n <quantic-text size=\"md\">Change Password</quantic-text>\n <quantic-password-input placeholder=\"New password\"></quantic-password-input>\n <quantic-button>Save</quantic-button>\n </quantic-tab-panel>\n </quantic-tabs>",
4688
- "<quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\" disabled>Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n <quantic-tab-button index=\"3\" disabled>Billing</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <quantic-text size=\"lg\">Jane Doe</quantic-text>\n <quantic-text>Email: jane.doe@example.com</quantic-text>\n <quantic-text>Member since Jan 2021</quantic-text>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"1\">\n <quantic-text>Notifications are unavailable for this account.</quantic-text>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"2\">\n <quantic-text size=\"md\">Change Password</quantic-text>\n <quantic-password-input placeholder=\"New password\"></quantic-password-input>\n <quantic-button>Save</quantic-button>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"3\">\n <quantic-text>Billing is unavailable for this account.</quantic-text>\n </quantic-tab-panel>\n </quantic-tabs>",
4689
- "<quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">\n <quantic-icon-lucide-user slot=\"icon\"></quantic-icon-lucide-user>\n Profile\n </quantic-tab-button>\n <quantic-tab-button index=\"1\">\n <quantic-icon-lucide-bell slot=\"icon\"></quantic-icon-lucide-bell>\n Notifications\n </quantic-tab-button>\n <quantic-tab-button index=\"2\">\n <quantic-icon-lucide-shield slot=\"icon\"></quantic-icon-lucide-shield>\n Security\n </quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <quantic-text size=\"lg\">Jane Doe</quantic-text>\n <quantic-text>Email: jane.doe@example.com</quantic-text>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"1\">\n <quantic-text size=\"md\">Email Notifications: Enabled</quantic-text>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"2\">\n <quantic-text size=\"md\">Change Password</quantic-text>\n </quantic-tab-panel>\n </quantic-tabs>"
4680
+ "<quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">Outer A</quantic-tab-button>\n <quantic-tab-button index=\"1\">Outer B</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <p class=\"story-note\">Switching inner tabs here must leave the outer selection on Outer A.</p>\n <quantic-tabs selected-index=\"0\" size=\"md\" orientation=\"horizontal\">\n <quantic-tab-button index=\"0\">Inner 1</quantic-tab-button>\n <quantic-tab-button index=\"1\">Inner 2</quantic-tab-button>\n <quantic-tab-button index=\"2\">Inner 3</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\"><p class=\"story-copy\">Inner panel 1</p></quantic-tab-panel>\n <quantic-tab-panel index=\"1\"><p class=\"story-copy\">Inner panel 2</p></quantic-tab-panel>\n <quantic-tab-panel index=\"2\"><p class=\"story-copy\">Inner panel 3</p></quantic-tab-panel>\n </quantic-tabs>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"1\">\n <p class=\"story-copy\">Outer panel B.</p>\n </quantic-tab-panel>\n </quantic-tabs>",
4681
+ "<quantic-tabs\n selected-index=\"0\"\n size=\"sm\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <p class=\"story-lead\">Jane Doe</p>\n <p class=\"story-copy\">Email: jane.doe@example.com</p>\n <p class=\"story-copy\">Member since Jan 2021</p>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"1\">\n <p class=\"story-copy\">Email Notifications: Enabled</p>\n <p class=\"story-copy\">SMS Alerts: Disabled</p>\n <quantic-button>Edit</quantic-button>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"2\">\n <p class=\"story-copy\">Change Password</p>\n <quantic-password-input placeholder=\"New password\"></quantic-password-input>\n <quantic-button>Save</quantic-button>\n </quantic-tab-panel>\n </quantic-tabs>",
4682
+ "<quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"vertical\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <p class=\"story-lead\">Jane Doe</p>\n <p class=\"story-copy\">Email: jane.doe@example.com</p>\n <p class=\"story-copy\">Member since Jan 2021</p>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"1\">\n <p class=\"story-copy\">Email Notifications: Enabled</p>\n <p class=\"story-copy\">SMS Alerts: Disabled</p>\n <quantic-button>Edit</quantic-button>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"2\">\n <p class=\"story-copy\">Change Password</p>\n <quantic-password-input placeholder=\"New password\"></quantic-password-input>\n <quantic-button>Save</quantic-button>\n </quantic-tab-panel>\n </quantic-tabs>",
4683
+ "<quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n <quantic-tab-button index=\"1\" disabled>Notifications</quantic-tab-button>\n <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n <quantic-tab-button index=\"3\" disabled>Billing</quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <p class=\"story-lead\">Jane Doe</p>\n <p class=\"story-copy\">Email: jane.doe@example.com</p>\n <p class=\"story-copy\">Member since Jan 2021</p>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"1\">\n <p class=\"story-copy\">Notifications are unavailable for this account.</p>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"2\">\n <p class=\"story-copy\">Change Password</p>\n <quantic-password-input placeholder=\"New password\"></quantic-password-input>\n <quantic-button>Save</quantic-button>\n </quantic-tab-panel>\n\n <quantic-tab-panel index=\"3\">\n <p class=\"story-copy\">Billing is unavailable for this account.</p>\n </quantic-tab-panel>\n </quantic-tabs>",
4684
+ "<quantic-tabs\n selected-index=\"0\"\n size=\"md\"\n orientation=\"horizontal\"\n >\n <quantic-tab-button index=\"0\">\n <quantic-icon-lucide-user slot=\"icon\"></quantic-icon-lucide-user>\n Profile\n </quantic-tab-button>\n <quantic-tab-button index=\"1\">\n <quantic-icon-lucide-bell slot=\"icon\"></quantic-icon-lucide-bell>\n Notifications\n </quantic-tab-button>\n <quantic-tab-button index=\"2\">\n <quantic-icon-lucide-shield slot=\"icon\"></quantic-icon-lucide-shield>\n Security\n </quantic-tab-button>\n\n <quantic-tab-panel index=\"0\">\n <p class=\"story-lead\">Jane Doe</p>\n <p class=\"story-copy\">Email: jane.doe@example.com</p>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"1\">\n <p class=\"story-copy\">Email Notifications: Enabled</p>\n </quantic-tab-panel>\n <quantic-tab-panel index=\"2\">\n <p class=\"story-copy\">Change Password</p>\n </quantic-tab-panel>\n </quantic-tabs>"
4690
4685
  ],
4691
4686
  "subComponents": [
4692
4687
  "quantic-tab-button",
@@ -4808,8 +4803,11 @@
4808
4803
  },
4809
4804
  {
4810
4805
  "tag": "quantic-text",
4811
- "description": "Typography component for rendering text with consistent sizing, weight, and color tokens. Renders any HTML element via the `as` prop for semantic correctness.",
4806
+ "description": "Deprecated typography wrapper. Write the semantic element in your own document, where quantic-css type styles and IDREF-based accessibility can reach it.",
4812
4807
  "category": "display",
4808
+ "deprecated": {
4809
+ "reason": "Renders the consumer's element inside a shadow root, so the typography stylesheet cannot style it and IDREFs cannot cross the boundary."
4810
+ },
4813
4811
  "props": [
4814
4812
  {
4815
4813
  "name": "as",
@@ -4847,18 +4845,8 @@
4847
4845
  "description": "Text content to render."
4848
4846
  }
4849
4847
  ],
4850
- "examples": [
4851
- "<quantic-text as=\"p\" variant=\"body\">The typography system is one of the most foundational parts of any interface design. If your users are unable to read your content, you can say goodbye to them immediately. That's why even a rudimentary understanding of typography means you can determine for yourself the best fonts for modern UI design.\nText is never just text. It often goes unnoticed in good design, but good type design can elicit emotion, guide attention and even create a typographical identity.\nI've always felt that good typography is the most undervalued and under appreciated elements in modern product design.\nBad typography, by contrast, sticks out. Even to non-design-oriented folks, bad typography is easy to spot. It reflects badly on the brand and leads to a poor user experience, even if users can't pinpoint why...\nOften, designers fall back on trends rather than carefully considering the best typography for a design. Partly, because good typography skills are difficult to master. Paired with great copywriting, understanding the basics of effective typography is a powerful force multiplier to help you stand out and improve user experiences.</quantic-text>",
4852
- "<quantic-text as=\"p\" variant=\"body\" size=\"xs\">The typography system is one of the most foundational parts of any interface design. If your users are unable to read your content, you can say goodbye to them immediately. That's why even a rudimentary understanding of typography means you can determine for yourself the best fonts for modern UI design.\nText is never just text. It often goes unnoticed in good design, but good type design can elicit emotion, guide attention and even create a typographical identity.\nI've always felt that good typography is the most undervalued and under appreciated elements in modern product design.\nBad typography, by contrast, sticks out. Even to non-design-oriented folks, bad typography is easy to spot. It reflects badly on the brand and leads to a poor user experience, even if users can't pinpoint why...\nOften, designers fall back on trends rather than carefully considering the best typography for a design. Partly, because good typography skills are difficult to master. Paired with great copywriting, understanding the basics of effective typography is a powerful force multiplier to help you stand out and improve user experiences.</quantic-text>",
4853
- "<quantic-text as=\"p\" variant=\"body\" size=\"lg\">The typography system is one of the most foundational parts of any interface design. If your users are unable to read your content, you can say goodbye to them immediately. That's why even a rudimentary understanding of typography means you can determine for yourself the best fonts for modern UI design.\nText is never just text. It often goes unnoticed in good design, but good type design can elicit emotion, guide attention and even create a typographical identity.\nI've always felt that good typography is the most undervalued and under appreciated elements in modern product design.\nBad typography, by contrast, sticks out. Even to non-design-oriented folks, bad typography is easy to spot. It reflects badly on the brand and leads to a poor user experience, even if users can't pinpoint why...\nOften, designers fall back on trends rather than carefully considering the best typography for a design. Partly, because good typography skills are difficult to master. Paired with great copywriting, understanding the basics of effective typography is a powerful force multiplier to help you stand out and improve user experiences.</quantic-text>",
4854
- "<quantic-text as=\"p\" variant=\"body\" size=\"md\">The typography system is one of the most foundational parts of any interface design. If your users are unable to read your content, you can say goodbye to them immediately. That's why even a rudimentary understanding of typography means you can determine for yourself the best fonts for modern UI design.\nText is never just text. It often goes unnoticed in good design, but good type design can elicit emotion, guide attention and even create a typographical identity.\nI've always felt that good typography is the most undervalued and under appreciated elements in modern product design.\nBad typography, by contrast, sticks out. Even to non-design-oriented folks, bad typography is easy to spot. It reflects badly on the brand and leads to a poor user experience, even if users can't pinpoint why...\nOften, designers fall back on trends rather than carefully considering the best typography for a design. Partly, because good typography skills are difficult to master. Paired with great copywriting, understanding the basics of effective typography is a powerful force multiplier to help you stand out and improve user experiences.</quantic-text>",
4855
- "<quantic-text as=\"p\" variant=\"body\" size=\"sm\">The typography system is one of the most foundational parts of any interface design. If your users are unable to read your content, you can say goodbye to them immediately. That's why even a rudimentary understanding of typography means you can determine for yourself the best fonts for modern UI design.\nText is never just text. It often goes unnoticed in good design, but good type design can elicit emotion, guide attention and even create a typographical identity.\nI've always felt that good typography is the most undervalued and under appreciated elements in modern product design.\nBad typography, by contrast, sticks out. Even to non-design-oriented folks, bad typography is easy to spot. It reflects badly on the brand and leads to a poor user experience, even if users can't pinpoint why...\nOften, designers fall back on trends rather than carefully considering the best typography for a design. Partly, because good typography skills are difficult to master. Paired with great copywriting, understanding the basics of effective typography is a powerful force multiplier to help you stand out and improve user experiences.</quantic-text>",
4856
- "<quantic-text variant=\"body\" size=\"md\">Notes and documentation</quantic-text>",
4857
- "<quantic-text as=\"h1\" variant=\"display\">Notes and documentation</quantic-text>",
4858
- "<quantic-text as=\"h1\" variant=\"display\" size=\"xl\">Notes and documentation</quantic-text>",
4859
- "<quantic-text as=\"h1\" variant=\"display\" size=\"lg\">Notes and documentation</quantic-text>",
4860
- "<quantic-text as=\"h1\" variant=\"display\" size=\"md\">Notes and documentation</quantic-text>",
4861
- "<quantic-text as=\"h1\" variant=\"display\" size=\"sm\">Notes and documentation</quantic-text>"
4848
+ "relatedTo": [
4849
+ "quantic-prose"
4862
4850
  ]
4863
4851
  },
4864
4852
  {
@@ -4992,14 +4980,14 @@
4992
4980
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\"></quantic-text-input>",
4993
4981
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\" disabled></quantic-text-input>",
4994
4982
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"xs\" name=\"text-input\"></quantic-text-input>",
4995
- "<form\n style=\"display: flex; gap: 1rem; flex-direction: column; max-width: 400px\"\n >\n <quantic-text-input\n name=\"username\"\n placeholder=\"Username\"\n value=\"\"\n required\n ></quantic-text-input>\n\n <quantic-text-input\n name=\"email\"\n placeholder=\"Email\"\n value=\"user@example.com\"\n ></quantic-text-input>\n\n <div style=\"display: flex; gap: 0.5rem\">\n <quantic-button size=\"sm\" type=\"submit\" variant=\"primary\">Submit</quantic-button>\n <quantic-button size=\"sm\" type=\"reset\" variant=\"outline\">Reset</quantic-button>\n </div>\n\n <quantic-text size=\"xs\">\n This story demonstrates form-associated behavior using ElementInternals.\n Try submitting or resetting the form to see the values in the Actions\n panel.\n </quantic-text>\n </form>",
4983
+ "<form\n style=\"display: flex; gap: 1rem; flex-direction: column; max-width: 400px\"\n >\n <quantic-text-input\n name=\"username\"\n placeholder=\"Username\"\n value=\"\"\n required\n ></quantic-text-input>\n\n <quantic-text-input\n name=\"email\"\n placeholder=\"Email\"\n value=\"user@example.com\"\n ></quantic-text-input>\n\n <div style=\"display: flex; gap: 0.5rem\">\n <quantic-button size=\"sm\" type=\"submit\" variant=\"primary\">Submit</quantic-button>\n <quantic-button size=\"sm\" type=\"reset\" variant=\"outline\">Reset</quantic-button>\n </div>\n\n <p class=\"story-note\">\n This story demonstrates form-associated behavior using ElementInternals.\n Try submitting or resetting the form to see the values in the Actions\n panel.\n </p>\n </form>",
4996
4984
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\" invalid></quantic-text-input>",
4997
4985
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"lg\" name=\"text-input\"></quantic-text-input>",
4998
4986
  "<quantic-text-input value=\"secret123\" placeholder=\"Enter your password\" type=\"password\" size=\"md\" name=\"text-input\" autocomplete=\"current-password\"></quantic-text-input>",
4999
4987
  "<quantic-text-input value=\"secret123\" placeholder=\"Enter your password\" type=\"password\" size=\"md\" name=\"text-input\" autocomplete=\"current-password\" invalid></quantic-text-input>",
5000
4988
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\" readonly></quantic-text-input>",
5001
4989
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"sm\" name=\"text-input\"></quantic-text-input>",
5002
- "<div style=\"display: flex; gap: .5em; flex-direction: column\">\n <quantic-text-input value=\"Hello World\" placeholder=\"Type something...\" size=\"md\"></quantic-text-input>\n <quantic-text size=\"xs\">See actions panel for more details.</quantic-text>\n </div>",
4990
+ "<div style=\"display: flex; gap: .5em; flex-direction: column\">\n <quantic-text-input value=\"Hello World\" placeholder=\"Type something...\" size=\"md\"></quantic-text-input>\n <p class=\"story-note\">See actions panel for more details.</p>\n </div>",
5003
4991
  "<quantic-text-input value=\"\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\"></quantic-text-input>",
5004
4992
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\"><span slot=\"prefix\">🔍</span></quantic-text-input>",
5005
4993
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\"><span slot=\"prefix\">🔍</span><span slot=\"suffix\">❌</span></quantic-text-input>",
@@ -5154,14 +5142,14 @@
5154
5142
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"4\" resize=\"vertical\"></quantic-textarea>",
5155
5143
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"4\" resize=\"vertical\" disabled></quantic-textarea>",
5156
5144
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"xs\" name=\"textarea\" rows=\"4\" resize=\"vertical\"></quantic-textarea>",
5157
- "<form\n style=\"display: flex; gap: 1rem; flex-direction: column; max-width: 400px\"\n >\n <quantic-textarea\n name=\"message\"\n placeholder=\"Your message\"\n value=\"\"\n rows=\"4\"\n required\n ></quantic-textarea>\n\n <div style=\"display: flex; gap: 0.5rem\">\n <quantic-button size=\"sm\" type=\"submit\" variant=\"primary\">Submit</quantic-button>\n <quantic-button size=\"sm\" type=\"reset\" variant=\"outline\">Reset</quantic-button>\n </div>\n\n <quantic-text size=\"xs\">\n This story demonstrates form-associated behavior using ElementInternals.\n Try submitting or resetting the form to see the values in the Actions panel.\n </quantic-text>\n </form>",
5145
+ "<form\n style=\"display: flex; gap: 1rem; flex-direction: column; max-width: 400px\"\n >\n <quantic-textarea\n name=\"message\"\n placeholder=\"Your message\"\n value=\"\"\n rows=\"4\"\n required\n ></quantic-textarea>\n\n <div style=\"display: flex; gap: 0.5rem\">\n <quantic-button size=\"sm\" type=\"submit\" variant=\"primary\">Submit</quantic-button>\n <quantic-button size=\"sm\" type=\"reset\" variant=\"outline\">Reset</quantic-button>\n </div>\n\n <p class=\"story-note\">\n This story demonstrates form-associated behavior using ElementInternals.\n Try submitting or resetting the form to see the values in the Actions panel.\n </p>\n </form>",
5158
5146
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"4\" resize=\"vertical\" invalid></quantic-textarea>",
5159
5147
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"lg\" name=\"textarea\" rows=\"4\" resize=\"vertical\"></quantic-textarea>",
5160
5148
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"4\" resize=\"none\"></quantic-textarea>",
5161
5149
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"4\" resize=\"vertical\" readonly></quantic-textarea>",
5162
5150
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"sm\" name=\"textarea\" rows=\"4\" resize=\"vertical\"></quantic-textarea>",
5163
5151
  "<quantic-textarea value=\"This textarea\nhas more rows\nfor longer content.\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"8\" resize=\"vertical\"></quantic-textarea>",
5164
- "<div style=\"display: flex; gap: .5em; flex-direction: column\">\n <quantic-textarea value=\"Hello World\" placeholder=\"Type something...\" size=\"md\" rows=\"4\"></quantic-textarea>\n <quantic-text size=\"xs\">See actions panel for more details.</quantic-text>\n </div>",
5152
+ "<div style=\"display: flex; gap: .5em; flex-direction: column\">\n <quantic-textarea value=\"Hello World\" placeholder=\"Type something...\" size=\"md\" rows=\"4\"></quantic-textarea>\n <p class=\"story-note\">See actions panel for more details.</p>\n </div>",
5165
5153
  "<quantic-textarea value=\"\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"4\" resize=\"vertical\"></quantic-textarea>"
5166
5154
  ],
5167
5155
  "relatedTo": [
@@ -5364,11 +5352,11 @@
5364
5352
  "<quantic-toggle\n name=\"\"\n checked\n label=\"Toggle label\"\n ></quantic-toggle>",
5365
5353
  "<quantic-toggle\n name=\"\"\n label=\"Toggle label\"\n ></quantic-toggle>",
5366
5354
  "<quantic-toggle\n name=\"\"\n label=\"Toggle label\"\n disabled\n ></quantic-toggle>",
5367
- "<form\n style=\"display: flex; gap: 1rem; flex-direction: column; max-width: 400px\"\n >\n <quantic-toggle\n name=\"notifications\"\n label=\"Enable notifications\"\n ></quantic-toggle>\n\n <quantic-toggle name=\"dark-mode\" label=\"Dark mode\" checked></quantic-toggle>\n <quantic-toggle name=\"auto-save\" label=\"Auto-save drafts\"></quantic-toggle>\n\n <div style=\"display: flex; gap: 0.5rem\">\n <quantic-button size=\"sm\" type=\"submit\" variant=\"primary\">Submit</quantic-button>\n <quantic-button size=\"sm\" type=\"reset\" variant=\"outline\">Reset</quantic-button>\n </div>\n\n <quantic-text size=\"xs\">\n This story demonstrates form-associated behavior using ElementInternals.\n Try submitting or resetting the form to see the values in the Actions\n panel.\n </quantic-text>\n </form>",
5355
+ "<form\n style=\"display: flex; gap: 1rem; flex-direction: column; max-width: 400px\"\n >\n <quantic-toggle\n name=\"notifications\"\n label=\"Enable notifications\"\n ></quantic-toggle>\n\n <quantic-toggle name=\"dark-mode\" label=\"Dark mode\" checked></quantic-toggle>\n <quantic-toggle name=\"auto-save\" label=\"Auto-save drafts\"></quantic-toggle>\n\n <div style=\"display: flex; gap: 0.5rem\">\n <quantic-button size=\"sm\" type=\"submit\" variant=\"primary\">Submit</quantic-button>\n <quantic-button size=\"sm\" type=\"reset\" variant=\"outline\">Reset</quantic-button>\n </div>\n\n <p class=\"story-note\">\n This story demonstrates form-associated behavior using ElementInternals.\n Try submitting or resetting the form to see the values in the Actions\n panel.\n </p>\n </form>",
5368
5356
  "<quantic-toggle\n name=\"\"\n label=\"Toggle label\"\n invalid\n ></quantic-toggle>",
5369
5357
  "<quantic-toggle\n name=\"\"\n size=\"lg\"\n label=\"Toggle label\"\n ></quantic-toggle>",
5370
5358
  "<quantic-toggle\n name=\"\"\n size=\"sm\"\n label=\"Toggle label\"\n ></quantic-toggle>",
5371
- "<div style=\"display: flex; gap: .5em; flex-direction: column\">\n <quantic-toggle\n name=\"toggle\"\n size=\"md\"\n ></quantic-toggle>\n <quantic-text size=\"xs\">See actions panel for more details.</quantic-text>\n </div>",
5359
+ "<div style=\"display: flex; gap: .5em; flex-direction: column\">\n <quantic-toggle\n name=\"toggle\"\n size=\"md\"\n ></quantic-toggle>\n <p class=\"story-note\">See actions panel for more details.</p>\n </div>",
5372
5360
  "<div style=\"display: flex; gap: 1rem; flex-direction: column\">\n <quantic-toggle name=\"notifications\">\n <span>Enable notifications</span>\n </quantic-toggle>\n\n <quantic-toggle name=\"dark-mode\" checked>\n <span>Dark mode</span>\n </quantic-toggle>\n\n <quantic-toggle name=\"auto-save\" disabled>\n <span>Auto-save</span>\n </quantic-toggle>\n\n <quantic-toggle name=\"marketing\">\n <div>\n <div style=\"font-weight: 600\">Marketing emails</div>\n <div style=\"font-size: 0.875rem; color: #666\">\n Receive updates about new features\n </div>\n </div>\n </quantic-toggle>\n </div>"
5373
5361
  ],
5374
5362
  "relatedTo": [