Layout component is used to create the main layout of an app. Layout currently comes with one main configuration: two-column.
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
View RTL
<nord-layout><nord-navigationslot="nav"><nord-dropdownslot="header"expand><nord-buttonslot="toggle"expand><nord-avatarslot="start"name="Bath Clinic"variant="square">B</nord-avatar> Bath Clinic</nord-button><nord-dropdown-groupheading="laura.williams@nordhealth.com"><nord-dropdown-item><nord-avatarslot="start"name="Bath Clinic"size="s"variant="square">B</nord-avatar> Bath Clinic<nord-iconslot="end"name="interface-checked"></nord-icon></nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Ocean Beach Clinic"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-success)"> O</nord-avatar> Ocean Beach Clinic</nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Park Animal Hospital"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-highlight)"> P</nord-avatar> Park Animal Hospital</nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Balboa Pet Hospital"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-danger)"> B</nord-avatar> Balboa Pet Hospital</nord-dropdown-item></nord-dropdown-group><nord-dropdown-group><nord-dropdown-item>Add another clinic</nord-dropdown-item><nord-dropdown-item>Customize style</nord-dropdown-item></nord-dropdown-group><nord-dropdown-item>Sign out from all clinics</nord-dropdown-item></nord-dropdown><nord-nav-groupheading="Workspace"><nord-nav-itemhref="#"activeicon="navigation-dashboard">Dashboard</nord-nav-item><nord-nav-itemicon="navigation-payments"> Payments<nord-nav-groupslot="subnav"><nord-nav-itemhref="#">All transactions</nord-nav-item><nord-nav-itemhref="#">Payments</nord-nav-item><nord-nav-itemhref="#">Disputes</nord-nav-item></nord-nav-group></nord-nav-item><nord-nav-itemicon="navigation-reports"> Reports<nord-nav-groupslot="subnav"><nord-nav-itemhref="#">Payments</nord-nav-item><nord-nav-itemhref="#">Disputes</nord-nav-item><nord-nav-itemhref="#">Payouts</nord-nav-item></nord-nav-group></nord-nav-item><nord-nav-itemhref="#"icon="navigation-settings">Settings</nord-nav-item></nord-nav-group><nord-dropdownexpandslot="footer"><nord-buttonslot="toggle"expand><nord-avatarslot="start"aria-hidden="true"name="Laura Williams"></nord-avatar> Laura Williams</nord-button><nord-dropdown-group><nord-dropdown-itemhref="#">View profile</nord-dropdown-item><nord-dropdown-item>Settings</nord-dropdown-item></nord-dropdown-group><nord-dropdown-group><nord-dropdown-item> Show keyboard shortcuts<divslot="end"class="n-color-text-weaker n-font-size-xs">Cmd+K</div></nord-dropdown-item><nord-dropdown-item>Help & Support</nord-dropdown-item><nord-dropdown-item>API</nord-dropdown-item></nord-dropdown-group><nord-dropdown-item> Sign out<nord-iconslot="end"name="interface-logout"></nord-icon></nord-dropdown-item></nord-dropdown></nord-navigation><nord-headerslot="header"><h1class="n-typescale-l">Dashboard</h1><nord-buttonvariant="primary"slot="end"><nord-iconslot="start"name="interface-add-small"></nord-icon> Create new</nord-button><nord-tooltipid="export"position="block-end"> Export data as Spreadsheet </nord-tooltip></nord-header><nord-stackgap="l"><nord-card><h2slot="header">Card heading</h2><nord-bannervariant="success"> Your order has been shipped and will arrive on May 27th. <ahref="#">Track order</a>.</nord-banner></nord-card></nord-stack></nord-layout><nord-command-menu></nord-command-menu><script>const layout = document.querySelector("nord-layout")const commandMenu = document.querySelector("nord-command-menu") commandMenu.commands =[{id:"toggle-nav",title:"Toggle navigation",icon:"navigation-toggle",shortcut:"Alt+KeyL",handler(){ layout.navOpen =!layout.navOpen},},]const navigation = document.querySelector("nord-navigation")// for demo purposes, activate nav items on click.// in most cases you should instead integrate with your chosen router navigation.addEventListener("click",e=>{if(e.target.matches("nord-nav-item")&& e.target.href){ e.target.active =true}})</script>
<nord-layoutstyle="--n-layout-background-color:var(--n-color-nav-surface)"><nord-navigationstyle="--n-navigation-background-color:var(--n-color-background)"slot="nav"><nord-dropdownslot="header"expand><nord-buttonslot="toggle"expand><nord-avatarslot="start"name="Bath Clinic"variant="square">B</nord-avatar> Bath Clinic</nord-button><nord-dropdown-groupheading="laura.williams@nordhealth.com"><nord-dropdown-item><nord-avatarslot="start"name="Bath Clinic"size="s"variant="square">B</nord-avatar> Bath Clinic<nord-iconslot="end"name="interface-checked"></nord-icon></nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Ocean Beach Clinic"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-success)"> O</nord-avatar> Ocean Beach Clinic</nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Park Animal Hospital"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-highlight)"> P</nord-avatar> Park Animal Hospital</nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Balboa Pet Hospital"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-danger)"> B</nord-avatar> Balboa Pet Hospital</nord-dropdown-item></nord-dropdown-group><nord-dropdown-group><nord-dropdown-item>Add another clinic</nord-dropdown-item><nord-dropdown-item>Customize style</nord-dropdown-item></nord-dropdown-group><nord-dropdown-item>Sign out from all clinics</nord-dropdown-item></nord-dropdown><nord-nav-groupheading="Workspace"><nord-nav-itemhref="#"activeicon="navigation-dashboard">Dashboard</nord-nav-item><nord-nav-itemicon="navigation-payments"> Payments<nord-nav-groupslot="subnav"><nord-nav-itemhref="#">All transactions</nord-nav-item><nord-nav-itemhref="#">Payments</nord-nav-item><nord-nav-itemhref="#">Disputes</nord-nav-item></nord-nav-group></nord-nav-item><nord-nav-itemicon="navigation-reports"> Reports<nord-nav-groupslot="subnav"><nord-nav-itemhref="#">Payments</nord-nav-item><nord-nav-itemhref="#">Disputes</nord-nav-item><nord-nav-itemhref="#">Payouts</nord-nav-item></nord-nav-group></nord-nav-item><nord-nav-itemhref="#"icon="navigation-settings">Settings</nord-nav-item></nord-nav-group><nord-dropdownexpandslot="footer"><nord-buttonslot="toggle"expand><nord-avatarslot="start"aria-hidden="true"name="Laura Williams"></nord-avatar> Laura Williams</nord-button><nord-dropdown-group><nord-dropdown-itemhref="#">View profile</nord-dropdown-item><nord-dropdown-item>Settings</nord-dropdown-item></nord-dropdown-group><nord-dropdown-group><nord-dropdown-item> Show keyboard shortcuts<divslot="end"class="n-color-text-weaker n-font-size-xs">Cmd+K</div></nord-dropdown-item><nord-dropdown-item>Help & Support</nord-dropdown-item><nord-dropdown-item>API</nord-dropdown-item></nord-dropdown-group><nord-dropdown-item> Sign out<nord-iconslot="end"name="interface-logout"></nord-icon></nord-dropdown-item></nord-dropdown></nord-navigation><nord-headerslot="header"><h1class="n-typescale-l">Dashboard</h1><nord-buttonvariant="primary"slot="end"><nord-iconslot="start"name="interface-add-small"></nord-icon> Create new</nord-button><nord-tooltipid="export"position="block-end"> Export data as Spreadsheet </nord-tooltip></nord-header><nord-stackgap="l"><nord-card><h2slot="header">Card heading</h2><nord-bannervariant="success"> Your order has been shipped and will arrive on May 27th. <ahref="#">Track order</a>.</nord-banner></nord-card></nord-stack></nord-layout><nord-command-menu></nord-command-menu><script>const layout = document.querySelector("nord-layout")const commandMenu = document.querySelector("nord-command-menu") commandMenu.commands =[{id:"toggle-nav",title:"Toggle navigation",icon:"navigation-toggle",shortcut:"Alt+KeyL",handler(){ layout.navOpen =!layout.navOpen},},]</script>
<nord-layout><nord-navigationslot="nav"><nord-dropdownslot="header"expand><nord-buttonslot="toggle"expand><nord-avatarslot="start"name="Bath Clinic"variant="square">B</nord-avatar> Bath Clinic</nord-button><nord-dropdown-groupheading="laura.williams@nordhealth.com"><nord-dropdown-item><nord-avatarslot="start"name="Bath Clinic"size="s"variant="square">B</nord-avatar> Bath Clinic<nord-iconslot="end"name="interface-checked"></nord-icon></nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Ocean Beach Clinic"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-success)"> O</nord-avatar> Ocean Beach Clinic</nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Park Animal Hospital"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-highlight)"> P</nord-avatar> Park Animal Hospital</nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Balboa Pet Hospital"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-danger)"> B</nord-avatar> Balboa Pet Hospital</nord-dropdown-item></nord-dropdown-group><nord-dropdown-group><nord-dropdown-item>Add another clinic</nord-dropdown-item><nord-dropdown-item>Customize style</nord-dropdown-item></nord-dropdown-group><nord-dropdown-item>Sign out from all clinics</nord-dropdown-item></nord-dropdown><nord-nav-groupheading="Workspace"><nord-nav-itemhref="#"activeicon="navigation-dashboard">Dashboard</nord-nav-item><nord-nav-itemicon="navigation-payments"> Payments<nord-nav-groupslot="subnav"><nord-nav-itemhref="#">All transactions</nord-nav-item><nord-nav-itemhref="#">Payments</nord-nav-item><nord-nav-itemhref="#">Disputes</nord-nav-item></nord-nav-group></nord-nav-item><nord-nav-itemicon="navigation-reports"> Reports<nord-nav-groupslot="subnav"><nord-nav-itemhref="#">Payments</nord-nav-item><nord-nav-itemhref="#">Disputes</nord-nav-item><nord-nav-itemhref="#">Payouts</nord-nav-item></nord-nav-group></nord-nav-item><nord-nav-itemhref="#"icon="navigation-settings">Settings</nord-nav-item></nord-nav-group><nord-dropdownexpandslot="footer"><nord-buttonslot="toggle"expand><nord-avatararia-hidden="true"name="Laura Williams"slot="start"></nord-avatar> Laura Williams</nord-button><nord-dropdown-group><nord-dropdown-itemhref="#">View profile</nord-dropdown-item><nord-dropdown-item>Settings</nord-dropdown-item></nord-dropdown-group><nord-dropdown-group><nord-dropdown-item> Show keyboard shortcuts<divslot="end"class="n-color-text-weaker n-font-size-xs">Cmd+K</div></nord-dropdown-item><nord-dropdown-item>Help & Support</nord-dropdown-item><nord-dropdown-item>API</nord-dropdown-item></nord-dropdown-group><nord-dropdown-item> Sign out<nord-iconslot="end"name="interface-logout"></nord-icon></nord-dropdown-item></nord-dropdown></nord-navigation><nord-headerslot="header"><h1class="n-typescale-l">Dashboard</h1><nord-buttonvariant="primary"slot="end"><nord-iconslot="start"name="interface-add-small"></nord-icon> Create new</nord-button><nord-tooltipid="export"position="block-end"> Export data as Spreadsheet </nord-tooltip></nord-header><nord-stackgap="l"><nord-card><h2slot="header">Card heading</h2><nord-bannervariant="success"> Your order has been shipped and will arrive on May 27th. <ahref="#">Track order</a>.</nord-banner></nord-card></nord-stack><nord-drawerslot="drawer"><nord-headerslot="header"><h2class="n-typescale-l">Drawer header</h2><nord-buttonslot="end"id="close"variant="plain"aria-describedby="close-sidebar"size="s"><nord-iconname="interface-close"size="s"></nord-icon></nord-button><nord-tooltipid="close-sidebar">Close</nord-tooltip></nord-header><pclass="n-typeset"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae itaque ad libero numquam ullam nisi quam porro, et quo accusantium!</p><nord-buttonslot="footer">Cancel</nord-button><nord-buttonslot="footer"variant="primary">Done</nord-button></nord-drawer></nord-layout><nord-command-menu></nord-command-menu><script>const layout = document.querySelector("nord-layout")const drawer = document.querySelector("nord-drawer")const commandMenu = document.querySelector("nord-command-menu")const closeButton = document.querySelector("#close")consthide=()=> drawer.remove() closeButton.addEventListener("click", hide) commandMenu.commands =[{id:"toggle-nav",title:"Toggle navigation",icon:"navigation-toggle",shortcut:"Alt+KeyL",handler(){ layout.navOpen =!layout.navOpen},},]</script>
<nord-layoutpadding="none"><nord-navigationslot="nav"><nord-dropdownslot="header"expand><nord-buttonslot="toggle"expand><nord-avatarslot="start"name="Bath Clinic"variant="square">B</nord-avatar> Bath Clinic</nord-button><nord-dropdown-groupheading="laura.williams@nordhealth.com"><nord-dropdown-item><nord-avatarslot="start"name="Bath Clinic"size="s"variant="square">B</nord-avatar> Bath Clinic<nord-iconslot="end"name="interface-checked"></nord-icon></nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Ocean Beach Clinic"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-success)"> O</nord-avatar> Ocean Beach Clinic</nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Park Animal Hospital"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-highlight)"> P</nord-avatar> Park Animal Hospital</nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Balboa Pet Hospital"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-danger)"> B</nord-avatar> Balboa Pet Hospital</nord-dropdown-item></nord-dropdown-group><nord-dropdown-group><nord-dropdown-item>Add another clinic</nord-dropdown-item><nord-dropdown-item>Customize style</nord-dropdown-item></nord-dropdown-group><nord-dropdown-item>Sign out from all clinics</nord-dropdown-item></nord-dropdown><nord-nav-groupheading="Workspace"><nord-nav-itemhref="#"activeicon="navigation-dashboard">Dashboard</nord-nav-item><nord-nav-itemicon="navigation-payments"> Payments<nord-nav-groupslot="subnav"><nord-nav-itemhref="#">All transactions</nord-nav-item><nord-nav-itemhref="#">Payments</nord-nav-item><nord-nav-itemhref="#">Disputes</nord-nav-item></nord-nav-group></nord-nav-item><nord-nav-itemicon="navigation-reports"> Reports<nord-nav-groupslot="subnav"><nord-nav-itemhref="#">Payments</nord-nav-item><nord-nav-itemhref="#">Disputes</nord-nav-item><nord-nav-itemhref="#">Payouts</nord-nav-item></nord-nav-group></nord-nav-item><nord-nav-itemhref="#"icon="navigation-settings">Settings</nord-nav-item></nord-nav-group><nord-dropdownexpandslot="footer"><nord-buttonslot="toggle"expand><nord-avatararia-hidden="true"name="Laura Williams"slot="start"></nord-avatar> Laura Williams</nord-button><nord-dropdown-group><nord-dropdown-itemhref="#">View profile</nord-dropdown-item><nord-dropdown-item>Settings</nord-dropdown-item></nord-dropdown-group><nord-dropdown-group><nord-dropdown-item> Show keyboard shortcuts<divslot="end"class="n-color-text-weaker n-font-size-xs">Cmd+K</div></nord-dropdown-item><nord-dropdown-item>Help & Support</nord-dropdown-item><nord-dropdown-item>API</nord-dropdown-item></nord-dropdown-group><nord-dropdown-item> Sign out<nord-iconslot="end"name="interface-logout"></nord-icon></nord-dropdown-item></nord-dropdown></nord-navigation><nord-headerslot="header"><h1class="n-typescale-l">Dashboard</h1><nord-buttonvariant="primary"slot="end"><nord-iconslot="start"name="interface-add-small"></nord-icon> Create new</nord-button><nord-tooltipid="export"position="block-end"> Export data as Spreadsheet </nord-tooltip></nord-header><nord-tab-grouplabel="Title"stickypadding="l"><nord-tabslot="tab">Overview</nord-tab><nord-tab-panel><nord-card><h2slot="header">Card heading</h2><nord-bannervariant="success"> Your order has been shipped and will arrive on May 27th. <ahref="#">Track order</a>.</nord-banner></nord-card></nord-tab-panel><nord-tabslot="tab">Terminals</nord-tab><nord-tab-panel><nord-card><h2slot="header">Card heading 2</h2><nord-bannervariant="success"> Your order has been shipped and will arrive on May 28th. <ahref="#">Track order</a>.</nord-banner></nord-card></nord-tab-panel><nord-tabslot="tab">Stores</nord-tab><nord-tab-panel><nord-card><h2slot="header">Card heading 3</h2><nord-bannervariant="success"> Your order has been shipped and will arrive on May 29th. <ahref="#">Track order</a>.</nord-banner></nord-card></nord-tab-panel><nord-tabslot="tab">Account holders</nord-tab><nord-tab-panel><nord-card><h2slot="header">Card heading 4</h2><nord-bannervariant="success"> Your order has been shipped and will arrive on May 30th. <ahref="#">Track order</a>.</nord-banner></nord-card></nord-tab-panel></nord-tab-group></nord-layout><nord-command-menu></nord-command-menu><script>const layout = document.querySelector("nord-layout")const commandMenu = document.querySelector("nord-command-menu") commandMenu.commands =[{id:"toggle-nav",title:"Toggle navigation",icon:"navigation-toggle",shortcut:"Alt+KeyL",handler(){ layout.navOpen =!layout.navOpen},},]</script>
<nord-layoutpersist-nav-state><nord-navigationslot="nav"><nord-dropdownslot="header"expand><nord-buttonslot="toggle"expand><nord-avatarslot="start"name="Bath Clinic"variant="square">B</nord-avatar> Bath Clinic</nord-button><nord-dropdown-groupheading="laura.williams@nordhealth.com"><nord-dropdown-item><nord-avatarslot="start"name="Bath Clinic"size="s"variant="square">B</nord-avatar> Bath Clinic<nord-iconslot="end"name="interface-checked"></nord-icon></nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Ocean Beach Clinic"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-success)"> O</nord-avatar> Ocean Beach Clinic</nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Park Animal Hospital"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-highlight)"> P</nord-avatar> Park Animal Hospital</nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Balboa Pet Hospital"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-danger)"> B</nord-avatar> Balboa Pet Hospital</nord-dropdown-item></nord-dropdown-group><nord-dropdown-group><nord-dropdown-item>Add another clinic</nord-dropdown-item><nord-dropdown-item>Customize style</nord-dropdown-item></nord-dropdown-group><nord-dropdown-item>Sign out from all clinics</nord-dropdown-item></nord-dropdown><nord-nav-groupheading="Workspace"><nord-nav-itemhref="#"activeicon="navigation-dashboard">Dashboard</nord-nav-item><nord-nav-itemicon="navigation-payments"> Payments<nord-nav-groupslot="subnav"><nord-nav-itemhref="#">All transactions</nord-nav-item><nord-nav-itemhref="#">Payments</nord-nav-item><nord-nav-itemhref="#">Disputes</nord-nav-item></nord-nav-group></nord-nav-item><nord-nav-itemicon="navigation-reports"> Reports<nord-nav-groupslot="subnav"><nord-nav-itemhref="#">Payments</nord-nav-item><nord-nav-itemhref="#">Disputes</nord-nav-item><nord-nav-itemhref="#">Payouts</nord-nav-item></nord-nav-group></nord-nav-item><nord-nav-itemhref="#"icon="navigation-settings">Settings</nord-nav-item></nord-nav-group><nord-dropdownexpandslot="footer"><nord-buttonslot="toggle"expand><nord-avatarslot="start"aria-hidden="true"name="Laura Williams"></nord-avatar> Laura Williams</nord-button><nord-dropdown-group><nord-dropdown-itemhref="#">View profile</nord-dropdown-item><nord-dropdown-item>Settings</nord-dropdown-item></nord-dropdown-group><nord-dropdown-group><nord-dropdown-item> Show keyboard shortcuts<divslot="end"class="n-color-text-weaker n-font-size-xs">Cmd+K</div></nord-dropdown-item><nord-dropdown-item>Help & Support</nord-dropdown-item><nord-dropdown-item>API</nord-dropdown-item></nord-dropdown-group><nord-dropdown-item> Sign out<nord-iconslot="end"name="interface-logout"></nord-icon></nord-dropdown-item></nord-dropdown></nord-navigation><nord-headerslot="header"><h1class="n-typescale-l">Dashboard</h1><nord-buttonvariant="primary"slot="end"><nord-iconslot="start"name="interface-add-small"></nord-icon> Create new</nord-button><nord-tooltipid="export"position="block-end"> Export data as Spreadsheet </nord-tooltip></nord-header><nord-stackgap="l"><nord-card><h2slot="header">Card heading</h2><nord-bannervariant="success"> Your order has been shipped and will arrive on May 27th. <ahref="#">Track order</a>.</nord-banner></nord-card></nord-stack></nord-layout><nord-command-menu></nord-command-menu><script>const layout = document.querySelector("nord-layout")const commandMenu = document.querySelector("nord-command-menu") commandMenu.commands =[{id:"toggle-nav",title:"Toggle navigation",icon:"navigation-toggle",shortcut:"Alt+KeyL",handler(){ layout.navOpen =!layout.navOpen},},]const navigation = document.querySelector("nord-navigation")// for demo purposes, activate nav items on click.// in most cases you should instead integrate with your chosen router navigation.addEventListener("click",e=>{if(e.target.matches("nord-nav-item")&& e.target.href){ e.target.active =true}})</script>
<nord-layout><nord-navigationslot="nav"><nord-dropdownslot="header"expand><nord-buttonslot="toggle"expand><nord-avatarslot="start"name="Bath Clinic"variant="square">B</nord-avatar> Bath Clinic</nord-button><nord-dropdown-groupheading="laura.williams@nordhealth.com"><nord-dropdown-item><nord-avatarslot="start"name="Bath Clinic"size="s"variant="square">B</nord-avatar> Bath Clinic<nord-iconslot="end"name="interface-checked"></nord-icon></nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Ocean Beach Clinic"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-success)"> O</nord-avatar> Ocean Beach Clinic</nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Park Animal Hospital"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-highlight)"> P</nord-avatar> Park Animal Hospital</nord-dropdown-item><nord-dropdown-item><nord-avatarslot="start"name="Balboa Pet Hospital"size="s"variant="square"style="--n-avatar-color:var(--n-color-status-danger)"> B</nord-avatar> Balboa Pet Hospital</nord-dropdown-item></nord-dropdown-group><nord-dropdown-group><nord-dropdown-item>Add another clinic</nord-dropdown-item><nord-dropdown-item>Customize style</nord-dropdown-item></nord-dropdown-group><nord-dropdown-item>Sign out from all clinics</nord-dropdown-item></nord-dropdown><nord-nav-groupheading="Workspace"><nord-nav-itemhref="#"activeicon="navigation-dashboard">Dashboard</nord-nav-item><nord-nav-item