{
  "element": "nve-layout",
  "entrypoint": "@nvidia-elements/styles/layout.examples.json",
  "items": [
    {
      "id": "styles-layout",
      "name": "Default",
      "template": "<section nve-layout=\"row gap:sm\">\n  <div></div>\n  <div></div>\n  <div></div>\n</section>\n<section nve-layout=\"column gap:sm\">\n  <div></div>\n  <div></div>\n  <div></div>\n</section>\n<section nve-layout=\"grid gap:sm span-items:6\">\n  <div>columns 1-6</div>\n  <div>columns 7-12</div>\n</section>\n",
      "summary": "Foundational layout types (row, column, grid) available via the nve-layout attribute.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-layout-gap",
      "name": "LayoutGap",
      "template": "<section nve-layout=\"column gap:xs\">\n  <div></div>\n  <div></div>\n</section>\n<section nve-layout=\"column gap:sm\">\n  <div></div>\n  <div></div>\n</section>\n<section nve-layout=\"column gap:md\">\n  <div></div>\n  <div></div>\n</section>\n<section nve-layout=\"column gap:lg\">\n  <div></div>\n  <div></div>\n</section>\n<section nve-layout=\"column gap:xl\">\n  <div></div>\n  <div></div>\n</section>\n",
      "summary": "Gap spacing options (xs through xl) available via the nve-layout attribute.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-left",
      "name": "HorizontalAlignLeft",
      "template": "<section nve-layout=\"row gap:sm align:left\"><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card></section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-horizontal-center",
      "name": "HorizontalAlignHorizontalCenter",
      "template": "<section nve-layout=\"row gap:sm align:horizontal-center\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-right",
      "name": "HorizontalAlignRight",
      "template": "<section nve-layout=\"row gap:sm align:right\"><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card></section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-vertical-center",
      "name": "HorizontalAlignVerticalCenter",
      "template": "<section nve-layout=\"row gap:sm align:vertical-center\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-center",
      "name": "HorizontalAlignCenter",
      "template": "<section nve-layout=\"row gap:sm align:center\"><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card></section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-vertical-center-and-right",
      "name": "HorizontalAlignVerticalCenterAndRight",
      "template": "<section nve-layout=\"row gap:sm align:vertical-center align:right\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-left-and-bottom",
      "name": "HorizontalAlignLeftAndBottom",
      "template": "<section nve-layout=\"row gap:sm align:left align:bottom\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-horizontal-center-and-bottom",
      "name": "HorizontalAlignHorizontalCenterAndBottom",
      "template": "<section nve-layout=\"row gap:sm align:horizontal-center align:bottom\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-right-and-bottom",
      "name": "HorizontalAlignRightAndBottom",
      "template": "<section nve-layout=\"row gap:sm align:right align:bottom\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-space-around",
      "name": "HorizontalAlignSpaceAround",
      "template": "<section nve-layout=\"row align:space-around\"><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card></section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-space-between",
      "name": "HorizontalAlignSpaceBetween",
      "template": "<section nve-layout=\"row align:space-between\"><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card></section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-space-evenly",
      "name": "HorizontalAlignSpaceEvenly",
      "template": "<section nve-layout=\"row align:space-evenly\"><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card></section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-stretch-horizontal",
      "name": "HorizontalAlignStretchHorizontal",
      "template": "<section nve-layout=\"row gap:sm align:horizontal-stretch\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-stretch-vertical",
      "name": "HorizontalAlignStretchVertical",
      "template": "<section nve-layout=\"row gap:sm align:vertical-stretch\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-full-stretch",
      "name": "HorizontalAlignFullStretch",
      "template": "<section nve-layout=\"row gap:sm align:stretch\"><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card></section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-horizontal-align-wrap",
      "name": "HorizontalAlignWrap",
      "template": "<section nve-layout=\"row gap:sm align:left align:top align:wrap\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-top",
      "name": "VerticalAlignTop",
      "template": "<section nve-layout=\"column gap:sm align:top\"><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card></section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-vertical-center",
      "name": "VerticalAlignVerticalCenter",
      "template": "<section nve-layout=\"column gap:sm align:vertical-center\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-bottom",
      "name": "VerticalAlignBottom",
      "template": "<section nve-layout=\"column gap:sm align:bottom\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-horizontal-center",
      "name": "VerticalAlignHorizontalCenter",
      "template": "<section nve-layout=\"column gap:sm align:horizontal-center\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-center",
      "name": "VerticalAlignCenter",
      "template": "<section nve-layout=\"column gap:sm align:center\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-center-and-bottom",
      "name": "VerticalAlignCenterAndBottom",
      "template": "<section nve-layout=\"column gap:sm align:horizontal-center align:bottom\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-top-and-right",
      "name": "VerticalAlignTopAndRight",
      "template": "<section nve-layout=\"column gap:sm align:top align:right\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-center-and-right",
      "name": "VerticalAlignCenterAndRight",
      "template": "<section nve-layout=\"column gap:sm align:vertical-center align:right\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-bottom-and-right",
      "name": "VerticalAlignBottomAndRight",
      "template": "<section nve-layout=\"column gap:sm align:bottom align:right\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-space-around",
      "name": "VerticalAlignSpaceAround",
      "template": "<section nve-layout=\"column align:space-around\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-space-between",
      "name": "VerticalAlignSpaceBetween",
      "template": "<section nve-layout=\"column align:space-between\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-space-evenly",
      "name": "VerticalAlignSpaceEvenly",
      "template": "<section nve-layout=\"column align:space-evenly\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-stretch-horizontal",
      "name": "VerticalAlignStretchHorizontal",
      "template": "<section nve-layout=\"column gap:sm align:horizontal-stretch\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-stretch-vertical",
      "name": "VerticalAlignStretchVertical",
      "template": "<section nve-layout=\"column gap:sm align:vertical-stretch\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-vertical-align-full-stretch",
      "name": "VerticalAlignFullStretch",
      "template": "<section nve-layout=\"column gap:sm align:stretch\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-gap-none",
      "name": "GapNone",
      "template": "<section nve-layout=\"row gap:none\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-gap-xxs",
      "name": "GapXxs",
      "template": "<section nve-layout=\"row gap:xxs\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-gap-xs",
      "name": "GapXs",
      "template": "<section nve-layout=\"row gap:xs\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-gap-sm",
      "name": "GapSm",
      "template": "<section nve-layout=\"row gap:sm\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-gap-md",
      "name": "GapMd",
      "template": "<section nve-layout=\"row gap:md\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-gap-lg",
      "name": "GapLg",
      "template": "<section nve-layout=\"row gap:lg\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-gap-xl",
      "name": "GapXl",
      "template": "<section nve-layout=\"row gap:xl\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-gap-xxl",
      "name": "GapXxl",
      "template": "<section nve-layout=\"row gap:xxl\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-pad-none",
      "name": "PadNone",
      "template": "<section nve-layout=\"row gap:sm align:stretch pad:none\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-pad-xxs",
      "name": "PadXxs",
      "template": "<section nve-layout=\"row gap:sm align:stretch pad:xxs\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-pad-xs",
      "name": "PadXs",
      "template": "<section nve-layout=\"row gap:sm align:stretch pad:xs\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-pad-sm",
      "name": "PadSm",
      "template": "<section nve-layout=\"row gap:sm align:stretch pad:sm\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-pad-md",
      "name": "PadMd",
      "template": "<section nve-layout=\"row gap:sm align:stretch pad:md\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-pad-lg",
      "name": "PadLg",
      "template": "<section nve-layout=\"row gap:sm align:stretch pad:lg\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-pad-xl",
      "name": "PadXl",
      "template": "<section nve-layout=\"row gap:sm align:stretch pad:xl\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-pad-xxl",
      "name": "PadXxl",
      "template": "<section nve-layout=\"row gap:sm align:stretch pad:xxl\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-pad-top",
      "name": "PadTop",
      "template": "<section nve-layout=\"row gap:sm align:stretch pad-top:xxl\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-pad-left",
      "name": "PadLeft",
      "template": "<section nve-layout=\"row gap:sm align:stretch pad-left:xxl\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-pad-right",
      "name": "PadRight",
      "template": "<section nve-layout=\"row gap:sm align:stretch pad-right:xxl\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-pad-bottom",
      "name": "PadBottom",
      "template": "<section nve-layout=\"row gap:sm align:stretch pad-bottom:xxl\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-pad-x",
      "name": "PadX",
      "template": "<section nve-layout=\"row gap:sm align:stretch pad-x:xxl\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-pad-y",
      "name": "PadY",
      "template": "<section nve-layout=\"row gap:sm align:stretch pad-y:xxl\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-span2",
      "name": "GridSpan2",
      "template": "<section nve-layout=\"grid gap:md span-items:2\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-span6",
      "name": "GridSpan6",
      "template": "<section nve-layout=\"grid gap:md span-items:6\"><nve-card></nve-card><nve-card></nve-card></section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-align-top",
      "name": "GridAlignTop",
      "template": "<section nve-layout=\"grid gap:md align:top align:left\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-align-vertical-center",
      "name": "GridAlignVerticalCenter",
      "template": "<section nve-layout=\"grid gap:md align:vertical-center align:left\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-align-bottom",
      "name": "GridAlignBottom",
      "template": "<section nve-layout=\"grid gap:md align:bottom align:left\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-align-horizontal-center",
      "name": "GridAlignHorizontalCenter",
      "template": "<section nve-layout=\"grid gap:md align:horizontal-center\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-align-center",
      "name": "GridAlignCenter",
      "template": "<section nve-layout=\"grid gap:md align:center\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-align-center-and-bottom",
      "name": "GridAlignCenterAndBottom",
      "template": "<section nve-layout=\"grid gap:md align:horizontal-center align:bottom\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-align-top-and-right",
      "name": "GridAlignTopAndRight",
      "template": "<section nve-layout=\"grid gap:md align:top align:right\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-align-center-and-right",
      "name": "GridAlignCenterAndRight",
      "template": "<section nve-layout=\"grid gap:md align:vertical-center align:right\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-align-bottom-and-right",
      "name": "GridAlignBottomAndRight",
      "template": "<section nve-layout=\"grid gap:md align:bottom align:right\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-align-horizontal-stretch",
      "name": "GridAlignHorizontalStretch",
      "template": "<section nve-layout=\"grid gap:md align:horizontal-stretch\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-align-vertical-stretch",
      "name": "GridAlignVerticalStretch",
      "template": "<section nve-layout=\"grid gap:md align:vertical-stretch\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-align-full-stretch",
      "name": "GridAlignFullStretch",
      "template": "<section nve-layout=\"grid gap:md align:stretch\">\n  <nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card\n  ><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card><nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-grid-variable-spans",
      "name": "GridVariableSpans",
      "template": "<section nve-layout=\"grid gap:md\">\n  <span><nve-card></nve-card></span><span><nve-card></nve-card></span><span><nve-card></nve-card></span\n  ><span><nve-card></nve-card></span><span><nve-card></nve-card></span><span><nve-card></nve-card></span\n  ><span><nve-card></nve-card></span><span><nve-card></nve-card></span><span><nve-card></nve-card></span\n  ><span><nve-card></nve-card></span><span><nve-card></nve-card></span><span><nve-card></nve-card></span>\n  <span nve-layout=\"span:2\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:2\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:2\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:2\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:2\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:2\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:3\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:3\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:3\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:3\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:4\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:4\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:4\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:5\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:5\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:2\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:6\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:6\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:7\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:3\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:2\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:8\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:4\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:9\"><nve-card></nve-card></span>\n  <span nve-layout=\"span:3\"><nve-card></nve-card></span>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-full",
      "name": "Full",
      "template": "<section nve-layout=\"full\">\n  <nve-card></nve-card>\n</section>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "styles-layout-spacing",
      "name": "Spacing",
      "template": "<style>\n  nve-card {\n    min-width: 60px;\n    min-height: 60px;\n  }\n</style>\n<div nve-layout=\"column gap:lg align:stretch\">\n  <h2 nve-text=\"heading\">Space Around</h2>\n  <section nve-layout=\"row gap:md align:space-around\">\n    <div nve-layout=\"row gap:sm\">\n      <nve-search>\n        <input placeholder=\"Search\" type=\"search\" aria-label=\"Search\" />\n      </nve-search>\n    </div>\n    <div nve-layout=\"row gap:sm\">\n      <nve-icon-button icon-name=\"filter\"></nve-icon-button>\n      <nve-icon-button icon-name=\"sort-descending\"></nve-icon-button>\n    </div>\n  </section>\n  <h2 nve-text=\"heading\">Space Between</h2>\n  <section nve-layout=\"row gap:md align:space-between\">\n    <div nve-layout=\"row gap:sm\">\n      <nve-card></nve-card>\n      <nve-card></nve-card>\n    </div>\n    <div nve-layout=\"row gap:sm\">\n      <nve-card></nve-card>\n      <nve-card></nve-card>\n    </div>\n  </section>\n  <h2 nve-text=\"heading\">Space Between + Full</h2>\n  <section nve-layout=\"row gap:md align:space-between\">\n    <div nve-layout=\"row full gap:sm\">\n      <nve-search>\n        <input placeholder=\"Search\" type=\"search\" aria-label=\"Search\" />\n      </nve-search>\n    </div>\n    <div nve-layout=\"row gap:sm\">\n      <nve-icon-button icon-name=\"filter\"></nve-icon-button>\n      <nve-icon-button icon-name=\"sort-descending\"></nve-icon-button>\n    </div>\n  </section>\n  <h2 nve-text=\"heading\">Space Evenly</h2>\n  <section nve-layout=\"row gap:md align:space-evenly\">\n    <div nve-layout=\"row gap:sm\">\n      <nve-card></nve-card>\n      <nve-card></nve-card>\n    </div>\n    <div nve-layout=\"row gap:sm\">\n      <nve-card></nve-card>\n      <nve-card></nve-card>\n    </div>\n  </section>\n  <h2 nve-text=\"heading\">Nested Rows</h2>\n  <section nve-layout=\"row gap:md\">\n    <div nve-layout=\"row gap:sm\">\n      <nve-card></nve-card>\n      <nve-card></nve-card>\n    </div>\n    <div nve-layout=\"row gap:sm\">\n      <nve-card></nve-card>\n      <nve-card></nve-card>\n    </div>\n  </section>\n  <h2 nve-text=\"heading\">Rows</h2>\n  <section nve-layout=\"row gap:sm\">\n    <nve-card></nve-card>\n    <nve-card></nve-card>\n  </section>\n</div>\n",
      "summary": "",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "styles-layout-nested-layouts",
      "name": "NestedLayouts",
      "template": "<div nve-layout=\"column gap:lg pad:lg\">\n  <!-- should be width of buttons side by side -->\n  <div nve-layout=\"row gap:md\">\n    <nve-button>123</nve-button>\n    <nve-button>123</nve-button>\n    <nve-button>123</nve-button>\n  </div>\n  <!-- should be width of buttons stacked -->\n  <div nve-layout=\"column gap:md\">\n    <nve-button>123</nve-button>\n    <nve-button>123</nve-button>\n    <nve-button>123</nve-button>\n  </div>\n  <!-- should be width of buttons side by side -->\n  <div nve-layout=\"row gap:md\">\n    <div nve-layout=\"column gap:md\">\n      <nve-button>123</nve-button>\n      <nve-button>123</nve-button>\n      <nve-button>123</nve-button>\n    </div>\n    <div nve-layout=\"column gap:md\">\n      <nve-button>123</nve-button>\n      <nve-button>123</nve-button>\n      <nve-button>123</nve-button>\n    </div>\n  </div>\n  <!-- should be side by side 50% -->\n  <div nve-layout=\"grid span-items:6 gap:md\">\n    <div nve-layout=\"column gap:md\">\n      <nve-card>\n        <nve-card-content>123</nve-card-content>\n      </nve-card>\n      <nve-card>\n        <nve-card-content>123</nve-card-content>\n      </nve-card>\n      <nve-card>\n        <nve-card-content>123</nve-card-content>\n      </nve-card>\n    </div>\n    <div nve-layout=\"column gap:md\">\n      <nve-card>\n        <nve-card-content>123</nve-card-content>\n      </nve-card>\n      <nve-card>\n        <nve-card-content>123</nve-card-content>\n      </nve-card>\n      <nve-card>\n        <nve-card-content>123</nve-card-content>\n      </nve-card>\n    </div>\n  </div>\n  <!-- should be full width -->\n  <div nve-layout=\"column gap:md\">\n    <nve-card>\n      <nve-card-content>123</nve-card-content>\n    </nve-card>\n    <nve-card>\n      <nve-card-content>123</nve-card-content>\n    </nve-card>\n    <nve-card>\n      <nve-card-content>123</nve-card-content>\n    </nve-card>\n  </div>\n</div>\n",
      "summary": "",
      "description": "",
      "composition": false,
      "tags": []
    }
  ]
}