@salesforce-ux/design-system/__internal/chunked/docs/ui/utilities/sizing/docs.mdx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,n,o={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5042:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return S},getElement:function(){return y}});var o=n(1594),l=n.n(o),i=n(5671),a=n(6547),r=n(806),s=function(e){return l().createElement("div",{className:"slds-size_".concat(e.size)},l().createElement("div",{className:"slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small"},".slds-size_",e.size))},m=[{id:"two-column",label:"2 Column Span",element:l().createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l().createElement(s,{size:"1-of-2"}),l().createElement(s,{size:"1-of-2"}),l().createElement(s,{size:"2-of-2"}))},{id:"three-column",label:"3 Column Span",element:l().createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l().createElement(s,{size:"1-of-3"}),l().createElement(s,{size:"1-of-3"}),l().createElement(s,{size:"1-of-3"}),l().createElement(s,{size:"1-of-3"}),l().createElement(s,{size:"2-of-3"}),l().createElement(s,{size:"3-of-3"}))},{id:"four-column",label:"4 Column Span",element:l().createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l().createElement(s,{size:"1-of-4"}),l().createElement(s,{size:"1-of-4"}),l().createElement(s,{size:"1-of-4"}),l().createElement(s,{size:"1-of-4"}),l().createElement(s,{size:"1-of-4"}),l().createElement(s,{size:"3-of-4"}),l().createElement(s,{size:"2-of-4"}),l().createElement(s,{size:"2-of-4"}),l().createElement(s,{size:"4-of-4"}))},{id:"five-column",label:"5 Column Span",element:l().createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l().createElement(s,{size:"1-of-5"}),l().createElement(s,{size:"1-of-5"}),l().createElement(s,{size:"1-of-5"}),l().createElement(s,{size:"1-of-5"}),l().createElement(s,{size:"1-of-5"}),l().createElement(s,{size:"1-of-5"}),l().createElement(s,{size:"4-of-5"}),l().createElement(s,{size:"2-of-5"}),l().createElement(s,{size:"3-of-5"}),l().createElement(s,{size:"5-of-5"}))},{id:"six-column",label:"6 Column Span",element:l().createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l().createElement(s,{size:"1-of-6"}),l().createElement(s,{size:"1-of-6"}),l().createElement(s,{size:"1-of-6"}),l().createElement(s,{size:"1-of-6"}),l().createElement(s,{size:"1-of-6"}),l().createElement(s,{size:"1-of-6"}),l().createElement(s,{size:"2-of-6"}),l().createElement(s,{size:"4-of-6"}),l().createElement(s,{size:"3-of-6"}),l().createElement(s,{size:"3-of-6"}),l().createElement(s,{size:"6-of-6"}))},{id:"seven-column",label:"7 Column Span",element:l().createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l().createElement(s,{size:"1-of-7"}),l().createElement(s,{size:"1-of-7"}),l().createElement(s,{size:"1-of-7"}),l().createElement(s,{size:"1-of-7"}),l().createElement(s,{size:"1-of-7"}),l().createElement(s,{size:"1-of-7"}),l().createElement(s,{size:"1-of-7"}),l().createElement(s,{size:"2-of-7"}),l().createElement(s,{size:"5-of-7"}),l().createElement(s,{size:"3-of-7"}),l().createElement(s,{size:"4-of-7"}),l().createElement(s,{size:"7-of-7"}))},{id:"eight-column",label:"8 Column Span",element:l().createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l().createElement(s,{size:"1-of-8"}),l().createElement(s,{size:"1-of-8"}),l().createElement(s,{size:"1-of-8"}),l().createElement(s,{size:"1-of-8"}),l().createElement(s,{size:"1-of-8"}),l().createElement(s,{size:"1-of-8"}),l().createElement(s,{size:"1-of-8"}),l().createElement(s,{size:"1-of-8"}),l().createElement(s,{size:"2-of-8"}),l().createElement(s,{size:"6-of-8"}),l().createElement(s,{size:"3-of-8"}),l().createElement(s,{size:"5-of-8"}),l().createElement(s,{size:"4-of-8"}),l().createElement(s,{size:"4-of-8"}),l().createElement(s,{size:"8-of-8"}))},{id:"twelve-column",label:"12 Column Span",element:l().createElement("div",{className:"demo-only demo-only--sizing slds-grid slds-wrap"},l().createElement(s,{size:"1-of-12"}),l().createElement(s,{size:"1-of-12"}),l().createElement(s,{size:"1-of-12"}),l().createElement(s,{size:"1-of-12"}),l().createElement(s,{size:"1-of-12"}),l().createElement(s,{size:"1-of-12"}),l().createElement(s,{size:"1-of-12"}),l().createElement(s,{size:"1-of-12"}),l().createElement(s,{size:"1-of-12"}),l().createElement(s,{size:"1-of-12"}),l().createElement(s,{size:"1-of-12"}),l().createElement(s,{size:"1-of-12"}),l().createElement(s,{size:"2-of-12"}),l().createElement(s,{size:"10-of-12"}),l().createElement(s,{size:"3-of-12"}),l().createElement(s,{size:"9-of-12"}),l().createElement(s,{size:"4-of-12"}),l().createElement(s,{size:"8-of-12"}),l().createElement(s,{size:"5-of-12"}),l().createElement(s,{size:"7-of-12"}),l().createElement(s,{size:"6-of-12"}),l().createElement(s,{size:"6-of-12"}),l().createElement(s,{size:"12-of-12"}))}],c=i.XB.a,f=i.XB.code,u=i.XB.h2,d=i.XB.h3,z=i.XB.p,p=i.XB.table,E=i.XB.tbody,h=i.XB.td,g=i.XB.th,v=i.XB.thead,b=i.XB.tr,y=function(){return(0,o.createElement)(i.Ay,{},(0,o.createElement)("div",{className:"doc lead"},"Sizing utilities allow for easy width sizing on an element."),u({id:"About-Sizing"},"About Sizing"),z({},"Our sizing class names are set up in a human-readable format, e.g. ",f({},".slds-size_1-of-2"),". This equates to a width of 50%."),z({},"By default, a group of sizing helpers are created based on standard grid column spans of 2, 3, 4, 5, 6, 7, 8 and 12. For example, if you need 3 cards to horizontally align along the same x-axis, you would use the class ",f({},".slds-size_1-of-3")," on each element. This will make each card take up 33.333% of containing section."),z({},"Our sizing helpers have the option to be responsive. By pre-pending a breakpoint name to a sizing helper, e.g. ",f({},".slds-medium-size_1-of-3")," you will output a width at the specified breakpoint name."),z({},"Absolute sizing helpers are also available (where widths are declared in ",f({},"rem")," units): ",f({},"xx-small"),", ",f({},"x-small"),", ",f({},"medium"),", ",f({},"large"),", ",f({},"x-large")," and ",f({},"xx-large")," as defined in the ",c({href:"/design-tokens/#category-sizing"},"sizing category of the Design Tokens"),". e.g. ",f({},".slds-size_large"),"."),z({},"In some uncommon cases, you may need a sizing helper that is up to a certain breakpoint. For these, use the classes prefixed with ",f({},"max-")," to achieve this result."),z({},"Here is an overview of our available breakpoint names:"),p({},v({},b({},g({},"Breakpoint Name"),g({},"Breakpoint Width"))),E({},b({},h({},f({},"small-")),h({},"30em / 480px and higher")),b({},h({},f({},"medium-")),h({},"48em / 768px and higher")),b({},h({},f({},"large-")),h({},"64em / 1024px and higher")),b({},h({},f({},"max-small-")),h({},"up to 29.9375em / 479px")),b({},h({},f({},"max-medium-")),h({},"up to 47.9375em / 767px")),b({},h({},f({},"max-large-")),h({},"up to 63.9375em / 1023px")))),z({},"Our responsive sizing helpers are built upon a mobile first approach. To achieve the desired outcome of this approach, you will need to append responsive sizing helpers to an element that overrides the previous breakpoint. A default sizing helper is required and responsive sizing helpers are additive. The following example demonstrates the class name position for each breakpoint:"),z({},f({},'<div class="[default] [small size override] [medium size override] [large size override]">')),u({id:"Examples"},"Examples"),d({id:"2-Column-Span"},"2 Column Span"),(0,o.createElement)(a.A,null,(0,r.NO)(m,"two-column")),d({id:"3-Column-Span"},"3 Column Span"),(0,o.createElement)(a.A,null,(0,r.NO)(m,"three-column")),d({id:"4-Column-Span"},"4 Column Span"),(0,o.createElement)(a.A,null,(0,r.NO)(m,"four-column")),d({id:"5-Column-Span"},"5 Column Span"),(0,o.createElement)(a.A,null,(0,r.NO)(m,"five-column")),d({id:"6-Column-Span"},"6 Column Span"),(0,o.createElement)(a.A,null,(0,r.NO)(m,"six-column")),d({id:"7-Column-Span"},"7 Column Span"),(0,o.createElement)(a.A,null,(0,r.NO)(m,"seven-column")),d({id:"8-Column-Span"},"8 Column Span"),(0,o.createElement)(a.A,null,(0,r.NO)(m,"eight-column")),d({id:"12-Column-Span"},"12 Column Span"),(0,o.createElement)(a.A,null,(0,r.NO)(m,"twelve-column")))},S=function(){return(0,i.Qr)(y())}},5206:function(e){e.exports=ReactDOM}},l={};function i(e){var t=l[e];if(void 0!==t)return t.exports;var n=l[e]={id:e,exports:{}};return o[e](n,n.exports,i),n.exports}i.m=o,i.amdO={},e=[],i.O=function(t,n,o,l){if(!n){var a=1/0;for(c=0;c<e.length;c++){n=e[c][0],o=e[c][1],l=e[c][2];for(var r=!0,s=0;s<n.length;s++)(!1&l||a>=l)&&Object.keys(i.O).every(function(e){return i.O[e](n[s])})?n.splice(s--,1):(r=!1,l<a&&(a=l));if(r){e.splice(c--,1);var m=o();void 0!==m&&(t=m)}}return t}l=l||0;for(var c=e.length;c>0&&e[c-1][2]>l;c--)e[c]=e[c-1];e[c]=[n,o,l]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var l=Object.create(null);i.r(l);var a={};t=t||[null,n({}),n([]),n(n)];for(var r=2&o&&e;("object"==typeof r||"function"==typeof r)&&!~t.indexOf(r);r=n(r))Object.getOwnPropertyNames(r).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},i.d(l,a),l},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=9585,function(){var e={9585:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var o,l,a=n[0],r=n[1],s=n[2],m=0;if(a.some(function(t){return 0!==e[t]})){for(o in r)i.o(r,o)&&(i.m[o]=r[o]);if(s)var c=s(i)}for(t&&t(n);m<a.length;m++)l=a[m],i.o(e,l)&&e[l]&&e[l][0](),e[l]=0;return i.O(c)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),i.nc=void 0;var a=i.O(void 0,[3540],function(){return i(5042)});a=i.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/utilities/sizing/docs.mdx.js"]=a}();