text: webpackJsonp([1,34],{494:function(t,a,e){e(585);var l=e(0)(null,e(548),"data-v-172ceb40",null);t.exports=l.exports},495:function(t,a,e){e(607);var l=e(0)(null,e(576),"data-v-d5af2876",null);t.exports=l.exports},517:function(t,a,e){a=t.exports=e(4)(),a.push([t.i,'.layout-demo[data-v-172ceb40]{min-height:100px}.no-gutter>.md-layout[data-v-172ceb40]:last-child:before{background-color:rgba(0,0,0,.2)!important}.grid>.md-layout>.md-layout[data-v-172ceb40]:not(.md-column){min-height:40px;margin-bottom:16px}.grid-content[data-v-172ceb40]{padding:16px}.gutter .color .md-layout[data-v-172ceb40]{color:rgba(0,0,0,.54);font-size:13px;font-weight:500;text-indent:8px}.color:not(.md-column).md-gutter-8>.md-layout[data-v-172ceb40]:before{right:4px;left:4px}.color.md-column.md-gutter-8>.md-layout[data-v-172ceb40]:before{top:4px;bottom:4px}.color:not(.md-column).md-gutter-16>.md-layout[data-v-172ceb40]:before{right:8px;left:8px}.color.md-column.md-gutter-16>.md-layout[data-v-172ceb40]:before{top:8px;bottom:8px}.color:not(.md-column).md-gutter-24>.md-layout[data-v-172ceb40]:before{right:12px;left:12px}.color.md-column.md-gutter-24>.md-layout[data-v-172ceb40]:before{top:12px;bottom:12px}.color:not(.md-column).md-gutter-40>.md-layout[data-v-172ceb40]:before{right:20px;left:20px}.color.md-column.md-gutter-40>.md-layout[data-v-172ceb40]:before{top:20px;bottom:20px}.color>.md-layout[data-v-172ceb40]{position:relative}.color>.md-layout[data-v-172ceb40]:before{width:100%;height:100%;margin-bottom:-200%;display:block;pointer-events:none;background-color:rgba(0,0,0,.12);content:" "}.column-size[data-v-172ceb40]{height:250px!important}.column-size+.column-size[data-v-172ceb40]{margin-top:48px!important}.color-red[data-v-172ceb40]:before{background-color:#f44336!important}.color-blue[data-v-172ceb40]:before{background-color:#2196f3!important}.color-yellow[data-v-172ceb40]:before{background-color:#ffeb3b!important}.color-green[data-v-172ceb40]:before{background-color:#4caf50!important}.color-purple[data-v-172ceb40]:before{background-color:#9c27b0!important}.color-pink[data-v-172ceb40]:before{background-color:#e91e63!important}.color-teal[data-v-172ceb40]:before{background-color:#009688!important}.color-orange[data-v-172ceb40]:before{background-color:#ff9800!important}.properties table tr td[data-v-172ceb40]:first-child{white-space:nowrap}',""])},539:function(t,a,e){a=t.exports=e(4)(),a.push([t.i,".demo>[data-v-d5af2876]{margin:.5em 0;display:block}",""])},548:function(t,a){t.exports={render:function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("page-content",{attrs:{"page-title":"UI Elements - Layout"}},[e("docs-component",[e("div",{slot:"description"},[e("p",[t._v("Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.")]),t._v(" "),e("p",[t._v("By default you can create gutter-free layouts, make the grid system calculate the best margin size for each screen or set it by yourself with the "),e("code",[t._v("md-gutter")]),t._v(" property. If you want the automatic calculation the engine will set "),e("code",[t._v("16px")]),t._v(" for small screens and then apply "),e("code",[t._v("24px")]),t._v(" for medium to large.")]),t._v(" "),e("p",[t._v("You can create columns size by size or rows to make your layout fluid. You can combine columns with rows or even use nested columns.")]),t._v(" "),e("p",[t._v("The grid system makes use of flexbox to be flexible enough and give the best experience with a great and easy API. You can create responsive layouts with few lines of code with a declarative engine. The system work with some breakpoints:")]),t._v(" "),e("md-table",{staticClass:"properties",slot:"properties"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Size")]),t._v(" "),e("md-table-head",[t._v("Description")])],1)],1),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[e("code",[t._v("xsmall")])]),t._v(" "),e("md-table-cell",[t._v("600px")]),t._v(" "),e("md-table-cell",[t._v("For screens who have the maximum of 600px wide. For small, medium and large handsets in portrait. Also applies to small handsets in portrait.")])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[e("code",[t._v("small")])]),t._v(" "),e("md-table-cell",[t._v("960px")]),t._v(" "),e("md-table-cell",[t._v("For screens who have between of 600px and 960px wide. For medium and large handsets in landscape, small and large tablets in portrait mode and some desktop monitors.")])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[e("code",[t._v("medium")])]),t._v(" "),e("md-table-cell",[t._v("1280px")]),t._v(" "),e("md-table-cell",[t._v("For screens who have between of 960px and 1280px wide. For small and large tablets in landscape and desktop monitors.")])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[e("code",[t._v("large")])]),t._v(" "),e("md-table-cell",[t._v("1920px")]),t._v(" "),e("md-table-cell",[t._v("For screens who have between of 1280px and 1920px wide. For large desktop monitors.")])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[e("code",[t._v("xlarge")])]),t._v(" "),e("md-table-cell",[t._v(">1920px")]),t._v(" "),e("md-table-cell",[t._v("For screens bigger than 1920px wide. For huge desktop monitors or side-by-side screens.")])],1)],1)],1)],1),t._v(" "),e("div",{slot:"api"},[e("api-table",{attrs:{name:"md-layout"}},[e("md-table",{staticClass:"properties",slot:"properties"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Type")]),t._v(" "),e("md-table-head",[t._v("Description")])],1)],1),t._v(" "),e("md-table-body",[e("md-table-row",[e("md-table-cell",[t._v("md-tag")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("The output tag. Default "),e("code",[t._v("div")])])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-gutter")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean|Number")])]),t._v(" "),e("md-table-cell",[t._v("Apply a gutter space to direct childs of the element that have this property. If "),e("code",[t._v("true")]),t._v(" the gutter will be calculated automatically by the current screen size. If number the size will be fixed. Accepts "),e("code",[t._v("8")]),t._v("|"),e("code",[t._v("16")]),t._v("|"),e("code",[t._v("24")]),t._v("|"),e("code",[t._v("40")]),t._v(". Default "),e("code",[t._v("false")])])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-row")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Create a row container. All child will be side by side.")])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-row-{type}")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Create a row container on screen sizes less than or equal to given breakpoint. Example: "),e("code",[t._v("md-row-large")])])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-column")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Create a column container. All child will be one underneath the other.")])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-column-{type}")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Create a column container on screen sizes less than or equal to given breakpoint. Example: "),e("code",[t._v("md-column-small")])])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-hide-{type}")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Hide a layout container/child on screen sizes less than or equal to given breakpoint. Example: "),e("code",[t._v("md-hide-medium")])])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-hide-{type}-and-up")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean")])]),t._v(" "),e("md-table-cell",[t._v("Hide a layout container/child on screen sizes greater than or equal to given breakpoint. Example: "),e("code",[t._v("md-hide-medium-and-up")])])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-flex")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean|Number")])]),t._v(" "),e("md-table-cell",[t._v("Create a flexible child. If "),e("code",[t._v("true")]),t._v(" the child element will grow to fill the empty space available on the parent element. If "),e("code",[t._v("Number")]),t._v(" the size of the child will be sized according to the giver size. Accepts values multiple of 5. Also accepts the values 33 and 66. Default: "),e("code",[t._v("true")])])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-flex-{type}")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Boolean|Number")])]),t._v(" "),e("md-table-cell",[t._v("Create a flexible child on screen sizes less than or equal to given breakpoint. Example: "),e("code",[t._v('md-flex-small="33"')])])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-flex-offset")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Number")])]),t._v(" "),e("md-table-cell",[t._v("Create a empty space before the actual child. Accepts the same value of "),e("code",[t._v("md-flex")]),t._v(" Example: "),e("code",[t._v('md-flex-offset="50"')])])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-flex-offset-{type}")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Number")])]),t._v(" "),e("md-table-cell",[t._v("Create a empty space before the actual child  on screen sizes less than or equal to given breakpoint. Example: "),e("code",[t._v('md-flex-offset-small="20"')])])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-align")]),t._v(" "),e("md-table-cell",[e("code",[t._v("String")])]),t._v(" "),e("md-table-cell",[t._v("Apply an alignment to the container. Accepts "),e("code",[t._v("start")]),t._v("|"),e("code",[t._v("center")]),t._v("|"),e("code",[t._v("end")]),t._v(" Example: "),e("code",[t._v('md-align="end"')])])],1),t._v(" "),e("md-table-row",[e("md-table-cell",[t._v("md-align-{type}")]),t._v(" "),e("md-table-cell",[e("code",[t._v("Number")])]),t._v(" "),e("md-table-cell",[t._v("Apply an alignment to the container on screen sizes less than or equal to given breakpoint. Example: "),e("code",[t._v('md-align-xlarge="center"')])])],1)],1)],1)],1)],1),t._v(" "),e("div",{slot:"example"},[e("example-box",{attrs:{"card-title":"Responsive"}},[e("div",{staticClass:"layout-demo grid",slot:"demo"},[e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout",{staticClass:"color-red",attrs:{"md-flex-xsmall":"100","md-flex-small":"50","md-flex-medium":"33"}},[e("div",{staticClass:"grid-content"},[t._v("\n                md-flex-xsmall "),e("br"),t._v('\n                md-flex-small="50" '),e("br"),t._v('\n                md-flex-medium="33"\n              ')])]),t._v(" "),e("md-layout",{staticClass:"color-blue",attrs:{"md-flex-xsmall":"100","md-flex-small":"50","md-flex-medium":"33"}},[e("div",{staticClass:"grid-content"},[t._v("\n                md-flex-xsmall "),e("br"),t._v('\n                md-flex-small="50" '),e("br"),t._v('\n                md-flex-medium="33"\n              ')])]),t._v(" "),e("md-layout",{staticClass:"color-pink",attrs:{"md-flex-xsmall":"100","md-flex-small":"50","md-flex-medium":"33"}},[e("div",{staticClass:"grid-content"},[t._v("\n                md-flex-xsmall "),e("br"),t._v('\n                md-flex-small="50" '),e("br"),t._v('\n                md-flex-medium="33"\n              ')])]),t._v(" "),e("md-layout",{staticClass:"color-teal",attrs:{"md-flex-xsmall":"100","md-flex-small":"50","md-flex-medium":"33"}},[e("div",{staticClass:"grid-content"},[t._v("\n                md-flex-xsmall "),e("br"),t._v('\n                md-flex-small="50" '),e("br"),t._v('\n                md-flex-medium="33"\n              ')])]),t._v(" "),e("md-layout",{staticClass:"color-green",attrs:{"md-flex-small":"100","md-flex-medium":"33","md-hide-xsmall":""}},[e("div",{staticClass:"grid-content"},[t._v('\n                md-flex-medium="33" '),e("br"),t._v("\n                md-hide-xsmall\n              ")])]),t._v(" "),e("md-layout",{staticClass:"color-yellow",attrs:{"md-flex":"","md-flex-medium":"33","md-hide-small":""}},[e("div",{staticClass:"grid-content"},[t._v('\n                md-flex-medium="33" '),e("br"),t._v("\n                md-hide-small\n              ")])])],1)],1),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n            <md-layout md-gutter>\n              <md-layout md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">\n                md-flex-xsmall <br>\n                md-flex-small="50" <br>\n                md-flex-medium="33"\n              </md-layout>\n\n              <md-layout md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">\n                md-flex-xsmall <br>\n                md-flex-small="50" <br>\n                md-flex-medium="33"\n              </md-layout>\n\n              <md-layout md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">\n                md-flex-xsmall <br>\n                md-flex-small="50" <br>\n                md-flex-medium="33"\n              </md-layout>\n\n              <md-layout md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">\n                md-flex-xsmall <br>\n                md-flex-small="50" <br>\n                md-flex-medium="33"\n              </md-layout>\n\n              <md-layout md-flex-small="100" md-flex-medium="33" md-hide-xsmall>\n                md-flex-medium="33" <br>\n                md-hide-xsmall\n              </md-layout>\n\n              <md-layout md-flex md-flex-medium="33" md-hide-small>\n                md-flex-medium="33" <br>\n                md-hide-small\n              </md-layout>\n            </md-layout>\n          ')])],1)]),t._v(" "),e("example-box",{attrs:{"card-title":"Sizes and Offset"}},[e("div",{staticClass:"layout-demo grid",slot:"demo"},[e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout",{attrs:{"md-flex":"50"}}),t._v(" "),e("md-layout"),t._v(" "),e("md-layout"),t._v(" "),e("md-layout")],1),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout",{attrs:{"md-flex":"33"}}),t._v(" "),e("md-layout")],1),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout"),t._v(" "),e("md-layout",{attrs:{"md-flex":"33","md-flex-offset":"33"}})],1),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout",{attrs:{"md-flex":"75"}}),t._v(" "),e("md-layout")],1),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout",{attrs:{"md-flex":"50"}}),t._v(" "),e("md-layout"),t._v(" "),e("md-layout")],1),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":""}},[e("md-layout",{attrs:{"md-flex":"25","md-flex-offset":"25"}}),t._v(" "),e("md-layout",{attrs:{"md-flex":"25"}})],1)],1),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n            <md-layout md-gutter>\n              <md-layout md-flex="50"></md-layout>\n              <md-layout></md-layout>\n              <md-layout></md-layout>\n              <md-layout></md-layout>\n            </md-layout>\n\n            <md-layout md-gutter>\n              <md-layout md-flex="33"></md-layout>\n              <md-layout></md-layout>\n            </md-layout>\n\n            <md-layout md-gutter>\n              <md-layout></md-layout>\n              <md-layout md-flex="33" md-flex-offset="33"></md-layout>\n            </md-layout>\n\n            <md-layout md-gutter>\n              <md-layout md-flex="75"></md-layout>\n              <md-layout></md-layout>\n            </md-layout>\n\n            <md-layout md-gutter>\n              <md-layout md-flex="50"></md-layout>\n              <md-layout></md-layout>\n              <md-layout></md-layout>\n            </md-layout>\n\n            <md-layout md-gutter>\n              <md-layout md-flex="25" md-flex-offset="25"></md-layout>\n              <md-layout md-flex="25"></md-layout>\n            </md-layout>\n          ')])],1)]),t._v(" "),e("example-box",{attrs:{"card-title":"Direction"}},[e("div",{staticClass:"layout-demo grid",slot:"demo"},[e("md-layout",{staticClass:"column-size",attrs:{"md-gutter":"16"}},[e("md-layout",{staticClass:"color",attrs:{"md-column":"","md-gutter":"16"}},[e("md-layout",{attrs:{"md-flex":"20"}}),t._v(" "),e("md-layout")],1),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-column":"","md-gutter":"16"}},[e("md-layout",{attrs:{"md-flex":"50"}}),t._v(" "),e("md-layout"),t._v(" "),e("md-layout")],1)],1)],1),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n            <md-layout md-gutter>\n              <md-layout md-column md-gutter>\n                <md-layout md-flex="20"></md-layout>\n                <md-layout></md-layout>\n              </md-layout>\n\n              <md-layout md-column md-gutter>\n                <md-layout md-flex="50"></md-layout>\n                <md-layout></md-layout>\n                <md-layout></md-layout>\n              </md-layout>\n            </md-layout>\n          ')])],1)]),t._v(" "),e("example-box",{attrs:{"card-title":"Alignment"}},[e("div",{staticClass:"layout-demo grid gutter",slot:"demo"},[e("md-layout",{staticClass:"color",attrs:{"md-gutter":"16"}},[e("md-layout",{attrs:{"md-flex":"50"}},[e("span",[t._v("start")])])],1),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-align":"end","md-gutter":"16"}},[e("md-layout",{attrs:{"md-flex":"33"}},[e("span",[t._v("end")])])],1),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-align":"end","md-gutter":"16"}},[e("md-layout",{attrs:{"md-flex":"20"}},[e("span",[t._v("end")])]),t._v(" "),e("md-layout",{attrs:{"md-flex":"20"}},[e("span",[t._v("end")])])],1),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-align":"center","md-gutter":"16"}},[e("md-layout",{attrs:{"md-flex":"35"}},[e("span",[t._v("center")])]),t._v(" "),e("md-layout",{attrs:{"md-flex":"35"}},[e("span",[t._v("center")])])],1)],1),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n            <md-layout md-gutter="16">\n              <md-layout md-flex="50">\n                <span>start</span>\n              </md-layout>\n            </md-layout>\n\n            <md-layout md-align="end" md-gutter="16">\n              <md-layout md-flex="33">\n                <span>end</span>\n              </md-layout>\n            </md-layout>\n\n            <md-layout md-align="end" md-gutter="16">\n              <md-layout md-flex="20">\n                <span>end</span>\n              </md-layout>\n\n              <md-layout md-flex="20">\n                <span>end</span>\n              </md-layout>\n            </md-layout>\n\n            <md-layout md-align="center" md-gutter="16">\n              <md-layout md-flex="35">\n                <span>center</span>\n              </md-layout>\n\n              <md-layout md-flex="35">\n                <span>center</span>\n              </md-layout>\n            </md-layout>\n          ')])],1)]),t._v(" "),e("example-box",{attrs:{"card-title":"Gutters"}},[e("div",{staticClass:"layout-demo grid gutter",slot:"demo"},[e("md-layout",{staticClass:"no-gutter color"},[e("md-layout"),t._v(" "),e("md-layout")],1),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":8}},[e("md-layout",[e("span",[t._v("8px")])]),t._v(" "),e("md-layout",[e("span",[t._v("8px")])]),t._v(" "),e("md-layout",[e("span",[t._v("8px")])]),t._v(" "),e("md-layout",[e("span",[t._v("8px")])]),t._v(" "),e("md-layout",[e("span",[t._v("8px")])]),t._v(" "),e("md-layout",[e("span",[t._v("8px")])])],1),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":"16"}},[e("md-layout",[e("span",[t._v("16px")])]),t._v(" "),e("md-layout",[e("span",[t._v("16px")])]),t._v(" "),e("md-layout",[e("span",[t._v("16px")])]),t._v(" "),e("md-layout",[e("span",[t._v("16px")])]),t._v(" "),e("md-layout",[e("span",[t._v("16px")])])],1),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":24}},[e("md-layout",[e("span",[t._v("24px")])]),t._v(" "),e("md-layout",[e("span",[t._v("24px")])]),t._v(" "),e("md-layout",[e("span",[t._v("24px")])]),t._v(" "),e("md-layout",[e("span",[t._v("24px")])])],1),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":40}},[e("md-layout",[e("span",[t._v("40px")])]),t._v(" "),e("md-layout",[e("span",[t._v("40px")])]),t._v(" "),e("md-layout",[e("span",[t._v("40px")])])],1),t._v(" "),e("md-layout",{staticClass:"color",attrs:{"md-gutter":!0}},[e("md-layout",[e("span",[t._v("Automatic")])]),t._v(" "),e("md-layout",[e("span",[t._v("Automatic")])])],1)],1),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n            <md-layout>\n              <md-layout></md-layout>\n              <md-layout></md-layout>\n            </md-layout>\n\n            <md-layout :md-gutter="8">\n              <md-layout>\n                <span>8px</span>\n              </md-layout>\n\n              <md-layout>\n                <span>8px</span>\n              </md-layout>\n\n              <md-layout>\n                <span>8px</span>\n              </md-layout>\n\n              <md-layout>\n                <span>8px</span>\n              </md-layout>\n\n              <md-layout>\n                <span>8px</span>\n              </md-layout>\n\n              <md-layout>\n                <span>8px</span>\n              </md-layout>\n            </md-layout>\n\n            <md-layout md-gutter="16">\n              <md-layout>\n                <span>16px</span>\n              </md-layout>\n\n              <md-layout>\n                <span>16px</span>\n              </md-layout>\n\n              <md-layout>\n                <span>16px</span>\n              </md-layout>\n\n              <md-layout>\n                <span>16px</span>\n              </md-layout>\n\n              <md-layout>\n                <span>16px</span>\n              </md-layout>\n            </md-layout>\n\n            <md-layout :md-gutter="24">\n              <md-layout>\n                <span>24px</span>\n              </md-layout>\n\n              <md-layout>\n                <span>24px</span>\n              </md-layout>\n\n              <md-layout>\n                <span>24px</span>\n              </md-layout>\n\n              <md-layout>\n                <span>24px</span>\n              </md-layout>\n            </md-layout>\n\n            <md-layout :md-gutter="40">\n              <md-layout>\n                <span>40px</span>\n              </md-layout>\n\n              <md-layout>\n                <span>40px</span>\n              </md-layout>\n\n              <md-layout>\n                <span>40px</span>\n              </md-layout>\n            </md-layout>\n\n            <md-layout md-gutter>\n              <md-layout>\n                <span>Automatic</span>\n              </md-layout>\n\n              <md-layout>\n                <span>Automatic</span>\n              </md-layout>\n            </md-layout>\n          ')])],1)])],1)])],1)},staticRenderFns:[]}},576:function(t,a){t.exports={render:function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("page-content",{attrs:{"page-title":"UI Elements - Typography"}},[e("docs-component",[e("div",{slot:"description"},[e("h2",{staticClass:"md-title"},[t._v("Styles")]),t._v(" "),e("p",[t._v("Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.")]),t._v(" "),e("h2",{staticClass:"md-title"},[t._v("Typeface")]),t._v(" "),e("p",[t._v("Roboto has been refined extensively to work across the wider set of supported platforms. It is slightly wider and rounder, giving it greater clarity and making it more optimistic.")])]),t._v(" "),e("div",{slot:"example"},[e("example-box",{attrs:{"card-title":"Default"}},[e("div",{staticClass:"demo",slot:"demo"},[e("span",{staticClass:"md-display-4"},[t._v("Display 4")]),t._v(" "),e("span",{staticClass:"md-display-3"},[t._v("Display 3")]),t._v(" "),e("span",{staticClass:"md-display-2"},[t._v("Display 2")]),t._v(" "),e("span",{staticClass:"md-display-1"},[t._v("Display 1")]),t._v(" "),e("span",{staticClass:"md-headline"},[t._v("Headline")]),t._v(" "),e("span",{staticClass:"md-title"},[t._v("Title")]),t._v(" "),e("span",{staticClass:"md-subheading"},[t._v("Subheading")]),t._v(" "),e("span",{staticClass:"md-body-2"},[t._v("Body 2")]),t._v(" "),e("span",{staticClass:"md-body-1"},[t._v("Body 1")]),t._v(" "),e("span",{staticClass:"md-caption"},[t._v("Caption")]),t._v(" "),e("a",{attrs:{href:"#/typography"}},[t._v("Link")])]),t._v(" "),e("div",{slot:"code"},[e("code-block",{attrs:{lang:"xml"}},[t._v('\n            <span class="md-display-4">Display 4</span>\n            <span class="md-display-3">Display 3</span>\n            <span class="md-display-2">Display 2</span>\n            <span class="md-display-1">Display 1</span>\n            <span class="md-headline">Headline</span>\n            <span class="md-title">Title</span>\n            <span class="md-subheading">Subheading</span>\n            <span class="md-body-2">Body 2</span>\n            <span class="md-body-1">Body 1</span>\n            <span class="md-caption">Caption</span>\n            <a href="#/typography">Link</a>\n          ')])],1)])],1)])],1)},staticRenderFns:[]}},585:function(t,a,e){var l=e(517);"string"==typeof l&&(l=[[t.i,l,""]]),l.locals&&(t.exports=l.locals);e(5)("56f9cd58",l,!0)},607:function(t,a,e){var l=e(539);"string"==typeof l&&(l=[[t.i,l,""]]),l.locals&&(t.exports=l.locals);e(5)("109f1a38",l,!0)}});