"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:19,columnNumber:242},this)," for your top navigation, a section for your menu, and a ",(0,a.jsxDEV)(n.code,{children:"

"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:19,columnNumber:309},this)," for your primary content. By adhering to semantic HTML5 elements, AppLayout ensures that your application's structure is both easy to maintain and optimized for accessibility."]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:19,columnNumber:1},this),` `,(0,a.jsxDEV)(n.pre,{children:(0,a.jsxDEV)(n.code,{className:"language-tsx",children:`

...

`},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:21,columnNumber:1},this)},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:21,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:["To make the most of AppLayout, you'll need to apply specific styles to the ",(0,a.jsxDEV)(n.code,{children:""},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:32,columnNumber:76},this)," tag. These include display: flex and flex-wrap: wrap, ensuring that your layout is properly aligned and responsive."]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:32,columnNumber:1},this),` `,(0,a.jsxDEV)(n.pre,{children:(0,a.jsxDEV)(n.code,{className:"language-tsx",children:` {/* */} `},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:34,columnNumber:1},this)},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:34,columnNumber:1},this),` `,(0,a.jsxDEV)(n.h3,{children:"Top navigation"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:42,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:["The AppLayout includes a ",(0,a.jsxDEV)(n.code,{children:"topNavigation"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:44,columnNumber:26},this)," prop. Use it when you want to display a row which visually sits above all other sections. It\u2019s position is fixed to the top with all content below this container scrolling underneath the Top Navigation."]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:44,columnNumber:1},this),` `,(0,a.jsxDEV)(n.pre,{children:(0,a.jsxDEV)(n.code,{className:"language-tsx",children:`{/* EDS Top Navigation */}}> `},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:46,columnNumber:1},this)},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:46,columnNumber:1},this),` `,(0,a.jsxDEV)(m,{as:"img",src:"/images/app-layout-top-navigation.png",alt:""},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:50,columnNumber:1},this),` `,(0,a.jsxDEV)(n.h3,{children:"Banner"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:52,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:["The AppLayout includes a ",(0,a.jsxDEV)(n.code,{children:"banner"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:54,columnNumber:26},this)," prop that allows you to display important messages, such as system wide notifications or prompts for user action (e.g., accepting cookies). This banner is positioned above the top navigation, ensuring it is prominently displayed to users. Additional details for the banner will be provided in future updates."]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:54,columnNumber:1},this),` `,(0,a.jsxDEV)(n.h3,{children:"Side navigation"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:56,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:["Provide the ",(0,a.jsxDEV)(n.code,{children:"sideNavigation"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:58,columnNumber:13},this)," prop to display the menu which allows users to move between modules or pages. It is always positioned on the far left of the app when displayed."]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:58,columnNumber:1},this),` `,(0,a.jsxDEV)(n.pre,{children:(0,a.jsxDEV)(n.code,{className:"language-tsx",children:`{/* ELMO Menu */}}> `},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:60,columnNumber:1},this)},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:60,columnNumber:1},this),` `,(0,a.jsxDEV)(m,{as:"img",src:"/images/app-layout-side-navigation.png",alt:""},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:64,columnNumber:1},this),` `,(0,a.jsxDEV)(n.h3,{children:"Compact state"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:66,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:"The AppLayout is designed to adapt to different screen sizes seamlessly. When the window size falls below a certain threshold, AppLayout enters a compact state where the side navigation replaces the top navigation, creating a more space-efficient layout."},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:68,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:"The side navigation container is removed from the layout when the view is smaller than the xlarge breakpoint. The user will be able to access the app menu as a drawer from within the top navigation when this occurs."},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:70,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:[(0,a.jsxDEV)(n.strong,{children:"NOTE:"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:72,columnNumber:1},this)," You can override the default threshold for the compact state by providing the ",(0,a.jsxDEV)(n.code,{children:"compactBreakpoint"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:72,columnNumber:89},this)," prop. Ideally the AppLayout compact state matches the threshold used by the menu as the menu has its own implementation for tracking compact state."]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:72,columnNumber:1},this),` `,(0,a.jsxDEV)(n.pre,{children:(0,a.jsxDEV)(n.code,{className:"language-tsx",children:`{/* ELMO Menu */}}> `},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:74,columnNumber:1},this)},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:74,columnNumber:1},this),` `,(0,a.jsxDEV)(m,{as:"img",src:"/images/app-layout-compact-state.png",alt:""},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:78,columnNumber:1},this),` `,(0,a.jsxDEV)(n.h2,{children:"Content"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:80,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:["The ",(0,a.jsxDEV)(n.code,{children:""},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:82,columnNumber:5},this)," component sets the boundaries of where the main content of the app lives. The content placed within this container expands to fill the entire width of the screen by default. This container has padding values built into it for its responsive breakpoints."]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:82,columnNumber:1},this),` `,(0,a.jsxDEV)(m,{as:"img",src:"/images/app-layout-content.png",alt:""},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:84,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:"The Content should be a direct child of AppLayout. It sets the correct styles so that the remaining space on the page is used effectively."},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:86,columnNumber:1},this),` `,(0,a.jsxDEV)(n.pre,{children:(0,a.jsxDEV)(n.code,{className:"language-tsx",children:`{/* ELMO menu */}}> {/* ... rest of the page */} `},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:88,columnNumber:1},this)},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:88,columnNumber:1},this),` `,(0,a.jsxDEV)(n.h3,{children:"Header"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:94,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:["The Content component accepts a ",(0,a.jsxDEV)(n.code,{children:"header"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:96,columnNumber:33},this)," prop and is typically used to display the ",(0,a.jsxDEV)(n.code,{children:""},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:96,columnNumber:84},this)," component, but can also accept other custom header layouts such as the doc site header."]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:96,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:[(0,a.jsxDEV)(n.strong,{children:"NOTE:"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:98,columnNumber:1},this)," Content does not set padding for the header because the PageHeader is already opinionated about its own padding."]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:98,columnNumber:1},this),` `,(0,a.jsxDEV)(g,{children:(0,a.jsxDEV)(p,{children:["Information about what the PageHeader includes and how it is used can be found ",(0,a.jsxDEV)(n.a,{href:"page-header",children:"here"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:102,columnNumber:88},this),"."]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:102,columnNumber:3},this)},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:100,columnNumber:1},this),` `,(0,a.jsxDEV)(m,{as:"img",src:"/images/app-layout-header.png",alt:""},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:105,columnNumber:1},this),` `,(0,a.jsxDEV)(n.pre,{children:(0,a.jsxDEV)(n.code,{className:"language-tsx",children:`const breadcrumbs: BreadcrumbsProps = { crumbs: [{ label: 'Home', href: '#' }, { label: 'Learning' }] }; const tabs: NavigationalTabItemProps[] = [ { href: '#', isCurrentPage: true, label: 'Courses', }, { href: '#', label: 'Sessions', }, ]; return ( }> {/* ... rest of the page */} ); `},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:107,columnNumber:1},this)},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:107,columnNumber:1},this),` `,(0,a.jsxDEV)(n.h3,{children:"Sticky header"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:129,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:"By default, the header does not have fixed or sticky behaviours within the AppLayout. Particularly on smaller screens this may take up a large portion of the users display reducing focus on the page contents and resulting in a less optimised experience."},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:131,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:["However, in scenarios where the header container houses important information or actions, the prop ",(0,a.jsxDEV)(n.code,{children:"stickyHeader"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:133,columnNumber:100},this)," can be enabled. This behaviour provides users with access to pertinent functions and removes the need to scroll to the top of the page to view the header container."]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:133,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:[(0,a.jsxDEV)(n.strong,{children:"NOTE:"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:135,columnNumber:1},this)," On both desktop and mobile devices, as the user scroll down the page, the header will naturally move out of view. As the user scrolls up the page, the header container will slide into view."]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:135,columnNumber:1},this),` `,(0,a.jsxDEV)(m,{as:"img",src:"/images/app-layout-sticky-header.png",alt:""},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:137,columnNumber:1},this),` `,(0,a.jsxDEV)(n.pre,{children:(0,a.jsxDEV)(n.code,{className:"language-tsx",children:`{/* */}} stickyHeader> {/* ... rest of the page */} `},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:139,columnNumber:1},this)},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:139,columnNumber:1},this),` `,(0,a.jsxDEV)(n.h3,{children:"Size"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:145,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:["The ",(0,a.jsxDEV)(n.code,{children:"size"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:147,columnNumber:5},this)," prop allows you to customise the width of the content inside the container regardless of the width of the screen. All content within the body container is justified to the left side by default."]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:147,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:"The three available sizes available are small, medium and large. If the view is smaller than the value set by the size, the content will simply fill the available space."},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:149,columnNumber:1},this),` `,(0,a.jsxDEV)(n.pre,{children:(0,a.jsxDEV)(n.code,{className:"language-tsx",children:`{/* ... rest of the page */} `},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:151,columnNumber:1},this)},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:151,columnNumber:1},this),` `,(0,a.jsxDEV)(n.h4,{children:"Large"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:155,columnNumber:1},this),` `,(0,a.jsxDEV)(m,{as:"img",src:"/images/app-layout-size-large.png",alt:""},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:157,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:"Large has a\xA0max-width value of 1400px. This size is suitable for pages with dense UI where we want to restrict the elements from filling the entire view on wider displays. An example of this is applied to our dashboard."},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:159,columnNumber:1},this),` `,(0,a.jsxDEV)(n.h4,{children:"Medium"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:161,columnNumber:1},this),` `,(0,a.jsxDEV)(m,{as:"img",src:"/images/app-layout-size-medium.png",alt:""},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:163,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:"Medium has a\xA0max-width value of 1100px. This width is commonly used for forms using the split layout, or for pages which have two columns for content and supporting elements such as our course details page."},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:165,columnNumber:1},this),` `,(0,a.jsxDEV)(n.h4,{children:"Small"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:167,columnNumber:1},this),` `,(0,a.jsxDEV)(m,{as:"img",src:"/images/app-layout-size-small.png",alt:""},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:169,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:"Small has a\xA0max-width value of 600px. This width is commonly used for less complex pages or where a very narrow width is required for displaying content."},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:171,columnNumber:1},this),` `,(0,a.jsxDEV)(n.h3,{children:"Align"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:173,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:["The ",(0,a.jsxDEV)(n.code,{children:"align"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:175,columnNumber:5},this)," prop allows you to customise the position of the elements within the content container. This is particularly useful along side size, allowing you to customise the area we display content to draw user focus. The two available alignments available are start (default) and center."]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:175,columnNumber:1},this),` `,(0,a.jsxDEV)(n.pre,{children:(0,a.jsxDEV)(n.code,{className:"language-tsx",children:` {/* ... rest of the page */} `},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:177,columnNumber:1},this)},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:177,columnNumber:1},this),` `,(0,a.jsxDEV)(n.h4,{children:"Start"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:183,columnNumber:1},this),` `,(0,a.jsxDEV)(m,{as:"img",src:"/images/app-layout-align-start.png",alt:""},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:185,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:"Positions the elements on the far left."},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:187,columnNumber:1},this),` `,(0,a.jsxDEV)(n.h4,{children:"Center"},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:189,columnNumber:1},this),` `,(0,a.jsxDEV)(m,{as:"img",src:"/images/app-layout-align-center.png",alt:""},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:191,columnNumber:1},this),` `,(0,a.jsxDEV)(n.p,{children:"Positions the elements in the middle of the content container."},void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:193,columnNumber:1},this)]},void 0,!0,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx",lineNumber:1,columnNumber:1},this)}function yn(d={}){let{wrapper:n}=d.components||{};return n?(0,a.jsxDEV)(n,Object.assign({},d,{children:(0,a.jsxDEV)(Le,d,void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx"},this)}),void 0,!1,{fileName:"/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx"},this):Le(d)}var kn=yn;function G(d,n,p){throw new Error("Expected "+(n?"component":"object")+" `"+d+"` to be defined: you likely forgot to import, pass, or provide it."+(p?"\nIt\u2019s referenced in your code at `"+p+"` in `/home/jenkins/agent/workspace/ELMO_design_system_master/packages/app-layout/_mdx_bundler_entry_point-05ce75f3-f19b-4300-9f22-1eb33b3b57d8.mdx`":""))}return hn(Nn);})(); /*! Bundled license information: react/cjs/react-jsx-dev-runtime.development.js: (** * @license React * react-jsx-dev-runtime.development.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. *) */ ;return Component;

AppLayout

@eds/app-layout

4.0.3

Patch Changes

4.0.2

Patch Changes

4.0.1

Patch Changes

4.0.0

Major Changes