{
  "element": "layout responsive",
  "entrypoint": "@nvidia-elements/styles/responsive.examples.json",
  "items": [
    {
      "id": "styles-responsive-gap-responsive",
      "name": "GapResponsive",
      "template": "<section nve-layout=\"row align:center &sm|gap:xs &md|gap:xl &lg|gap:xxl &xl|gap:xxl\">\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-responsive-pad-responsive",
      "name": "PadResponsive",
      "template": "<section nve-layout=\"row &sm|pad:xs &md|pad:lg &xl|pad:xxl\">\n  <nve-card nve-layout=\"full\"></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-responsive-hide-responsive",
      "name": "HideResponsive",
      "template": "<section nve-layout=\"row gap:lg\">\n  <nve-logo size=\"lg\" color=\"green-mint\" nve-display=\"&xs|hide\">1</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" nve-display=\"&sm|hide\">2</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" nve-display=\"&sm|hide\">3</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" nve-display=\"&sm|hide\">4</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" nve-display=\"&lg|hide\">5</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" nve-display=\"&lg|hide\">6</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" nve-display=\"&lg|hide\">7</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" nve-display=\"&xl|hide\">8</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" nve-display=\"&xl|hide\">9</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" nve-display=\"&xxl|hide\">10</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" nve-display=\"&xxl|hide\">11</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" nve-display=\"&xxl|hide\">12</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" nve-display=\"&sm|show\">13</nve-logo>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-responsive-flex-direction-responsive",
      "name": "FlexDirectionResponsive",
      "template": "<section nve-layout=\"column gap:sm &md|row &md|gap:xxl\">\n  <nve-logo size=\"lg\" color=\"green-mint\">1</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\">2</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\">3</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\">4</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\">5</nve-logo>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-responsive-flex-direction-reverse",
      "name": "FlexDirectionReverse",
      "template": "<style>\n  nve-logo.large {\n    --width: 200px;\n    --height: 200px;\n  }\n</style>\n<section nve-layout=\"column gap:lg &lg|row-reverse\">\n  <nve-logo class=\"large\" color=\"green-mint\">A</nve-logo>\n  <nve-logo class=\"large\" color=\"green-mint\">B</nve-logo>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-responsive-responsive-grid",
      "name": "ResponsiveGrid",
      "template": "<section nve-layout=\"grid gap:md span-items:12 &sm|span-items:6 &md|span-items:4 &lg|span-items:3\">\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-responsive-responsive-grid-items",
      "name": "ResponsiveGridItems",
      "template": "<section nve-layout=\"grid gap:md\">\n  <span nve-layout=\"&sm|span:4 &md|span:6 &lg|span:8\"><nve-card></nve-card></span>\n  <span nve-layout=\"&sm|span:8 &md|span:6 &lg|span:4\"><nve-card></nve-card></span>\n  <span nve-layout=\"&sm|span:8 &md|span:6 &lg|span:4\"><nve-card></nve-card></span>\n  <span nve-layout=\"&sm|span:4 &md|span:6 &lg|span:8\"><nve-card></nve-card></span>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-responsive-viewport-gap-responsive",
      "name": "ViewportGapResponsive",
      "template": "<section nve-layout=\"row align:center @sm|gap:xs @md|gap:lg @lg|gap:xl @xl|gap:xxl\">\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-responsive-viewport-pad-responsive",
      "name": "ViewportPadResponsive",
      "template": "<section nve-layout=\"row @sm|pad:xs @md|pad:lg @lg|pad:lg @xl|pad:xxl\">\n  <nve-card nve-layout=\"full\"></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-responsive-viewport-hide-responsive",
      "name": "ViewportHideResponsive",
      "template": "<section nve-layout=\"row gap:lg\">\n  <nve-logo size=\"lg\" color=\"purple-violet\">1</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\">2</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\">3</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\">4</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\" nve-display=\"@sm|hide\">5</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\" nve-display=\"@sm|hide\">6</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\" nve-display=\"@sm|hide\">7</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\" nve-display=\"@md|hide\">8</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\" nve-display=\"@md|hide\">9</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\" nve-display=\"@md|hide\">10</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\" nve-display=\"@lg|hide\">11</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\" nve-display=\"@lg|hide\">12</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\" nve-display=\"@sm|show\">13</nve-logo>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-responsive-viewport-flex-direction-responsive",
      "name": "ViewportFlexDirectionResponsive",
      "template": "<section nve-layout=\"column gap:sm @sm|row @sm|gap:xxl\">\n  <nve-logo size=\"lg\" color=\"purple-violet\">1</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\">2</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\">3</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\">4</nve-logo>\n  <nve-logo size=\"lg\" color=\"purple-violet\">5</nve-logo>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-responsive-viewport-flex-direction-reverse",
      "name": "ViewportFlexDirectionReverse",
      "template": "<style>\n  nve-logo.large {\n    --width: 200px;\n    --height: 200px;\n  }\n</style>\n<section nve-layout=\"column gap:lg @sm|row-reverse\">\n  <nve-logo class=\"large\" color=\"purple-violet\">A</nve-logo>\n  <nve-logo class=\"large\" color=\"purple-violet\">B</nve-logo>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-responsive-viewport-responsive-grid",
      "name": "ViewportResponsiveGrid",
      "template": "<section nve-layout=\"grid gap:md span-items:12 @sm|span-items:6 @md|span-items:4 @lg|span-items:3\">\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n  <nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-responsive-viewport-responsive-grid-items",
      "name": "ViewportResponsiveGridItems",
      "template": "<section nve-layout=\"grid gap:md\">\n  <span nve-layout=\"@sm|span:4 @md|span:6 @lg|span:8\"><nve-card></nve-card></span>\n  <span nve-layout=\"@sm|span:8 @md|span:6 @lg|span:4\"><nve-card></nve-card></span>\n  <span nve-layout=\"@sm|span:8 @md|span:6 @lg|span:4\"><nve-card></nve-card></span>\n  <span nve-layout=\"@sm|span:4 @md|span:6 @lg|span:8\"><nve-card></nve-card></span>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-responsive-responsive-combined",
      "name": "ResponsiveCombined",
      "template": "<nve-page>\n  <main nve-layout=\"column gap:lg pad:xs @lg|pad:xxl\">\n    <section nve-layout=\"grid gap:md span-items:12 @sm|span-items:6 @lg|span-items:4\">\n      <nve-card>\n        <nve-card-header>\n          <h3 nve-text=\"heading lg\">Responsive Card Example</h3>\n        </nve-card-header>\n        <nve-card-content>\n          <nve-logo size=\"lg\" nve-display=\"&sm|hide\" color=\"brand-green\">NV</nve-logo>\n          <p nve-text=\"body\">This card demonstrates combining container and viewport queries.</p>\n        </nve-card-content>\n      </nve-card>\n      <nve-card>\n        <nve-card-header>\n          <h3 nve-text=\"heading lg\">Responsive Card Example</h3>\n        </nve-card-header>\n        <nve-card-content>\n          <nve-logo size=\"lg\" nve-display=\"&sm|hide\">NV</nve-logo>\n          <p nve-text=\"body\">This card demonstrates combining container and viewport queries.</p>\n        </nve-card-content>\n      </nve-card>\n      <nve-card>\n        <nve-card-header>\n          <h3 nve-text=\"heading lg\">Responsive Card Example</h3>\n        </nve-card-header>\n        <nve-card-content>\n          <nve-logo size=\"lg\" nve-display=\"&sm|hide\">NV</nve-logo>\n          <p nve-text=\"body\">This card demonstrates combining container and viewport queries.</p>\n        </nve-card-content>\n      </nve-card>\n      <nve-card nve-display=\"@sm|hide\">\n        <nve-card-header>\n          <h3 nve-text=\"heading lg\">Responsive Card Example</h3>\n        </nve-card-header>\n        <nve-card-content>\n          <nve-logo size=\"lg\" nve-display=\"&sm|hide\">NV</nve-logo>\n          <p nve-text=\"body\">This card demonstrates combining container and viewport queries.</p>\n        </nve-card-content>\n      </nve-card>\n      <nve-card nve-display=\"@sm|hide\">\n        <nve-card-header>\n          <h3 nve-text=\"heading lg\">Responsive Card Example</h3>\n        </nve-card-header>\n        <nve-card-content>\n          <nve-logo size=\"lg\" nve-display=\"&sm|hide\">NV</nve-logo>\n          <p nve-text=\"body\">This card demonstrates combining container and viewport queries.</p>\n        </nve-card-content>\n      </nve-card>\n\n      <nve-card nve-display=\"@sm|hide\">\n        <nve-card-header>\n          <h3 nve-text=\"heading lg\">Responsive Card Example</h3>\n        </nve-card-header>\n        <nve-card-content>\n          <nve-logo size=\"lg\" nve-display=\"&sm|hide\">NV</nve-logo>\n          <p nve-text=\"body\">This card demonstrates combining container and viewport queries.</p>\n        </nve-card-content>\n      </nve-card>\n    </section>\n  </main>\n</nve-page>\n",
      "summary": "",
      "description": "",
      "composition": true,
      "tags": []
    }
  ]
}