text: (window.webpackJsonp=window.webpackJsonp||[]).push([[1926],{"013z":function(e,a,t){"use strict";var i=t("q1tI"),o=t.n(i),s=t("NmYn"),n=t.n(s),l=t("Wbzz"),p=t("Xrax"),c=t("a7k6"),b=t("TSYQ"),r=t.n(b),g=t("QH2O"),d=t("qKvR");var A=({title:e,tabs:a=[]})=>Object(d.b)("div",{className:r()(g.pageHeader,{[g.withTabs]:a.length})},Object(d.b)("div",{className:"bx--grid"},Object(d.b)("div",{className:"bx--row"},Object(d.b)("div",{className:"bx--col-lg-12"},Object(d.b)("h1",{id:"page-title",className:g.text},e))))),m=t("BAC9");var f=({relativePagePath:e,repository:a})=>{const{site:{siteMetadata:{repository:t}}}=Object(l.useStaticQuery)("1364590287"),{baseUrl:i,subDirectory:o,branch:s}=a||t,n=`${i}/edit/${s}${o}/src/pages${e}`;return i?Object(d.b)("div",{className:"bx--row "+m.row},Object(d.b)("div",{className:"bx--col"},Object(d.b)("a",{className:m.link,href:n},"Edit this page on GitHub"))):null},u=t("FCXl"),h=t("I8xM");class w extends o.a.Component{render(){const{tabs:e,slug:a}=this.props,t=a.split("/").filter(Boolean).slice(-1)[0],i=e.map(e=>{const i=n()(e,{lower:!0,strict:!0}),o=i===t,s=new RegExp(t+"/?(#.*)?$"),p=a.replace(s,i);return Object(d.b)("li",{key:e,className:r()({[h.selectedItem]:o},h.listItem)},Object(d.b)(l.Link,{className:h.link,to:""+p},e))});return Object(d.b)("div",{className:h.tabsContainer},Object(d.b)("div",{className:"bx--grid"},Object(d.b)("div",{className:"bx--row"},Object(d.b)("div",{className:"bx--col-lg-12 bx--col-no-gutter"},Object(d.b)("nav",null,Object(d.b)("ul",{className:h.list},i))))))}}var y=w,O=t("MjG9");a.a=({pageContext:e,children:a,location:t,Title:i})=>{const{frontmatter:o={},relativePagePath:s,titleType:b}=e,{tabs:r,title:g,theme:m,description:h,keywords:w}=o,{site:{pathPrefix:x}}=Object(l.useStaticQuery)("2456312558"),C=x?t.pathname.replace(x,""):t.pathname,j=r?C.split("/").filter(Boolean).slice(-1)[0]||n()(r[0],{lower:!0}):"";return Object(d.b)(c.a,{tabs:r,homepage:!1,theme:m,pageTitle:g,pageDescription:h,pageKeywords:w,titleType:b},Object(d.b)(A,{title:i?Object(d.b)(i,null):g,label:"label",tabs:r}),r&&Object(d.b)(y,{slug:C,tabs:r,currentTab:j}),Object(d.b)(O.a,{padded:!0},a,Object(d.b)(f,{relativePagePath:s})),Object(d.b)(u.a,{pageContext:e,location:t,slug:C,tabs:r,currentTab:j}),Object(d.b)(p.a,null))}},"5f3s":function(e,a,t){"use strict";t.r(a),t.d(a,"_frontmatter",(function(){return l})),t.d(a,"default",(function(){return w}));t("3bBZ"),t("q1tI");var i=t("7ljp"),o=t("013z");t("qKvR");function s(){return(s=Object.assign||function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e}).apply(this,arguments)}function n(e,a){if(null==e)return{};var t,i,o=function(e,a){if(null==e)return{};var t,i,o={},s=Object.keys(e);for(i=0;i<s.length;i++)t=s[i],a.indexOf(t)>=0||(o[t]=e[t]);return o}(e,a);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(i=0;i<s.length;i++)t=s[i],a.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const l={},p=e=>function(a){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),Object(i.b)("div",a)},c=p("PageDescription"),b=p("AnchorLinks"),r=p("AnchorLink"),g=p("Caption"),d=p("Row"),A=p("Column"),m=p("DoDontRow"),f=p("DoDont"),u={_frontmatter:l},h=o.a;function w(e){let{components:a}=e,t=n(e,["components"]);return Object(i.b)(h,s({},u,t,{components:a,mdxType:"MDXLayout"}),Object(i.b)("h4",null,"Maintainers:"),Object(i.b)("p",null,Object(i.b)("a",s({parentName:"p"},{href:"https://github.com/vikkipaterson"}),"Vikki Paterson"),",\n",Object(i.b)("a",s({parentName:"p"},{href:"https://github.com/chloepoulterdesign"}),"Chloe Poulter")),Object(i.b)(c,{mdxType:"PageDescription"},Object(i.b)("p",null,"To create is to generate a new resource. Creating is distinct from adding, but\nthe two are often confused. To add a resource is to include a resource that\nalready exists.")),Object(i.b)("h4",null,"Options:"),Object(i.b)(b,{mdxType:"AnchorLinks"},Object(i.b)(r,{mdxType:"AnchorLink"},"Standard creation"),Object(i.b)(r,{mdxType:"AnchorLink"},"Multistep creation"),Object(i.b)(r,{mdxType:"AnchorLink"},"Anatomy"),Object(i.b)(r,{mdxType:"AnchorLink"},"Pre-create")),Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABeElEQVQ4y62U3UvCUBiH+6udoBdOIboLItLL6sKrwMtK6TKELoIg0n2QpIJzG247+zJ1+7X32JalWUkHnp2zw/a8e39j24vjGP859ujQajZRLBYhlkoQ8nnkEwRB2Egul0OhUEClUkFZFLEv5nFQFlA7OcJsNlsKx+MxHh676HQldDpPkCQJqqquoSgKer0e2u02atUqTs/OcXghQ6z30brrJ6bFUugHIV4GI2i6gZGmwbYtTKdTeJ6HIAg4YRhyFosF+oMBGo0GLq+uUb8NcHwD3D9PP4Su50MzGRw3gGU7cJwlpmliMpnw2bZtMMb4PhWgEUcRMGdA5OA1cJJi0bvQZVAVGbIs8bZkWeZt09owDPi+z2WE67p8pgIchyUP4SaFGKIoE3oYDofQknZ1XeeZEnRuWVYmSed0vQrtZUJqIc2LskuhzFZl2/gkXG0pzY/42uY28Ubhdxf+xJ+Ev2VNSOFnb24HKKJMSAv6bObz+U6k99J/4Q0nCMiijOREIwAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Example of a create pattern",title:"Example of a create pattern",src:"/static/e92ec530fe018b3ba6425c9752f1bea5/a7549/1.png",srcSet:["/static/e92ec530fe018b3ba6425c9752f1bea5/7fc1e/1.png 288w","/static/e92ec530fe018b3ba6425c9752f1bea5/a5df1/1.png 576w","/static/e92ec530fe018b3ba6425c9752f1bea5/a7549/1.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Example of a creation pattern"),Object(i.b)("h2",null,"Standard creation"),Object(i.b)("p",null,"Standard creation is used in simple creation tasks when no stepped guidance is\nneeded and the input fields are directly related to each other."),Object(i.b)("h3",null,"Modal"),Object(i.b)("p",null,"If there are only one or two options to be made during a creation, use a small,\nstandard modal overlaying the content where the creation was initiated. Avoid\nscrolling inside a modal."),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"61.11111111111111%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAABgklEQVQoz41Ty2rCQBQVpItCv6Lr0rWkUK1rf6C0RsR24Q901RaE/kBX7vtRiou4EYMm5v0iz9O5o5GpjeLA4dyZzD333MlMrSgK0CA+xDlD3EtcK4NTm48VE/PKuFYGURTBcRwO13U5B0FwEmEYwvM8znuHpaBt25hOp5jNZphMJlAUhW8mUIFjsCwLvu//F6TF9XqNzWYDTdOg6zpM0+QJpWPisohYrNIhtWwYBhcRhSgpjmPEScLaDOFwZ94ejuMiqBKkJBIhUXJJjtI0RcKE6FuSxIjCgBVw4bMi/o5pHkVhdcvkrPwxdKaiW8N0YFjszBwPlr0Di02bCQeCYJ7nfDIejyHLMvr9PrrdLo9luYee/ITH3hCNTwuNL+DmPWXIOG4/Mly/ZRj+bDVyUXA0GkGSJLTbbTSbzR1aaN3fQXro4Gpg4nII1AcF6i/guHhl9+4Z6Hxzf0xQuIfU2mKxgKqqB1hiqa4w1zIoGjDXiz9QtAIr+8yXUvF2TjzBLf8ChRVySRt8jiAAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Example of a standard creation modal",title:"Example of a standard creation modal",src:"/static/dd08607319f44f1986a634dd8606d69b/3cbba/2.png",srcSet:["/static/dd08607319f44f1986a634dd8606d69b/7fc1e/2.png 288w","/static/dd08607319f44f1986a634dd8606d69b/a5df1/2.png 576w","/static/dd08607319f44f1986a634dd8606d69b/3cbba/2.png 1152w","/static/dd08607319f44f1986a634dd8606d69b/b4661/2.png 1330w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Example of a standard creation modal"))),Object(i.b)("h3",null,"Side panel"),Object(i.b)("p",null,"Consider using a side panel to take advantage of the added screen real estate\nand keep the user in the context of where they are working. You may choose to\nuse either the slide in or slide over panels."),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABo0lEQVQ4y62TSWsCQRCF80OF4CG44a6gjh7iIaKCIuJCTrnn4M0F7/6BnBNFGUVwltaoE42+TJUxqDEQwYE3Pd3T/XV1veqb7XaLaz439Go0GggEAohEIvB4PPB6vWfl9/t5zqGi0ShisRhyuRyWy+UOWKvVYLFY4HA4YLPZfslut8NqtSKZTKLX66Hb7WI4HEKWZdZoNOL+er3eAdvtNlwuF+8Yj8chSdKREokEwuEwqtUqNpsNFosFDMPgiPaiPqWPgc1mk6MLBoN8LJ/Px+3+m8adTify+Tzm8zkmkwkURTmSruvHQMoRRUM5ORXliKDlcpmBBNA07UeqqkIIcQwkM2jhadL3iSfTSqXSdYA0fjHwP0c+BBJkJw2K2eq6MA37BrZaLU4+OUyLT0UbhUIhVCoVdpMMEGKKqdBMqZjqCt5nB6bU63V2mUqDIjkVwdxuNxfveDxGv9/HYNBHT1bwNpzhVRYYjGf4NEuKgZ1OB9lslo9ULBb/VKFQQCaTQSqVRvrhHsHqC+6egNtHA9KzgcWHCbzkLtPc1Wp1VnRL6P8XWHo2D2wuuaMAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Example of a side panel creation flow",title:"Example of a side panel creation flow",src:"/static/bbcf62bc0eb5fd64e94c69c674c96e2b/a7549/3.png",srcSet:["/static/bbcf62bc0eb5fd64e94c69c674c96e2b/7fc1e/3.png 288w","/static/bbcf62bc0eb5fd64e94c69c674c96e2b/a5df1/3.png 576w","/static/bbcf62bc0eb5fd64e94c69c674c96e2b/a7549/3.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Example of a side panel creation flow"))),Object(i.b)("h3",null,"Full page"),Object(i.b)("p",null,"If your creation flow consists of multiple fields and/or supporting imagery,\nconsider the full page option to take full advantage of the screen’s available\nreal estate."),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABOklEQVQ4y8WUy0rDQBSG+8Cu3CSWNJKlSDf1Ddz4Bm7sQrvQooKihCZEUooKSUPIZXJp07S/OZMWm5pSqIKBLyfDnPPlzDBJY7FY4C+vBt263Su0JAmKokAURY4gCLXQnFTktmS5qGniWBIgS0dot9tI07QUWraN59cBBgMNqqpC0zQYhlGLruvo9/vo9W5we/+C60cTd09vME0Ts9msFCZJgvePT9jjMRzHQRAEmE6nmEwmFbIs43OdzhmawiFOzh9wcAGcXuaFI8V8npfCKIpgWxZc1wVjjEOFYRjWQvlxHBeRIY4CxCzk+Xm+FJJgOBxiNBrxDmlMRStoTKJVrMKWhN/C8m0RXxZt7CZ7Callipsy2t914Tb+T7i+5G3UCnd1sIsfQs/z4Pv+3lSODT3Qof0N9JXQf+ELwNTKs0jRn3oAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Example of a full-page creation flow",title:"Example of a full-page creation flow",src:"/static/ea8dd9ecbd9d9fbe1fd5a55058400fdf/a7549/4.png",srcSet:["/static/ea8dd9ecbd9d9fbe1fd5a55058400fdf/7fc1e/4.png 288w","/static/ea8dd9ecbd9d9fbe1fd5a55058400fdf/a5df1/4.png 576w","/static/ea8dd9ecbd9d9fbe1fd5a55058400fdf/a7549/4.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Example of a full page creation flow"))),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABhElEQVQ4y62Uy07CQBSGeWE3bopaMCyNYYNv4MoncCMbWCgJJkYNWgK2gbYhXNrSlrZcCr9zpozUSoiJknyctnPm65mZk+Y2mw3+85ejv2r1DgVZRqlUQj6f50iStBcak1lusVhE4ewU57KEonyCcrmMKIoS4XA4wvOrgrd3Ba1WC4qioNPp7KXdbqPRaKBer+G++YLao4qHpy5UVcVqtUqEQRiiZ+gYMfF4PIbneVgul1gsFpz5fM6hZ67rolK5wql0jIvrJo5ugMvbGGEYYb2OE6E1nUIze3BsG1N2TViWxSEBQS8RcTabIQgCFn0EvstIxuJYCG0X3e4HTNNkyx9iMpmg3+9D13UuFRLC931+v8Pf4u2EAUscDAawtxXSJJocsq2gjSZoyRR/J2Tlk4zKTk8gqRAKxDjFND+E6QGKJP+TUCSlk0koTnifUKzkoFAM0qFomsYxDINvSbaqgxU6jvPVMqJt6Jl4kThl2op0nuBb29AFNW0a6vos2ZxsPn0XPgHjC8ihYzfhrAAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Example of a full-page creation flow",title:"Example of a full-page creation flow",src:"/static/06791ee4dfb4d0b74f9ff4805824e774/a7549/5.png",srcSet:["/static/06791ee4dfb4d0b74f9ff4805824e774/7fc1e/5.png 288w","/static/06791ee4dfb4d0b74f9ff4805824e774/a5df1/5.png 576w","/static/06791ee4dfb4d0b74f9ff4805824e774/a7549/5.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Example of a full-page creation flow"))),Object(i.b)("h2",null,"Multistep creation"),Object(i.b)("p",null,"If the creation task is complex, consider whether breaking the process up into\nsteps could help the user. Consider displaying related or dependant options\ntogether."),Object(i.b)("p",null,"Multistep creation follows the same principles as\n",Object(i.b)("a",s({parentName:"p"},{href:"#standard-creation"}),"Standard creation"),", with the addition of steps."),Object(i.b)("h3",null,"Side panel"),Object(i.b)("p",null,"Consider using a side panel to take advantage of the added screen real estate\nand keep the user in the context of where they are working. You may choose to\nuse either the slide in or slide over panels."),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABt0lEQVQ4y62Uy07CQBSGfUw3mLDiJndoC9SodMclxBgkunTLioSw5QF8A0O8pICEhF4oUEKR3zljRQSVmNjkYyYT5uv8Z056sFqt8J/PAf00m03E43EIgoBwOIxIJLIDrcdiMUiiCFEUGCJHkiRkMhkUi0XMZrN3Yb1eh8fjQSAQgM/n28Hv98Pr9eI8r+C+84jOwxPU3gBqt4d+r4fBgM1VFfP5/F3YarUQCoX422RZRi6X+4IsnyCdTuGqdgOHVWj5ClChHJq4j+M4WCwWn5HpdMlkkkenaDR+zGk9GAyiUqnAZrFGoxF0TYOu69DYSNAaSdfCaDTKT0P12CabzXJptXqF6XTKN2vap4zE3wppI8XehqSJRIIJq2shSTb5k5DWfxL+esL9kasbkTUXnbMjpOLTDdPmbehFJKzVarw1DMOAaZoYmzrGxoiNGkx9Q9hoNPgtUqOmUqkdqOEpAd3ycDjkPdftqnjua3h8mTAsPPVN1jausN1uQ1EUlMtl3vHfUSqVUCgU+P/Ozs6RP83i+OIOR9c2Di8NJG51TGZuHy6XSx5lH7Ztw7KsNRMXyxrz2tJ34Q2fEjJYStMIlwAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Example of side panels in a multistep creation flow",title:"Example of side panels in a multistep creation flow",src:"/static/7a964032abc3a92ef7fb5e6e7615a699/a7549/6.png",srcSet:["/static/7a964032abc3a92ef7fb5e6e7615a699/7fc1e/6.png 288w","/static/7a964032abc3a92ef7fb5e6e7615a699/a5df1/6.png 576w","/static/7a964032abc3a92ef7fb5e6e7615a699/a7549/6.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABt0lEQVQ4y62Uy07CQBSGfUw3mLDiJndoC9SodMclxBgkunTLioSw5QF8A0O8pICEhF4oUEKR3zljRQSVmNjkYyYT5uv8Z056sFqt8J/PAf00m03E43EIgoBwOIxIJLIDrcdiMUiiCFEUGCJHkiRkMhkUi0XMZrN3Yb1eh8fjQSAQgM/n28Hv98Pr9eI8r+C+84jOwxPU3gBqt4d+r4fBgM1VFfP5/F3YarUQCoX422RZRi6X+4IsnyCdTuGqdgOHVWj5ClChHJq4j+M4WCwWn5HpdMlkkkenaDR+zGk9GAyiUqnAZrFGoxF0TYOu69DYSNAaSdfCaDTKT0P12CabzXJptXqF6XTKN2vap4zE3wppI8XehqSJRIIJq2shSTb5k5DWfxL+esL9kasbkTUXnbMjpOLTDdPmbehFJKzVarw1DMOAaZoYmzrGxoiNGkx9Q9hoNPgtUqOmUqkdqOEpAd3ycDjkPdftqnjua3h8mTAsPPVN1jausN1uQ1EUlMtl3vHfUSqVUCgU+P/Ozs6RP83i+OIOR9c2Di8NJG51TGZuHy6XSx5lH7Ztw7KsNRMXyxrz2tJ34Q2fEjJYStMIlwAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Example of a side panel multistep creation flow",title:"Example of a side panel multistep creation flow",src:"/static/7a964032abc3a92ef7fb5e6e7615a699/a7549/7.png",srcSet:["/static/7a964032abc3a92ef7fb5e6e7615a699/7fc1e/7.png 288w","/static/7a964032abc3a92ef7fb5e6e7615a699/a5df1/7.png 576w","/static/7a964032abc3a92ef7fb5e6e7615a699/a7549/7.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Example of a side panel multistep creation flow"))),Object(i.b)("h3",null,"Full-page multistep"),Object(i.b)("p",null,"If your creation flow consists of multiple fields and/or supporting imagery,\nconsider the full page option to take full advantage of the screen’s available\nreal estate."),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABbElEQVQ4y62Sy2vCQBCH/a+1YqEx9NBDoUgPHu2lPfTgTS85lkKOpWCMEelDSSRi3g+SNL/urGywFe1z4ctsNsu3M7OplWWJ/xw1eiiKguNWC5IkodFocOr1+l6azSZkWUa73cbpyRHO5AYuO+eIk2QjtJZLPDxq0LQxRqMRxmMdhmHsMJlMMJvNoKoqut0uer0rXNxqkK5fMLh/Asp8I4zjBM+vJhPbMC0LjuMgTVNEUcS+xRx6J4qiwGKxQL/fx2A4xM1diI4CqEbKTMVGGIQRLNuHF8RwXA+e5zI8rFYrrNdrHl3Xhe/7fJ0OosH7nwfAm4cs9pDnQhgEmE6pJL0qTdd1tjaFbdtcQHtIKCIdwPF8lkTAI2XPhWEYYj6fwzQtLFk/LVa2gMr/LBPzbWitElKPSJqwWxK9EmzLDvFBSCWJk6lHgu1s9mV2ULhv41f8SPhddoTU/OrmfgG1qBLSJMuyP5HnOf8v3wFY28gsy8YCCwAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Start of multistep creation flow",title:"Start of multistep creation flow",src:"/static/bec6bf171b77610d39c37428a54ce7b2/a7549/8.png",srcSet:["/static/bec6bf171b77610d39c37428a54ce7b2/7fc1e/8.png 288w","/static/bec6bf171b77610d39c37428a54ce7b2/a5df1/8.png 576w","/static/bec6bf171b77610d39c37428a54ce7b2/a7549/8.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Start of multistep creation flow"))),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABeUlEQVQ4y6WTS2vCQBSF/dUatNBY6aJQKIVCXdpVF+3KRaG66K4UsmuMoAaFFB/ENG9jSmJO506MWB992IGTO4873xxuZnJJkoBaFn/bKD8VEC/YeDmfo0+z2cRRqQRRFFEoFCAIAo+7lM/nUSwWUalUUC6XcSoKODsp4OryHMF8ngL16RRyu4duT0Wn04GqqhgMBuj3+1vSNA2SJKFaraJWu8HFfRfHtyM8vLwxm1EKDIKAJ47HY+i6DsdxEIbhlubMQRRFGA6HqNfreGw0cPfs4fopgaSGjBSnQNfzoY0MmLYPy7Jh26mmzLlpmjAMg49d1+WHzWYzXrvFghUv8hjHwUfgsMOWQJ8lGO8WLLaJAJZlcVE/gxPM8zwu6mfztuPCcjwe4zhzyBJaLZmphXZb4VGWX6EoCiaTCXdEOevQTdHaCkgbyJHv+7yeNM5iBlmPu8BfgLT5p9P3re11uOngL/oWeKh21nD15w7UCkj3iS7sf0QwetufwUXIlcv0L/QAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Multistep creation flow with view all options toggle",title:"Multistep creation flow with view all options toggle",src:"/static/dd879721e93c187852f2615f606b50a9/a7549/9.png",srcSet:["/static/dd879721e93c187852f2615f606b50a9/7fc1e/9.png 288w","/static/dd879721e93c187852f2615f606b50a9/a5df1/9.png 576w","/static/dd879721e93c187852f2615f606b50a9/a7549/9.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Multistep creation flow with view all options toggle"))),Object(i.b)("h2",null,"Anatomy"),Object(i.b)(b,{small:!0,mdxType:"AnchorLinks"},Object(i.b)(r,{mdxType:"AnchorLink"},"Button position"),Object(i.b)(r,{mdxType:"AnchorLink"},"Including an image or illustration"),Object(i.b)(r,{mdxType:"AnchorLink"},"Show all available options toggle"),Object(i.b)(r,{mdxType:"AnchorLink"},"Confirmation")),Object(i.b)("h3",null,"Button position"),Object(i.b)("p",null,"On a larger screen, buttons should always remain visible to the user."),Object(i.b)("p",null,"Buttons should be located in the top right and should stick upon scrolling."),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("img",{src:"/53c706d621cf2af9ba788504201d64d1/10.gif",alt:"Button position in context",title:"Button position in context",style:{padding:"3rem"}}))),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABZklEQVQ4y62SzU/CMBiH+atBkQQd8eDBRI0XjktMvMgNPRhOHowEDQw2NjYIhFYcJB5kYUvYx892w8EIEKIuefa26dunfdumgiDAf34p/qtUKsjljpDP55FOp5HJZHaSzWZRKBQgCAJOjw9xJhzg+uoctuNEQtMcQ5I19Ho9GIaxk36/j2q1imKxCFEUcXmn4uSW4OF5AARuJLRtG+Z4Ans2C9vbmLHx+XwOMiQolUool+9x8/SFi0cfL7rDTF4ktKZTGJ0OOqqaQOO020sW/a6uY0Qp6HAIc6BhMpDxOabw/SASTplQVZSNcEG4wCLyfluWobRaEbKCpiSDEAp+wbEwsZMFXNhsNGKkej2UrOfxBd7pBuHPjlbjW62GVwaPNXYZLUlK5OwlXG3rrExd02LW83YKt5W9fqZ7lcyT+UA4kcd9Yfn8XCkhS6FlWTDYU+j+Ep09uY/RaCn0fR+u6/4Jz/NC4Td/zKAkCYL/XAAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Button position in context",title:"Button position in context",src:"/static/247ecf5880b6d9ea90b6be4f59d87563/a7549/11.png",srcSet:["/static/247ecf5880b6d9ea90b6be4f59d87563/7fc1e/11.png 288w","/static/247ecf5880b6d9ea90b6be4f59d87563/a5df1/11.png 576w","/static/247ecf5880b6d9ea90b6be4f59d87563/a7549/11.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Buttons should be located in the top right"))),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABL0lEQVQ4y62SPU+DQACG+xe7qMRBEwajo4kJkDqgq3Huj2FuaKdK+bDYmAJtIUgHIaUDH6/coS1WpbVK8vByl/eeI5dr5HmO/3wa5CVJEgShBVEUwXEceJ6vRRAEsCwL5ugQx6fnYM5auLy+RxwvS+FLMMfo2YHjOLAsq5bxeIyZ60K8uQVz0MTJVRvNOx8XbRuLZVIK4zjG1LExsQsK6VaKnu95mAcBAt9D4FpYvAYgx0eFYRhCV1VogwFNnWQdRUdVlJJirDwosG3ns/BR17di/DBPNphOJl+FhqatF79/DwmGsWKzt5Owmr1uFz1ZpsidDpR+n4qr0l8J6ZlW2OzUCvflW+HH35A0SO5K0Se3g1ynlTCKIjyZJkZ7Yg6HcGeztTDLMiRJ8ifSNKXCNxRZnEsBiYnxAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Button position in context when scrolling",title:"Button position in context when scrolling",src:"/static/58787f06fafa01fc737b7024ef67dc47/a7549/12.png",srcSet:["/static/58787f06fafa01fc737b7024ef67dc47/7fc1e/12.png 288w","/static/58787f06fafa01fc737b7024ef67dc47/a5df1/12.png 576w","/static/58787f06fafa01fc737b7024ef67dc47/a7549/12.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Buttons should stick upon scrolling."))),Object(i.b)("p",null,"When the full-page dialog is viewed in mobile, the buttons are positioned at the\nbottom of the screen."),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"586px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"121.875%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAAAsSAAALEgHS3X78AAABr0lEQVQ4y+WV2U7CQBSGeQOvvfHpvPFSCCQsYUngCXwfwIDesIRAN7YypQQxYkKNLCnL75zBChcUASVeOMmf+Ttz5uuZnsnUs1qtQI36+Xx+krYZHsf8tDkMz3K5FMY0TUQiESQSCSSTSaFYLIZwOCzGSeSj0agYJ8XjcQSDQTDGBINYX0Bd1+H1esWCVColgATw+/0IBALwk7gnQCgUEqJ5n8+HRqOxAVKqzvc7tdm2vdmyY6bTKbqGAblWgyJJQjKJP+8SzUvVKgy+3clksimKA5zNZujx70iBmqJAleW9ohiKNbtdkcy3wEP0t8CzbLmuqjv9SRlKvJLVSkVUkrTtqcpHASmbcrGI+0wG+VwOj/k8stw/cJ9Np1EqFETMURnSgl/d8r5inFSUf3Sw1QOA6qfWQNMdSG+jc+bcNm7SZAkNhfdSFf2egdkuIL3leTAA4xet0emAuaijt6HV25A0BknV0WJPeB+7XF90Ubr9iGhuwUP7TMH1XRuXt8CVz8bFzRx5bZ3hYrkFpAWWZWE0Goneon5Lzvjr8AV1NkS5ZaHcHKHUtPA2ts/31/sAmrPVslL5wNEAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Button position in context on mobile",title:"Button position in context on mobile",src:"/static/ebcdf324e64d9d051d8dd6812efd9335/b378b/13.png",srcSet:["/static/ebcdf324e64d9d051d8dd6812efd9335/7fc1e/13.png 288w","/static/ebcdf324e64d9d051d8dd6812efd9335/a5df1/13.png 576w","/static/ebcdf324e64d9d051d8dd6812efd9335/b378b/13.png 586w"],sizes:"(max-width: 586px) 100vw, 586px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Example of full-page option on mobile"))),Object(i.b)(m,{mdxType:"DoDontRow"},Object(i.b)(f,{colLg:6,caption:"Buttons should stick upon scrolling so they are always visible.",mdxType:"DoDont"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"100%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAABaklEQVQ4y+WUy07CQBhGeUwXGHkjl4SNQsJFUBDqmlBABUylBEs7dgUrWhYUaLuAQj87hUqxaIgYY+IkJzOdf3ryzfQSwg+30N8X2rbtDmi/XC63rFZYfQKt+df6HSFvcGzzHO8JtbGGWq2MMsuiXGFRv39As/WERrOFRmsNveae23h05qpV1lnPouKsH2vaNqEnVBUFuVwK6WwW6cwVrvMFlJg7FEvMGoZB4baIZCqNi3gCscsMYokbxJNZqKoaFJqmieFQcXvDMKDrOmazmYvuMBqp4DgOkcgZwuFTRM5lnERt5OsKYJmwPwrpjf1+H5PJBJqzBT90jtYEQUCn0wHP8+C7ItpdghdBdEIYwYQ00WAwwHQ6DQjpHK2JoghZlte8EgcJhEjurr4tlCRpA9lwpJAQssPBQnpu3nl+JaTsFR76UKjUT6/Xc9+KgHCxWLgp5/P5XmjNn9yPZVm/8OnR/hh2Ev6vH+wbEE34aTQ0QH8AAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Buttons should stick upon scrolling so they are always visible.",title:"Buttons should stick upon scrolling so they are always visible.",src:"/static/8f51c437e5b1cb75487650089f971191/3cbba/14a.png",srcSet:["/static/8f51c437e5b1cb75487650089f971191/7fc1e/14a.png 288w","/static/8f51c437e5b1cb75487650089f971191/a5df1/14a.png 576w","/static/8f51c437e5b1cb75487650089f971191/3cbba/14a.png 1152w","/static/8f51c437e5b1cb75487650089f971191/7dc98/14a.png 1200w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    ")),Object(i.b)(f,{colLg:6,caption:"If an illustration or image is displayed, buttons should be displayed above the image.",mdxType:"DoDont"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"100%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAABkklEQVQ4y+WUy07CQBSGeUoXksATuXXBRkDlJgbwDaB4gxI20LSoAZoYwAC9J1za/s4pKRSILMQYEyf5M2dOZ77zz0zbEH64hf4+0HVdL6DecWzYjgPbdlh8WDTHV5AR8oNjm89YO1QVBdX7MspcFeUKh4fHJ9T5Bmp1fiOeR6PZxHOtDq7KsfkcKhwHRVU3Dn3gaDBENpvEVTqNq+sUcjd5FEt3KBRLa90WCkhlMognkohdpBBL5BC/TGM4HO4DLcvCgEEt04RpGDB0HbqmrcTij9EIPHMYjURwGg4jeibi5NxGvjIAbAvuLpAW9Xo9qMy+wrYfFOXoWbvdhiiKkCQJ0qsM8e0dgvgC0zT2HRrMVb/fh8Yc7QIpR8BOp+PNI+maynaiQZb73vhbQHJG48lkgvF47DmnNUcBCTSdTj0RmPJfAmVZXgOpun+elKNigiCszi8gOlO6UBy6FKruu6OYct1uF61Wy7uYXZnszdgDLhYLz+V8PsdsNtsS5ahgsFBQy+XyFz496o/RlsP/9YP9BJUw/J3NkR7CAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"If an illustration or image is displayed on the right, buttons should be displayed above the image.",title:"If an illustration or image is displayed on the right, buttons should be displayed above the image.",src:"/static/65d53523e222bbaf7fb186249ad526b6/3cbba/14b.png",srcSet:["/static/65d53523e222bbaf7fb186249ad526b6/7fc1e/14b.png 288w","/static/65d53523e222bbaf7fb186249ad526b6/a5df1/14b.png 576w","/static/65d53523e222bbaf7fb186249ad526b6/3cbba/14b.png 1152w","/static/65d53523e222bbaf7fb186249ad526b6/7dc98/14b.png 1200w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(i.b)("h3",null,"Including an image or illustration"),Object(i.b)("p",null,"If including a supporting image or illustration, place the image on the\nright-hand side."),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABl0lEQVQ4y62Sy0/CQBCH+atBkQRT4sGDJhovHOHiQU6YGA8cPBlAL7zb8ijPUhSoUGgxLfzcWSwCIZCoTb5Os935Znd2PYvFAv/5eOiVSCQQCJwgGAzC6/XC5/Ptxe/3IxQKQRAEnJ0e41w4ws31BUzLWgo1rYdMXkS1WkW5XN6LoihIpdMIh8OIRKK4iokQblt4eK4DC3spNE0TWu8NFqswY/A4m/FI/1ymkwk+2Xiz2UQsdod4/B7RJx2XjzaSssVMzlJojMcoSyJymQxy2ewS9l0qFCCVShyxWESdra7RaKDVakEfDnmeNeph9tGG/q7Cmc9/hMV8Hi+pFF7Zdoh0MsmlJCJxMZdDp80SdR1DJlNVlcfJ1MJAH6Hb1TB3hWMmpERZFDdwZRSpoNrp8LmDfh/9NaiIpu0QUvI2NL4uHLG5roRWeFDoCrahf7IkoVapoMZuA48MhW6GLPNidKc3hIfgvWQrXYfGCt/93RC6k/lWKe5iR0tcYZud/EpoGAZfduWXUCu67NRXQmqmbdt/wnEcLvwCaNanP5pft9kAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Example of supporting image placement",title:"Example of supporting image placement",src:"/static/81806335b14851139754f3d121c4ad41/a7549/15.png",srcSet:["/static/81806335b14851139754f3d121c4ad41/7fc1e/15.png 288w","/static/81806335b14851139754f3d121c4ad41/a5df1/15.png 576w","/static/81806335b14851139754f3d121c4ad41/a7549/15.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Example of supporting image placement"))),Object(i.b)("h3",null,"Show all available options toggle"),Object(i.b)("p",null,"The toggle should be used to avoid overwhelming users, while still allowing\nusers to access all options. It can be applied to the ",Object(i.b)("a",s({parentName:"p"},{href:"#side-panel"}),"side panel"),"\nand the ",Object(i.b)("a",s({parentName:"p"},{href:"#full-page"}),"full page")," dialog."),Object(i.b)("p",null,"Consider having a minimal set of options visible by default, offering the\nability to chose if the user wants to expose more options."),Object(i.b)("p",null,"If the user switches to this mode, remember this for when they next perform the\nsame task."),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colMd:4,colLg:6,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"792px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"72.56944444444444%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAArklEQVQ4y8VTUQrDIAzt/Q/kLfz0q/hfKGotqMVW3zAw6Ibt6lZYIERC8vISkw43S3c7YM4ZRYs83zVfM8NaUgtQleE0TaTee2zb9h3DfYKUEpxzMMYghDgdw2nL+8B1XWGthXOumvCJ7QvDGCNpSolsAV2WBSEEspcYvs9wGAYopTCOI4wx5Ct2nmcq1ASotUbf9wRW2v655aMdbPqUWtDRYl9Zn0uX8t9bvhvwAS90pH9/U5BiAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Show all options off",title:"Show all options off",src:"/static/da11bd2a211cd55c4b86791514e847f4/fc678/16.png",srcSet:["/static/da11bd2a211cd55c4b86791514e847f4/7fc1e/16.png 288w","/static/da11bd2a211cd55c4b86791514e847f4/a5df1/16.png 576w","/static/da11bd2a211cd55c4b86791514e847f4/fc678/16.png 792w"],sizes:"(max-width: 792px) 100vw, 792px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Show all options off")),Object(i.b)(A,{colMd:4,colLg:6,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"792px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"72.56944444444444%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAAyUlEQVQ4y8VTzQrCMAze+598Aw8+gLe9xU4yBKEHD3qy61rYD+3STxcZDC2zHQPThv4l4fuSJsPGkm0e0HuPUUeZ9qG7ZIQhp5RAQYR1XbO2bYthGNYhnDsIIVAUBfI8R1mWi2lYpDwZEBGcc9Bao2maoMMvtIwQPF/DEcgS07XWMvW+79F1Ha9RCOdUro8bLncBpRSklKiqinM6no0xzCAqIPm34f58xO50gFaa0a2izHQnI/9dhOSiLBl9vsV8n6hO+W8vbx3wCfBUo05mXkRkAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Show all options on",title:"Show all options on",src:"/static/bae8e32cd6d6ab23c0c8182fcb67b634/fc678/17.png",srcSet:["/static/bae8e32cd6d6ab23c0c8182fcb67b634/7fc1e/17.png 288w","/static/bae8e32cd6d6ab23c0c8182fcb67b634/a5df1/17.png 576w","/static/bae8e32cd6d6ab23c0c8182fcb67b634/fc678/17.png 792w"],sizes:"(max-width: 792px) 100vw, 792px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Show all options on"))),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABOklEQVQ4y8WUy0rDQBSG+8Cu3CSWNJKlSDf1Ddz4Bm7sQrvQooKihCZEUooKSUPIZXJp07S/OZMWm5pSqIKBLyfDnPPlzDBJY7FY4C+vBt263Su0JAmKokAURY4gCLXQnFTktmS5qGniWBIgS0dot9tI07QUWraN59cBBgMNqqpC0zQYhlGLruvo9/vo9W5we/+C60cTd09vME0Ts9msFCZJgvePT9jjMRzHQRAEmE6nmEwmFbIs43OdzhmawiFOzh9wcAGcXuaFI8V8npfCKIpgWxZc1wVjjEOFYRjWQvlxHBeRIY4CxCzk+Xm+FJJgOBxiNBrxDmlMRStoTKJVrMKWhN/C8m0RXxZt7CZ7Callipsy2t914Tb+T7i+5G3UCnd1sIsfQs/z4Pv+3lSODT3Qof0N9JXQf+ELwNTKs0jRn3oAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Show all options off",title:"Show all options off",src:"/static/ea8dd9ecbd9d9fbe1fd5a55058400fdf/a7549/18.png",srcSet:["/static/ea8dd9ecbd9d9fbe1fd5a55058400fdf/7fc1e/18.png 288w","/static/ea8dd9ecbd9d9fbe1fd5a55058400fdf/a5df1/18.png 576w","/static/ea8dd9ecbd9d9fbe1fd5a55058400fdf/a7549/18.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Show all options off"))),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABXUlEQVQ4y62UX0+CUBiH/cLddIMZ0rxszRv7Bl31CbrJG70oN9uaNQtHA5bNJZMFHA+IgL94D7JSdLEm28O7czjv855/o7JarXDIp0KvdvsWdVlGo9FAtVoVSJK0E/omp2MVRUH9tIYzWYIin6DZbCIIgkw4nVoYPKt4eVUxHA6hqio0TdvJaDRCr9dDt9vBXf8JnQcd949v0HUdURRlQu5zmB9jIbYsC67rIgxDLBaLDZbLpfjWal2iJh3j/KqPo2vg4iaG7wdIkjgTuszF++cYzpcDxpiAEj3P28l8PgfnPI0MPM3lzBPj43gtJIFpmJhMJrBtW7QpiSBBXoQoFmBrvB8hLZml1WhTc2iJFP8nTKdPHb7vb0ipvS3cR0FIe0DxIMI8kWJ+or+Ff1EQUgfdI9M0YRiGOBzHcUrNbO+SZ7OZkOQV81OmvjJsXJskScQt34YuclloPP0XvgHPK8nbdbwjCQAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Show all options on",title:"Show all options on",src:"/static/037000ebf5ea128dd09aaeb761a53e34/a7549/19.png",srcSet:["/static/037000ebf5ea128dd09aaeb761a53e34/7fc1e/19.png 288w","/static/037000ebf5ea128dd09aaeb761a53e34/a5df1/19.png 576w","/static/037000ebf5ea128dd09aaeb761a53e34/a7549/19.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Show all options on"))),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABhElEQVQ4y62Uy07CQBSGeWE3bopaMCyNYYNv4MoncCMbWCgJJkYNWgK2gbYhXNrSlrZcCr9zpozUSoiJknyctnPm65mZk+Y2mw3+85ejv2r1DgVZRqlUQj6f50iStBcak1lusVhE4ewU57KEonyCcrmMKIoS4XA4wvOrgrd3Ba1WC4qioNPp7KXdbqPRaKBer+G++YLao4qHpy5UVcVqtUqEQRiiZ+gYMfF4PIbneVgul1gsFpz5fM6hZ67rolK5wql0jIvrJo5ugMvbGGEYYb2OE6E1nUIze3BsG1N2TViWxSEBQS8RcTabIQgCFn0EvstIxuJYCG0X3e4HTNNkyx9iMpmg3+9D13UuFRLC931+v8Pf4u2EAUscDAawtxXSJJocsq2gjSZoyRR/J2Tlk4zKTk8gqRAKxDjFND+E6QGKJP+TUCSlk0koTnifUKzkoFAM0qFomsYxDINvSbaqgxU6jvPVMqJt6Jl4kThl2op0nuBb29AFNW0a6vos2ZxsPn0XPgHjC8ihYzfhrAAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Show all options on and grouped",title:"Show all options on and grouped",src:"/static/06791ee4dfb4d0b74f9ff4805824e774/a7549/20.png",srcSet:["/static/06791ee4dfb4d0b74f9ff4805824e774/7fc1e/20.png 288w","/static/06791ee4dfb4d0b74f9ff4805824e774/a5df1/20.png 576w","/static/06791ee4dfb4d0b74f9ff4805824e774/a7549/20.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Show all options on and grouped"))),Object(i.b)("h3",null,"Confirmation"),Object(i.b)("p",null,"A notification banner can be presented to visually confirm when any create\naction is a success."),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABEUlEQVQ4y62R22qDQBCGfWJvBK0+gm9kKYUS6EUuvChJsZaENVjBqFU8ra2Hv51NMaS0tNEsfDuru/sxOyMNw4BLDokmy7IgyzIMw4Cqqv9C0zRoVxp0XYeiKDBNE5zzgzAMQ9i2Ddd14XkeGGO/smM7rLcOrp8WuH28x81qgbvNEg8vDrr39iCs6xpBEAhxkiQiRlGEOI7FmiJ9h/sQr3ECPw6wKrZYpxs4OcPzmw+/2WPo+qOwqqox/kX9Ca+5OE/PbJoGZVmi6zpI1BT6Obc5JG3b9ijs+15Iz6Envu6R40RI6dLmVEYhpUt1yfMcRVFMhu6LGn4XUpzKj8KLZZimKbIsm8UopKJSQedAMmrwB5+T1Fw2f/eIAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Example of a successful creation confirmation",title:"Example of a successful creation confirmation",src:"/static/e9dc5765d7793e2402cab1894577594f/a7549/27.png",srcSet:["/static/e9dc5765d7793e2402cab1894577594f/7fc1e/27.png 288w","/static/e9dc5765d7793e2402cab1894577594f/a5df1/27.png 576w","/static/e9dc5765d7793e2402cab1894577594f/a7549/27.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Example of a successful creation confirmation"))),Object(i.b)("h2",null,"Pre-create"),Object(i.b)("p",null,"A pre-create step occurs before the create flow starts. A common pre-create step\nis ",Object(i.b)("strong",{parentName:"p"},"Create from template"),"."),Object(i.b)("p",null,"A pre-create step is usually combined with a\n",Object(i.b)("a",s({parentName:"p"},{href:"#full-page"}),"full-page create flow"),". It can also be used in combination with a\n",Object(i.b)("a",s({parentName:"p"},{href:"#full-page"}),"side panel create flow"),". A pre-create step can be used in\ncombination with a single-step or multistep create flow. A multistep flow starts\nafter the pre-create step is complete."),Object(i.b)("p",null,"Consider reminding users of the option they choose in pre-create in the rest of\nthe create flow."),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABhklEQVQ4y52SyW4CQQxE+WoQAcSRC7/BV3BHXLiNIgERCBSGZYZ9Xyt5Rh4RFBEpLXm67bbL1eVJ3W43sXz/z3qsTfGpVqvK5d5ULBaVTqeVyWRs/8uy2awKhYLy+bzK5bL2+/0dcDKJFLy31Wp/qNVqqdlsqtPpvLRut6sgCFSr1dRoNNTr9XQ+n++A2+1Wn4NQ4XCoOI4URZF1OxwOtvvZ/d1up+v1qnq9rlKppEqlYhjEDHC9Xqvf72swGGg2m5mNRiMtFgtL3Gw2Wi6XZu6vViuz4/FojcC4XC53QLrCiiDJJE2nUwOEzel0smJi+M6UGvKJUWOATIhLkknAAACMM0wBoNB9GgMQx7HG47G9iJoEkEsCj78BIGjiC8Ep8MWZ2ON9MhQoD78HQid0AtzZwpSG8/n8h65YGIbmu5YJQ9gARBGgdKIAHylIpinF3Luu+OQgwcsns/Cfn0zMd6/xGHNIpgwbfhlEhgE+YrvgMOBZsIHVs3k8+Q85uMje8Tf/L+O1X6dCz+BhNrjbAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Example of a pre-create view",title:"Example of a pre-create view",src:"/static/849dc3399cdb32d69dae86ab7a45ed43/a7549/Precreate1.png",srcSet:["/static/849dc3399cdb32d69dae86ab7a45ed43/7fc1e/Precreate1.png 288w","/static/849dc3399cdb32d69dae86ab7a45ed43/a5df1/Precreate1.png 576w","/static/849dc3399cdb32d69dae86ab7a45ed43/a7549/Precreate1.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Example of a pre-create view"))),Object(i.b)("p",null,"Aim to limit the number of pre-create options. If there is a very large number\nof options, pre-create options can be sorted into groups."),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABgklEQVQ4y52SSYsCQQyF/dMqzigevfgz/Bfe9eatYaAVV9y63Xdc3vQXiSjDCDMNr1OppF7yUpVS8t1uN12vV7N/Bef8LF+KX7Va1efnh4rFojKZjLLZrNl3SKfTyuVyKhQKyufzKpfLOhwOd8IoihV8tRQ2W2o2Q4VhqHa7rU6n8yu63a6CIFCtVlOj0VC/39f5fL4T7vZ79Xp9jUajhDzSZDLRPtmjItbX7u92O10uF9XrdZVKJVUqFW23W5N+J0wSouk0sVurcjqdtNlsbJ/18Xi0A8B9YsBn6UWMkKrD4VBxHGs+n9uhaVKATmezmREsFgvLwYcYgsFgYGeIccYIYfcO1uu1gS7pkPVqtTKfHPbwWT/n0BC+zdAJCTIDf0Yuz32X6pZ5ug9+SB6PxyYTkIB0JAOfF925Cu/+GS+S/TYBAZ+TV8ZC4jKxz2DvpUOGS4Du8CniQB6EftPgLSHJSCPgb40Cy+Xy8f64ScbgBcgljlS3D0Iuw2/pv4CM8X0D4kbP4LRzhW8AAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Example of pre-create with groups of tiles",title:"Example of pre-create with groups of tiles",src:"/static/bfba21913677e21aa1839aa472b2fe20/a7549/Precreate2.png",srcSet:["/static/bfba21913677e21aa1839aa472b2fe20/7fc1e/Precreate2.png 288w","/static/bfba21913677e21aa1839aa472b2fe20/a5df1/Precreate2.png 576w","/static/bfba21913677e21aa1839aa472b2fe20/a7549/Precreate2.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Example of pre-create with groups of tiles"))),Object(i.b)("p",null,"If necessary, a dropdown selection box or similar component can be required\nbefore the pre-create options."),Object(i.b)(d,{mdxType:"Row"},Object(i.b)(A,{colLg:8,mdxType:"Column"},Object(i.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1120px"}},"\n      ",Object(i.b)("span",s({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.888888888888886%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABhklEQVQ4y52Sx27CQBCG89QgAogrB16Dp+AOJ26WIkNESWyKsem9/cm3aJCJIiJlpWGZ9k1Zv1yvV3Hs/s9J577wU6vVlM+/qlQqKZPJKJvNuvsvyeVyKhaLKhQKqlQq2u12N2A0mch7a6vVfler5cv3fXU6nafS7XbleZ7q9bqazab6/b5Op9MNuN1u9fEZaDQaKUliRVHkbPv93lXlTgu+y+WiRqOhcrmsarWqzWbjbA64Wq0UhoHiONZisXCQ9Xqt5XL5VIghlgLo5/P5BoQ+nU41m82cEEiRdDL6bzYaQB6AAHq9noIgcOMCH4/HLogOKGgQukEMZjoMB+TJSWJcjDhZLtD5fO5gx+PRwZIkcbrtdvL9mOjkHA6HRyAAAhADUIROAZBoOt0BoAATsSZy7kCcGNIHnVezQ9ck2OE/trT/4bMZDAauA6tGp7ZPCjL+cDh0fhszDEPnZ5r7yAAZmfYBAiIYgEHtUfCj8xi2AmKAknMHMhqK3Tae2X7q6RjTEdb3BQ4hzeb1JLJIAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(i.b)("img",s({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Example of pre-create with a dropdown input",title:"Example of pre-create with a dropdown input",src:"/static/4e6525239e9e05e36a6baefc5a5e3991/a7549/Precreate3.png",srcSet:["/static/4e6525239e9e05e36a6baefc5a5e3991/7fc1e/Precreate3.png 288w","/static/4e6525239e9e05e36a6baefc5a5e3991/a5df1/Precreate3.png 576w","/static/4e6525239e9e05e36a6baefc5a5e3991/a7549/Precreate3.png 1120w"],sizes:"(max-width: 1120px) 100vw, 1120px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(i.b)(g,{mdxType:"Caption"},"Example of pre-create with a dropdown input"))))}w.isMDXComponent=!0},BAC9:function(e,a,t){e.exports={bxTextTruncateEnd:"EditLink-module--bx--text-truncate--end--2pqje",bxTextTruncateFront:"EditLink-module--bx--text-truncate--front--3_lIE",link:"EditLink-module--link--1qzW3",row:"EditLink-module--row--1B9Gk"}},I8xM:function(e,a,t){e.exports={bxTextTruncateEnd:"PageTabs-module--bx--text-truncate--end--267NA",bxTextTruncateFront:"PageTabs-module--bx--text-truncate--front--3xEQF",tabsContainer:"PageTabs-module--tabs-container--8N4k0",list:"PageTabs-module--list--3eFQc",listItem:"PageTabs-module--list-item--nUmtD",link:"PageTabs-module--link--1mDJ1",selectedItem:"PageTabs-module--selected-item--YPVr3"}},QH2O:function(e,a,t){e.exports={bxTextTruncateEnd:"PageHeader-module--bx--text-truncate--end--mZWeX",bxTextTruncateFront:"PageHeader-module--bx--text-truncate--front--3zvrI",pageHeader:"PageHeader-module--page-header--3hIan",withTabs:"PageHeader-module--with-tabs--3nKxA",text:"PageHeader-module--text--o9LFq"}}}]);