@wikimedia/codex/dist/sandbox/assets/layout-BZJMuEQd.js

Codex Design System for Wikimedia

import{d as l,f as r,w as n,aS as s,o as i,p as t,e,i as a,aT as u}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-CWepejvL.js";import{C as d}from"./Container-goDU8LH5.js";/* empty css                                                  */const m={id:"layout",class:"cdx-demo-layout__container"},c=l({__name:"LayoutDemoPage",setup(_){return(x,o)=>(i(),r(s,{class:"cdx-demo-layout"},{header:n(()=>o[0]||(o[0]=[t(" Codex Layout ")])),content:n(()=>[e("section",m,[o[5]||(o[5]=e("h2",null,"Layouts",-1)),o[6]||(o[6]=e("h3",{id:"container-ordered"},"Container",-1)),o[7]||(o[7]=e("p",null," This demo uses the Container layout component to list containers from medium to full size top to bottom. ",-1)),a(d,{class:"cdx-demo-layout__container--ordered",size:"medium"},{default:n(()=>o[1]||(o[1]=[e("div",{class:"cdx-demo-layout__container__content"},[t(" Medium ("),e("code",null,"medium"),t(") container. ")],-1)])),_:1}),a(d,{class:"cdx-demo-layout__container--ordered",size:"large"},{default:n(()=>o[2]||(o[2]=[e("div",{class:"cdx-demo-layout__container__content"},[t(" Large ("),e("code",null,"large"),t(") container. ")],-1)])),_:1}),a(d,{class:"cdx-demo-layout__container--ordered",size:"x-large"},{default:n(()=>o[3]||(o[3]=[e("div",{class:"cdx-demo-layout__container__content"},[t(" Extra large ("),e("code",null,"x-large"),t(") container. ")],-1)])),_:1}),a(d,{class:"cdx-demo-layout__container--ordered",size:"full"},{default:n(()=>o[4]||(o[4]=[e("div",{class:"cdx-demo-layout__container__content"},[t(" Full ("),e("code",null,"full"),t(") no "),e("code",null,"max-width"),t(" container. ")],-1)])),_:1})])]),_:1}))}});u(c).mount("#app");