@salesforce-ux/design-system/__internal/chunked/showcase/ui/utilities/grid/example.jsx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/showcase/./ui/utilities/grid/example.jsx.js"]=function(e){function l(l){for(var s,r,i=l[0],d=l[1],c=l[2],o=0,u=[];o<i.length;o++)r=i[o],Object.prototype.hasOwnProperty.call(t,r)&&t[r]&&u.push(t[r][0]),t[r]=0;for(s in d)Object.prototype.hasOwnProperty.call(d,s)&&(e[s]=d[s]);for(m&&m(l);u.length;)u.shift()();return n.push.apply(n,c||[]),a()}function a(){for(var e,l=0;l<n.length;l++){for(var a=n[l],s=!0,i=1;i<a.length;i++){var d=a[i];0!==t[d]&&(s=!1)}s&&(n.splice(l--,1),e=r(r.s=a[0]))}return e}var s={},t={171:0,6:0,22:0,73:0,93:0,94:0,96:0,97:0,98:0,104:0,128:0,132:0,136:0,141:0,143:0},n=[];function r(l){if(s[l])return s[l].exports;var a=s[l]={i:l,l:!1,exports:{}};return e[l].call(a.exports,a,a.exports,r),a.l=!0,a.exports}r.m=e,r.c=s,r.d=function(e,l,a){r.o(e,l)||Object.defineProperty(e,l,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,l){if(1&l&&(e=r(e)),8&l)return e;if(4&l&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&l&&"string"!=typeof e)for(var s in e)r.d(a,s,function(l){return e[l]}.bind(null,s));return a},r.n=function(e){var l=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(l,"a",l),l},r.o=function(e,l){return Object.prototype.hasOwnProperty.call(e,l)},r.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_showcase=this.webpackJsonpSLDS___internal_chunked_showcase||[],d=i.push.bind(i);i.push=l,i=i.slice();for(var c=0;c<i.length;c++)l(i[c]);var m=d;return n.push([712,0]),a()}({0:function(e,l){e.exports=React},712:function(e,l,a){"use strict";a.r(l),a.d(l,"Context",(function(){return c})),a.d(l,"examples",(function(){return m}));var s=a(0),t=a.n(s),n=a(10),r="\n/* stylelint-disable selector-class-pattern */\n\n.slds-grid {\n  height: auto;\n  min-height: 8.75rem;\n  margin-bottom: 1rem;\n}\n\n.slds-grid > .slds-grid {\n  height: auto;\n  margin-bottom: 0;\n}\n\n.slds-col,\n.slds-grid > div:not(.slds-col) {\n  display: inline-flex;\n  background: #54698d;\n  color: #fff;\n  text-align: center;\n  background-clip: content-box;\n  border: 1px solid #fff;\n  border-radius: 0;\n}\n\n.slds-col > span {\n  align-self: center;\n  margin: auto;\n  font-size: 1.575rem;\n  padding: 0.5rem;\n}\n\n.slds-wrap {\n  align-items: stretch;\n}\n\n.slds-grid > div:not(.slds-col) > span {\n  align-self: center;\n  margin: auto;\n  font-size: 1.575rem;\n  padding: 0.5rem;\n}\n";function i(e,l){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);l&&(s=s.filter((function(l){return Object.getOwnPropertyDescriptor(e,l).enumerable}))),a.push.apply(a,s)}return a}function d(e,l,a){return l in e?Object.defineProperty(e,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[l]=a,e}var c=function(e){return t.a.createElement(s.Fragment,null,t.a.createElement("style",null,r),e.children)},m=[{id:"default-left-to-right",label:"Grid Default Left to Right",element:t.a.createElement(n.b,{columns:"3"}),description:"By default, the grid items within a `.slds-grid` do not stretch to take up that available white-space on the main axis. Apply `.slds-col` to a grid item, it will stretch across the main axis. The width of each grid item will be determined by the content within that region."},{id:"stretch",label:"Column Stretch",element:t.a.createElement("div",{className:"slds-grid"},t.a.createElement("div",{className:"slds-col"}),t.a.createElement("div",{className:"slds-col"})),description:"By default, the grid items within a `.slds-grid` do not stretch to take up that available white-space on the main axis. Apply `.slds-col` to a grid item, it will stretch across the main axis. The width of each grid item will be determined by the content within that region."},{id:"stretch-gutters",label:"Column Stretch w/ Gutters",element:t.a.createElement("div",{className:"slds-grid slds-grid_pull-padded-medium"},t.a.createElement("div",{className:"slds-col slds-p-horizontal_medium"}),t.a.createElement("div",{className:"slds-col slds-p-horizontal_medium"})),description:"To apply gutters between each grid item, the following spacing classes are available to add your intended gutters, `.slds-p-horizontal_small`, `.slds-p-horizontal_medium`, `.slds-p-horizontal_large`, `.slds-p-around_small`, `.slds-p-around_medium` and `.slds-p-around_large`. You may need to pull the grid items back to their original grid boundaries of the grid container, apply the classes `.slds-grid_pull-padded`, `.slds-grid_pull-padded-medium` or `.slds-grid_pull-padded-large` to the `.slds-grid`."},{id:"no-stretch",label:"No Column Stretch",element:t.a.createElement("div",{className:"slds-grid"},t.a.createElement("div",null),t.a.createElement("div",null))},{id:"no-stretch-gutters",label:"No Column Stretch w/ Gutters",element:t.a.createElement("div",{className:"slds-grid slds-grid_pull-padded-medium"},t.a.createElement("div",{className:"slds-p-horizontal_medium"}),t.a.createElement("div",{className:"slds-p-horizontal_medium"}))},{id:"regions-with-sizing",label:"Manual Sizing",element:t.a.createElement("div",{className:"slds-grid slds-wrap slds-grid_pull-padded"},t.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1"}),t.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_8-of-12"}),t.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_1-of-6 slds-large-size_4-of-12"}),t.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3"}),t.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3"}),t.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-large-size_1-of-3"},t.a.createElement("div",{className:"slds-grid slds-wrap slds-grid_pull-padded"},t.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_1-of-1 slds-large-size_1-of-2"}),t.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_1-of-1 slds-large-size_1-of-2"})))),description:"If you need to set explicit widths to your grid items, apply the sizing classes to your grid items. Check out [sizing helpers here](/utilities/sizing)."},{id:"horizontal-align-center",label:"Horizontal Alignment - Center",element:t.a.createElement("div",{className:"slds-grid slds-grid_align-center"},t.a.createElement("div",null),t.a.createElement("div",null),t.a.createElement("div",null),t.a.createElement("div",null)),description:"If you want your columns to grow from the the center of the main (horizontal) axis, apply the class `slds-grid_align-center`."},{id:"horizontal-align-space",label:"Horizontal Alignment - Space",element:t.a.createElement("div",{className:"slds-grid slds-grid_align-space"},t.a.createElement("div",null),t.a.createElement("div",null),t.a.createElement("div",null),t.a.createElement("div",null)),description:"To evenly distribute columns on the main axis with an equal amount of white space separating the columns, apply the class `slds-grid_align-space`."},{id:"vertical-align-item",label:"Vertical Alignment - Item",element:t.a.createElement("div",{className:"slds-grid"},t.a.createElement("div",{className:"slds-align-top"}),t.a.createElement("div",{className:"slds-align-middle"}),t.a.createElement("div",{className:"slds-align-bottom"})),description:"To specify the vertical placement of grid items on the cross axis, you can apply `.slds-align-top`, `.slds-align-middle`, and `.slds-align-bottom` to a grid item. Note, to vertically align elements on a cross-axis of a `.slds-grid`, the elements need available vertical white space. This is usually achieved by having a height applied to the `.slds-grid`."},{id:"vertical-strecth",label:"Vertical Stretch",element:t.a.createElement("div",{className:"slds-grid slds-grid_vertical-stretch"},t.a.createElement("div",null),t.a.createElement("div",null),t.a.createElement("div",null),t.a.createElement("div",null)),description:"By default, grid items extend vertically unless `.slds-wrap` is applied to your parent grid container or you have multiple rows. If you have need multiple rows that stretch the height of the parent grid container, you can apply the class `.slds-grid_vertical-stretch`. Note, to vertically align elements on a cross-axis of a `.slds-grid`, the elements need available vertical white space. This is usually achieved by having a height applied to the `.slds-grid`."},{id:"align-item-bump",label:"Alignment Item Bump",element:t.a.createElement("div",{className:"slds-grid"},t.a.createElement("div",null),t.a.createElement("div",null),t.a.createElement("div",null),t.a.createElement("div",null),t.a.createElement("div",{className:"slds-col_bump-left"}),t.a.createElement("div",null)),description:'To "bump" a single grid item or a grid item plus the precedding grid items that follow, apply the class `.slds-col_bump-{direction}`, with `{direction}` being either `left`, `right`, `top` or `bottom` to a grid item.'},{id:"order",label:"Ordering",element:t.a.createElement("div",{className:"slds-grid"},t.a.createElement("div",{className:"slds-order_2 slds-medium-order_1 slds-large-order_3"}),t.a.createElement("div",{className:"slds-order_3 slds-medium-order_2 slds-large-order_2"}),t.a.createElement("div",{className:"slds-order_1 slds-medium-order_3 slds-large-order_1"})),description:"These helper classes visually reorder grid elements independently from their position in the markup."},{id:"container-app-frame",label:"Container - App Frame",element:t.a.createElement("div",{className:"slds-grid slds-grid_frame"},t.a.createElement("div",null)),description:"If you want your application to fill 100% of the width and height of the viewport and nest other grids inside, use the top-level app helper class `.slds-grid_frame`."},{id:"containers",label:"Containers",element:t.a.createElement("div",{className:"slds-grid slds-grid_vertical"},t.a.createElement("div",{className:"slds-container_small"}),t.a.createElement("div",{className:"slds-container_medium"}),t.a.createElement("div",{className:"slds-container_large"}),t.a.createElement("div",{className:"slds-container_x-large"}),t.a.createElement("div",{className:"slds-container_fluid"})),description:"You can use the grid system&rsquo;s containers to constrain your content to a certain width. You can center or left or right align the containers within your viewport."},{id:"2-col-with-gutters",label:"Grid Column Gutters 2 col basic",element:t.a.createElement(n.b,{columns:"2",className:"slds-gutters"})},{id:"intro-3-col-with-gutters",label:"Grid Intro 3 col with gutters",element:t.a.createElement(n.b,{columns:"3",className:"slds-gutters"})},{id:"intro-4-col-with-gutters",label:"Grid Intro 4 col with gutters",element:t.a.createElement(n.b,{columns:"4",className:"slds-gutters"})},{id:"intro-12-col",label:"Grid Intro 12 col",element:t.a.createElement(n.b,{columns:"12"})},{id:"grid-col-width-2-col",label:"Grid Column Width 2 col",element:t.a.createElement(n.b,{className:"slds-gutters"},t.a.createElement(n.a,{className:"slds-size_2-of-3"},"1"),t.a.createElement(n.a,{className:"slds-size_1-of-3"},"2"))},{id:"col-width-all-options",label:"Grid Column Width all options",element:t.a.createElement(n.b,{className:"slds-wrap"},t.a.createElement(n.a,{className:"slds-size_1-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_1-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_1-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_1-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_1-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_1-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_1-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_1-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_1-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_1-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_1-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_1-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_2-of-12"},"2"),t.a.createElement(n.a,{className:"slds-size_2-of-12"},"2"),t.a.createElement(n.a,{className:"slds-size_2-of-12"},"2"),t.a.createElement(n.a,{className:"slds-size_2-of-12"},"2"),t.a.createElement(n.a,{className:"slds-size_2-of-12"},"2"),t.a.createElement(n.a,{className:"slds-size_2-of-12"},"2"),t.a.createElement(n.a,{className:"slds-size_3-of-12"},"3"),t.a.createElement(n.a,{className:"slds-size_3-of-12"},"3"),t.a.createElement(n.a,{className:"slds-size_3-of-12"},"3"),t.a.createElement(n.a,{className:"slds-size_3-of-12"},"3"),t.a.createElement(n.a,{className:"slds-size_4-of-12"},"4"),t.a.createElement(n.a,{className:"slds-size_4-of-12"},"4"),t.a.createElement(n.a,{className:"slds-size_4-of-12"},"4"),t.a.createElement(n.a,{className:"slds-size_5-of-12"},"5"),t.a.createElement(n.a,{className:"slds-size_5-of-12"},"5"),t.a.createElement(n.a,{className:"slds-size_2-of-12"},"2"),t.a.createElement(n.a,{className:"slds-size_6-of-12"},"6"),t.a.createElement(n.a,{className:"slds-size_6-of-12"},"6"),t.a.createElement(n.a,{className:"slds-size_7-of-12"},"7"),t.a.createElement(n.a,{className:"slds-size_5-of-12"},"5"),t.a.createElement(n.a,{className:"slds-size_8-of-12"},"8"),t.a.createElement(n.a,{className:"slds-size_4-of-12"},"4"),t.a.createElement(n.a,{className:"slds-size_9-of-12"},"9"),t.a.createElement(n.a,{className:"slds-size_3-of-12"},"3"),t.a.createElement(n.a,{className:"slds-size_10-of-12"},"10"),t.a.createElement(n.a,{className:"slds-size_2-of-12"},"2"),t.a.createElement(n.a,{className:"slds-size_11-of-12"},"11"),t.a.createElement(n.a,{className:"slds-size_1-of-12"},"1"))},{id:"col-width-all-fraction-options",label:"Grid Column Width all fraction options",element:t.a.createElement(n.b,{small:!0,className:"slds-wrap"},t.a.createElement(n.a,{className:"slds-size_1-of-6"},"1/6"),t.a.createElement(n.a,{className:"slds-size_1-of-6"},"1/6"),t.a.createElement(n.a,{className:"slds-size_1-of-6"},"1/6"),t.a.createElement(n.a,{className:"slds-size_1-of-6"},"1/6"),t.a.createElement(n.a,{className:"slds-size_1-of-6"},"1/6"),t.a.createElement(n.a,{className:"slds-size_1-of-6"},"1/6"),t.a.createElement(n.a,{className:"slds-size_1-of-4"},"1/4"),t.a.createElement(n.a,{className:"slds-size_1-of-4"},"1/4"),t.a.createElement(n.a,{className:"slds-size_1-of-4"},"1/4"),t.a.createElement(n.a,{className:"slds-size_1-of-4"},"1/4"),t.a.createElement(n.a,{className:"slds-size_1-of-3"},"1/3"),t.a.createElement(n.a,{className:"slds-size_1-of-3"},"1/3"),t.a.createElement(n.a,{className:"slds-size_1-of-3"},"1/3"),t.a.createElement(n.a,{className:"slds-size_1-of-2"},"1/2"),t.a.createElement(n.a,{className:"slds-size_1-of-2"},"1/2"),t.a.createElement(n.a,{className:"slds-size_1-of-1"},"1/1"))},{id:"2-col-gutters-utilities",label:"Grid Column Gutters 2 col utilities",element:t.a.createElement(n.b,null,t.a.createElement(n.a,{className:"slds-p-horizontal_medium"},"1"),t.a.createElement(n.a,{className:"slds-p-horizontal_medium"},"2"))},{id:"2-col-pull-padded",label:"Grid Column Gutters 2 col pull padded",element:t.a.createElement(n.b,{className:"slds-grid_pull-padded-medium"},t.a.createElement(n.a,{className:"slds-p-horizontal_medium"},"1"),t.a.createElement(n.a,{className:"slds-p-horizontal_medium"},"2"))},{id:"direct-col-gutters",label:"Grid Direct Column Gutters",element:t.a.createElement(n.b,{className:"slds-gutters_direct"},t.a.createElement(n.a,null,"1"),t.a.createElement("div",{className:"slds-grid"},t.a.createElement(n.a,null,"Nested Column 1"),t.a.createElement(n.a,null,"Nested Column 2")),t.a.createElement(n.a,null,"3"))},{id:"all-children-col-gutters",label:"Grid All Children Column Gutters",element:t.a.createElement(n.b,{className:"slds-gutters"},t.a.createElement(n.a,null,"1"),t.a.createElement("div",{className:"slds-grid"},t.a.createElement(n.a,null,"Nested Column 1"),t.a.createElement(n.a,null,"Nested Column 2")),t.a.createElement(n.a,null,"3"))},{id:"3-col-wrapping",label:"Grid Column Wrapping 3 col",element:t.a.createElement(n.b,{className:"slds-wrap"},t.a.createElement(n.a,{className:"slds-size_8-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_5-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_5-of-12"},"1"))},{id:"3-col-reordering",label:"Grid Column Reordering 3 col",element:t.a.createElement(n.b,null,t.a.createElement(n.a,{className:"slds-order_3"},"1"),t.a.createElement(n.a,{className:"slds-order_1"},"2"),t.a.createElement(n.a,{className:"slds-order_2"},"3"))},{id:"col-nesting",label:"Grid Column Nesting",element:t.a.createElement(n.b,{className:"slds-wrap"},t.a.createElement(n.a,{className:"slds-size_10-of-12"},"1"),t.a.createElement("div",{className:"slds-col slds-grid slds-size_1-of-2"},t.a.createElement(n.a,{className:"slds-size_1-of-2"},"Nested: 1"),t.a.createElement(n.a,{className:"slds-size_1-of-2"},"Nested: 2")))},{id:"vertical-align",label:"Grid Vertical Align",element:t.a.createElement(n.b,{className:"slds-grid_vertical"},t.a.createElement(n.a,null,"1"),t.a.createElement(n.a,null,"2"),t.a.createElement(n.a,null,"3"))},{id:"horizontal-reversed",label:"Grid Horizontal Reversed",element:t.a.createElement(n.b,{className:"slds-grid_reverse"},t.a.createElement(n.a,null,"1"),t.a.createElement(n.a,null,"2"),t.a.createElement(n.a,null,"3"))},{id:"vertical-aligned-reversed",label:"Grid Vertical Aligned Reversed",element:t.a.createElement(n.b,{className:"slds-grid_vertical-reverse",style:{height:"200px"}},t.a.createElement(n.a,null,"1"),t.a.createElement(n.a,null,"2"),t.a.createElement(n.a,null,"3"))},{id:"responsive-2-col-mobile-desktop",label:"Grid Responsive 2 col mobile desktop",element:t.a.createElement(n.b,{className:"slds-wrap"},t.a.createElement(n.a,{className:"slds-size_1-of-1 slds-large-size_8-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_1-of-1 slds-large-size_4-of-12"},"2"))},{id:"responsive-2-col-mobile-tablet-desktop",label:"Grid Responsive 2 col mobile tablet desktop",element:t.a.createElement(n.b,{className:"slds-wrap"},t.a.createElement(n.a,{className:"slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_8-of-12"},"1"),t.a.createElement(n.a,{className:"slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_4-of-12"},"2"))},{id:"responsive-reordering-2-col-mobile-desktop",label:"Grid Responsive Reordering 2 col mobile desktop",element:t.a.createElement(n.b,null,t.a.createElement(n.a,{className:"slds-order_2 slds-large-order_1"},"1"),t.a.createElement(n.a,{className:"slds-order_1 slds-large-order_2"},"2"))},{id:"horizontal-align-center-basic",label:"Grid Horizontal Align center basic",element:t.a.createElement(n.b,{className:"slds-grid_align-center"},t.a.createElement(n.a,null,"1"),t.a.createElement(n.a,null,"2"),t.a.createElement(n.a,null,"3"))},{id:"horizontal-align-center-variable",label:"Grid Horizontal Align center variable",element:t.a.createElement(n.b,{className:"slds-grid_align-center"},t.a.createElement(n.a,{className:"slds-size_1-of-6"},"1"),t.a.createElement(n.a,{className:"slds-grow-none"},"2"),t.a.createElement(n.a,{className:"slds-size_1-of-6"},"3"))},{id:"horizontal-align-spaced",label:"Grid Horizontal Align spaced",element:t.a.createElement(n.b,{className:"slds-grid_align-space"},t.a.createElement(n.a,null,"1"),t.a.createElement(n.a,null,"2"),t.a.createElement(n.a,null,"3"))},{id:"horizontal-align-spread",label:"Grid Horizontal Align spread",element:t.a.createElement(n.b,{className:"slds-grid_align-spread"},t.a.createElement(n.a,null,"1"),t.a.createElement(n.a,null,"2"),t.a.createElement(n.a,null,"3"))},{id:"horizontal-align-end",label:"Grid Horizontal Align end",element:t.a.createElement(n.b,{className:"slds-grid_align-end"},t.a.createElement(n.a,null,"1"),t.a.createElement(n.a,null,"2"),t.a.createElement(n.a,null,"3"))},{id:"content-alignment-bump-left",label:"Grid Content Alignment Bump Left",element:t.a.createElement(n.b,{bareGrid:!0},t.a.createElement("div",null,t.a.createElement("span",null,"1")),t.a.createElement("div",null,t.a.createElement("span",null,"2")),t.a.createElement("div",null,t.a.createElement("span",null,"3")),t.a.createElement("div",null,t.a.createElement("span",null,"4")),t.a.createElement("div",{className:"slds-col_bump-left"},t.a.createElement("span",null,"5")),t.a.createElement("div",null,t.a.createElement("span",null,"6")))},{id:"content-alignment-bump-right",label:"Grid Content Alignment Bump Right",element:t.a.createElement(n.b,{bareGrid:!0},t.a.createElement("div",null,t.a.createElement("span",null,"1")),t.a.createElement("div",null,t.a.createElement("span",null,"2")),t.a.createElement("div",null,t.a.createElement("span",null,"3")),t.a.createElement("div",null,t.a.createElement("span",null,"4")),t.a.createElement("div",{className:"slds-col_bump-right"},t.a.createElement("span",null,"5")),t.a.createElement("div",null,t.a.createElement("span",null,"6")))},{id:"vertical-align-start",label:"Grid Vertical Align start",demoStyles:".slds-grid { height: 200px; }",element:t.a.createElement(n.b,{className:"slds-grid_vertical-align-start"},t.a.createElement(n.a,null,"1"),t.a.createElement(n.a,null,"2"),t.a.createElement(n.a,null,"3"))},{id:"vertical-align-center",label:"Grid Vertical Align center",demoStyles:".slds-grid { height: 200px; }",element:t.a.createElement(n.b,{className:"slds-grid_vertical-align-center"},t.a.createElement(n.a,null,"1"),t.a.createElement(n.a,null,"2"),t.a.createElement(n.a,null,"3"))},{id:"vertical-align-end",label:"Grid Vertical Align end",demoStyles:".slds-grid { height: 200px; }",element:t.a.createElement(n.b,{className:"slds-grid_vertical-align-end"},t.a.createElement(n.a,null,"1"),t.a.createElement(n.a,null,"2"),t.a.createElement(n.a,null,"3"))},{id:"vertical-align-absolute-center",label:"Grid Vertical Align absolute center",demoStyles:".slds-grid { height: 200px; }",element:t.a.createElement(n.b,{className:"slds-grid_vertical-align-center slds-grid_align-center"},t.a.createElement(n.a,null,"1"),t.a.createElement(n.a,null,"2"),t.a.createElement(n.a,null,"3"))},{id:"vertical-align-individual",label:"Grid Vertical Align individual",demoStyles:".slds-grid { height: 200px; }",element:t.a.createElement(n.b,null,t.a.createElement(n.a,{className:"slds-align-top"},"1"),t.a.createElement(n.a,{className:"slds-align-middle"},"2"),t.a.createElement(n.a,{className:"slds-align-bottom"},"3"))}].map((function(e){return function(e){for(var l=1;l<arguments.length;l++){var a=null!=arguments[l]?arguments[l]:{};l%2?i(Object(a),!0).forEach((function(l){d(e,l,a[l])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(a,l))}))}return e}({},e,{demoStyles:r+e.demoStyles||""})}))}});