@ctrliq/quantic-components 1.85.1 → 1.86.1

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 (51) 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/field/field.stories.d.ts +1 -0
  10. package/dist/field/field.stories.js +1 -0
  11. package/dist/grid/grid.component.d.ts +8 -0
  12. package/dist/grid/grid.component.js +16 -2
  13. package/dist/index.js.map +1 -1
  14. package/dist/meta/index.js.map +1 -1
  15. package/dist/meta.json +62 -65
  16. package/dist/number-input/index.stories.js +3 -3
  17. package/dist/option-card/option-card-group.stories.js +3 -3
  18. package/dist/panel/panel-group.stories.js +1 -1
  19. package/dist/quantic-components.js +48 -10
  20. package/dist/quantic-components.js.map +1 -1
  21. package/dist/quantic-components.min.js +3 -3
  22. package/dist/quantic-components.min.js.map +1 -1
  23. package/dist/radio/index.stories.js +1 -1
  24. package/dist/radio/radio-group.stories.js +5 -5
  25. package/dist/register.js.map +1 -1
  26. package/dist/shared/meta.types.d.ts +1 -1
  27. package/dist/tabs/index.stories.js +35 -35
  28. package/dist/text/index.constants.d.ts +4 -0
  29. package/dist/text/index.constants.js +2 -0
  30. package/dist/text/index.d.ts +7 -0
  31. package/dist/text/index.js +13 -3
  32. package/dist/text-input/index.stories.js +3 -3
  33. package/dist/textarea/index.stories.js +3 -3
  34. package/dist/toggle/index.stories.js +3 -3
  35. package/dist/types/cluster/cluster.component.d.ts +7 -0
  36. package/dist/types/cluster/index.constants.d.ts +3 -0
  37. package/dist/types/field/field.stories.d.ts +1 -0
  38. package/dist/types/grid/grid.component.d.ts +8 -0
  39. package/dist/types/shared/meta.types.d.ts +1 -1
  40. package/dist/types/text/index.constants.d.ts +4 -0
  41. package/dist/types/text/index.d.ts +7 -0
  42. package/package.json +1 -1
  43. package/dist/cluster/cluster.stories.d.ts +0 -57
  44. package/dist/cluster/cluster.stories.js +0 -67
  45. package/dist/grid/grid.stories.d.ts +0 -36
  46. package/dist/grid/grid.stories.js +0 -95
  47. package/dist/text/index.stories.d.ts +0 -50
  48. package/dist/text/index.stories.js +0 -55
  49. package/dist/types/cluster/cluster.stories.d.ts +0 -57
  50. package/dist/types/grid/grid.stories.d.ts +0 -36
  51. 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:35:22.734Z",
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",
@@ -2100,6 +2094,15 @@
2100
2094
  "description": "Validation message shown when status is set."
2101
2095
  }
2102
2096
  ],
2097
+ "examples": [
2098
+ "<quantic-field\n fieldId=\"color-input\"\n label=\"Favorite Color\"\n hint=\"Pick your favorite color\"\n required\n >\n <input\n type=\"color\"\n id=\"color-input\"\n aria-labelledby=\"color-input\"\n aria-describedby=\"hint-color-input\"\n style=\"width: 100%; height: 48px; border: 1px solid var(--quantic-border-secondary); border-radius: var(--quantic-radius-md); cursor: pointer;\"\n />\n </quantic-field>",
2099
+ "<quantic-field\n fieldId=\"datetime-input\"\n label=\"Appointment Date & Time\"\n message=\"Appointment successfully scheduled\"\n status=\"success\"\n required\n >\n <quantic-text-input\n type=\"datetime-local\"\n id=\"datetime-input\"\n aria-labelledby=\"datetime-input\"\n aria-describedby=\"message-datetime-input\"\n ></quantic-text-input>\n </quantic-field>",
2100
+ "<quantic-field\n fieldId=\"custom-input-error\"\n label=\"File Upload\"\n hint=\"Maximum file size: 5MB\"\n message=\"File size exceeds the maximum limit\"\n status=\"error\"\n required\n >\n <input\n type=\"file\"\n id=\"custom-input-error\"\n aria-labelledby=\"custom-input-error\"\n aria-describedby=\"hint-custom-input-error message-custom-input-error\"\n aria-invalid=\"true\"\n style=\"width: 100%; padding: 8px; border: 2px solid var(--quantic-border-error); border-radius: var(--quantic-radius-md);\"\n />\n </quantic-field>",
2101
+ "<quantic-field\n fieldId=\"custom-textarea\"\n label=\"Comments\"\n hint=\"Please provide detailed feedback\"\n required\n >\n <textarea\n id=\"custom-textarea\"\n rows=\"5\"\n placeholder=\"Enter your comments here...\"\n aria-labelledby=\"custom-textarea\"\n aria-describedby=\"hint-custom-textarea\"\n style=\"width: 100%; padding: 12px; font-family: inherit; font-size: 14px; border: 1px solid var(--quantic-border-secondary); border-radius: var(--quantic-radius-md); resize: vertical;\"\n ></textarea>\n </quantic-field>",
2102
+ "<quantic-field\n fieldId=\"phone-input\"\n label=\"Phone Number\"\n hint=\"Enter your phone number with country code\"\n required\n >\n <div style=\"display: flex; gap: 8px;\">\n <quantic-text-input\n placeholder=\"+1\"\n maxlength=\"3\"\n aria-labelledby=\"phone-input\"\n aria-describedby=\"hint-phone-input\"\n style=\"max-width: 60px;\"\n ></quantic-text-input>\n <quantic-text-input\n placeholder=\"(555) 123-4567\"\n aria-labelledby=\"phone-input\"\n aria-describedby=\"hint-phone-input\"\n ></quantic-text-input>\n </div>\n </quantic-field>",
2103
+ "<quantic-field\n fieldId=\"with-hint\"\n label=\"Username\"\n hint=\"Must be 3–20 characters\"\n size=\"md\"\n hint-position=\"below\"\n >\n <quantic-text-input\n id=\"with-hint\"\n aria-labelledby=\"with-hint\"\n aria-describedby=\"hint-with-hint\"\n placeholder=\"Enter username\"\n size=\"md\"\n ></quantic-text-input>\n </quantic-field>",
2104
+ "<quantic-field\n fieldId=\"with-select\"\n label=\"Country\"\n hint=\"Select your country of residence\"\n size=\"md\"\n hint-position=\"below\"\n >\n <quantic-select\n id=\"with-select\"\n aria-labelledby=\"with-select\"\n aria-describedby=\"hint-with-select\"\n placeholder=\"Select a country\"\n >\n <option value=\"us\">United States</option>\n <option value=\"ca\">Canada</option>\n <option value=\"uk\">United Kingdom</option>\n <option value=\"au\">Australia</option>\n </quantic-select>\n </quantic-field>"
2105
+ ],
2103
2106
  "relatedTo": [
2104
2107
  "quantic-field-group",
2105
2108
  "quantic-fieldset"
@@ -2217,8 +2220,12 @@
2217
2220
  },
2218
2221
  {
2219
2222
  "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.",
2223
+ "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
2224
  "category": "layout",
2225
+ "deprecated": {
2226
+ "use": "quantic-card-group",
2227
+ "reason": "Grid sizes its children, so any track or row rule it does not anticipate cannot be reached from outside."
2228
+ },
2222
2229
  "props": [
2223
2230
  {
2224
2231
  "name": "density",
@@ -2240,12 +2247,9 @@
2240
2247
  "description": "Grid items to be laid out."
2241
2248
  }
2242
2249
  ],
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>"
2250
+ "relatedTo": [
2251
+ "quantic-card-group",
2252
+ "quantic-option-card-group"
2249
2253
  ]
2250
2254
  },
2251
2255
  {
@@ -2644,11 +2648,11 @@
2644
2648
  "<quantic-number-input\n value=\"16\"\n placeholder=\"0\"\n size=\"md\"\n name=\"number-input\"\n ></quantic-number-input>",
2645
2649
  "<quantic-number-input\n value=\"16\"\n placeholder=\"0\"\n size=\"md\"\n name=\"number-input\"\n disabled\n ></quantic-number-input>",
2646
2650
  "<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>",
2651
+ "<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
2652
  "<quantic-number-input\n value=\"16\"\n placeholder=\"0\"\n size=\"md\"\n name=\"number-input\"\n invalid\n ></quantic-number-input>",
2649
2653
  "<quantic-number-input\n value=\"16\"\n placeholder=\"0\"\n size=\"lg\"\n name=\"number-input\"\n ></quantic-number-input>",
2650
2654
  "<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>",
2655
+ "<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
2656
  "<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
2657
  "<quantic-number-input\n placeholder=\"Enter a number...\"\n size=\"md\"\n name=\"number-input\"\n ></quantic-number-input>",
2654
2658
  "<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 +2879,7 @@
2875
2879
  "examples": [
2876
2880
  "<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
2881
  "<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>",
2882
+ "<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
2883
  "<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
2884
  "<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
2885
  "<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 +3519,7 @@
3515
3519
  "<quantic-radio\n name=\"radio-example\"\n value=\"option1\"\n size=\"md\"\n label=\"Medium radio\"\n ></quantic-radio>",
3516
3520
  "<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
3521
  "<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>",
3522
+ "<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
3523
  "<quantic-radio\n name=\"radio-example\"\n value=\"option1\"\n size=\"xs\"\n label=\"XSmall radio\"\n ></quantic-radio>"
3520
3524
  ],
3521
3525
  "relatedTo": [
@@ -3608,7 +3612,7 @@
3608
3612
  "examples": [
3609
3613
  "<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
3614
  "<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>",
3615
+ "<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
3616
  "<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
3617
  "<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
3618
  ],
@@ -4674,19 +4678,19 @@
4674
4678
  }
4675
4679
  ],
4676
4680
  "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>",
4681
+ "<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>",
4682
+ "<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>",
4683
+ "<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>",
4684
+ "<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>",
4685
+ "<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>",
4686
+ "<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>",
4687
+ "<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
4688
  "<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>"
4689
+ "<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>",
4690
+ "<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>",
4691
+ "<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>",
4692
+ "<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>",
4693
+ "<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
4694
  ],
4691
4695
  "subComponents": [
4692
4696
  "quantic-tab-button",
@@ -4808,8 +4812,11 @@
4808
4812
  },
4809
4813
  {
4810
4814
  "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.",
4815
+ "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
4816
  "category": "display",
4817
+ "deprecated": {
4818
+ "reason": "Renders the consumer's element inside a shadow root, so the typography stylesheet cannot style it and IDREFs cannot cross the boundary."
4819
+ },
4813
4820
  "props": [
4814
4821
  {
4815
4822
  "name": "as",
@@ -4847,18 +4854,8 @@
4847
4854
  "description": "Text content to render."
4848
4855
  }
4849
4856
  ],
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>"
4857
+ "relatedTo": [
4858
+ "quantic-prose"
4862
4859
  ]
4863
4860
  },
4864
4861
  {
@@ -4992,14 +4989,14 @@
4992
4989
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\"></quantic-text-input>",
4993
4990
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\" disabled></quantic-text-input>",
4994
4991
  "<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>",
4992
+ "<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
4993
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\" invalid></quantic-text-input>",
4997
4994
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"lg\" name=\"text-input\"></quantic-text-input>",
4998
4995
  "<quantic-text-input value=\"secret123\" placeholder=\"Enter your password\" type=\"password\" size=\"md\" name=\"text-input\" autocomplete=\"current-password\"></quantic-text-input>",
4999
4996
  "<quantic-text-input value=\"secret123\" placeholder=\"Enter your password\" type=\"password\" size=\"md\" name=\"text-input\" autocomplete=\"current-password\" invalid></quantic-text-input>",
5000
4997
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\" readonly></quantic-text-input>",
5001
4998
  "<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>",
4999
+ "<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
5000
  "<quantic-text-input value=\"\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\"></quantic-text-input>",
5004
5001
  "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\"><span slot=\"prefix\">🔍</span></quantic-text-input>",
5005
5002
  "<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 +5151,14 @@
5154
5151
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"4\" resize=\"vertical\"></quantic-textarea>",
5155
5152
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"4\" resize=\"vertical\" disabled></quantic-textarea>",
5156
5153
  "<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>",
5154
+ "<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
5155
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"4\" resize=\"vertical\" invalid></quantic-textarea>",
5159
5156
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"lg\" name=\"textarea\" rows=\"4\" resize=\"vertical\"></quantic-textarea>",
5160
5157
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"4\" resize=\"none\"></quantic-textarea>",
5161
5158
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"4\" resize=\"vertical\" readonly></quantic-textarea>",
5162
5159
  "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"sm\" name=\"textarea\" rows=\"4\" resize=\"vertical\"></quantic-textarea>",
5163
5160
  "<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>",
5161
+ "<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
5162
  "<quantic-textarea value=\"\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"4\" resize=\"vertical\"></quantic-textarea>"
5166
5163
  ],
5167
5164
  "relatedTo": [
@@ -5364,11 +5361,11 @@
5364
5361
  "<quantic-toggle\n name=\"\"\n checked\n label=\"Toggle label\"\n ></quantic-toggle>",
5365
5362
  "<quantic-toggle\n name=\"\"\n label=\"Toggle label\"\n ></quantic-toggle>",
5366
5363
  "<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>",
5364
+ "<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
5365
  "<quantic-toggle\n name=\"\"\n label=\"Toggle label\"\n invalid\n ></quantic-toggle>",
5369
5366
  "<quantic-toggle\n name=\"\"\n size=\"lg\"\n label=\"Toggle label\"\n ></quantic-toggle>",
5370
5367
  "<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>",
5368
+ "<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
5369
  "<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
5370
  ],
5374
5371
  "relatedTo": [