LayoutReady
Layout component is used to create the main layout of an app. Layout currently comes with one main configuration: two-column.
<nord-layout>
<nord-navigation slot="nav">
<nord-dropdown slot="header" expand>
<nord-button slot="toggle" expand>
<nord-avatar slot="start" name="Bath Clinic" variant="square">B</nord-avatar>
Bath Clinic
</nord-button>
<nord-dropdown-group heading="laura.williams@nordhealth.com">
<nord-dropdown-item>
<nord-avatar slot="start" name="Bath Clinic" size="s" variant="square">B</nord-avatar>
Bath Clinic
<nord-icon slot="end" name="interface-checked"></nord-icon>
</nord-dropdown-item>
<nord-dropdown-item>
<nord-avatar
slot="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-avatar
slot="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-avatar
slot="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-group heading="Workspace">
<nord-nav-item href="#" active icon="navigation-dashboard">Dashboard</nord-nav-item>
<nord-nav-item icon="navigation-payments">
Payments
<nord-nav-group slot="subnav">
<nord-nav-item href="#">All transactions</nord-nav-item>
<nord-nav-item href="#">Payments</nord-nav-item>
<nord-nav-item href="#">Disputes</nord-nav-item>
</nord-nav-group>
</nord-nav-item>
<nord-nav-item icon="navigation-reports">
Reports
<nord-nav-group slot="subnav">
<nord-nav-item href="#">Payments</nord-nav-item>
<nord-nav-item href="#">Disputes</nord-nav-item>
<nord-nav-item href="#">Payouts</nord-nav-item>
</nord-nav-group>
</nord-nav-item>
<nord-nav-item href="#" icon="navigation-settings">Settings</nord-nav-item>
</nord-nav-group>
<nord-dropdown expand slot="footer">
<nord-button slot="toggle" expand>
<nord-avatar slot="start" aria-hidden="true" name="Laura Williams"></nord-avatar>
Laura Williams
</nord-button>
<nord-dropdown-group>
<nord-dropdown-item href="#">View profile</nord-dropdown-item>
<nord-dropdown-item>Settings</nord-dropdown-item>
</nord-dropdown-group>
<nord-dropdown-group>
<nord-dropdown-item>
Show keyboard shortcuts
<div slot="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-icon slot="end" name="interface-logout"></nord-icon>
</nord-dropdown-item>
</nord-dropdown>
</nord-navigation>
<nord-header slot="header">
<h1 class="n-typescale-l">Dashboard</h1>
<nord-button variant="primary" slot="end">
<nord-icon slot="start" name="interface-add-small"></nord-icon>
Create new
</nord-button>
<nord-tooltip id="export" position="block-end"> Export data as Spreadsheet </nord-tooltip>
</nord-header>
<nord-stack gap="l">
<nord-card>
<h2 slot="header">Card heading</h2>
<nord-banner variant="success">
Your order has been shipped and will arrive on May 27th. <a href="#">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 style="--n-layout-background-color: var(--n-color-nav-surface)">
<nord-navigation style="--n-navigation-background-color: var(--n-color-background)" slot="nav">
<nord-dropdown slot="header" expand>
<nord-button slot="toggle" expand>
<nord-avatar slot="start" name="Bath Clinic" variant="square">B</nord-avatar>
Bath Clinic
</nord-button>
<nord-dropdown-group heading="laura.williams@nordhealth.com">
<nord-dropdown-item>
<nord-avatar slot="start" name="Bath Clinic" size="s" variant="square">B</nord-avatar>
Bath Clinic
<nord-icon slot="end" name="interface-checked"></nord-icon>
</nord-dropdown-item>
<nord-dropdown-item>
<nord-avatar
slot="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-avatar
slot="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-avatar
slot="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-group heading="Workspace">
<nord-nav-item href="#" active icon="navigation-dashboard">Dashboard</nord-nav-item>
<nord-nav-item icon="navigation-payments">
Payments
<nord-nav-group slot="subnav">
<nord-nav-item href="#">All transactions</nord-nav-item>
<nord-nav-item href="#">Payments</nord-nav-item>
<nord-nav-item href="#">Disputes</nord-nav-item>
</nord-nav-group>
</nord-nav-item>
<nord-nav-item icon="navigation-reports">
Reports
<nord-nav-group slot="subnav">
<nord-nav-item href="#">Payments</nord-nav-item>
<nord-nav-item href="#">Disputes</nord-nav-item>
<nord-nav-item href="#">Payouts</nord-nav-item>
</nord-nav-group>
</nord-nav-item>
<nord-nav-item href="#" icon="navigation-settings">Settings</nord-nav-item>
</nord-nav-group>
<nord-dropdown expand slot="footer">
<nord-button slot="toggle" expand>
<nord-avatar slot="start" aria-hidden="true" name="Laura Williams"></nord-avatar>
Laura Williams
</nord-button>
<nord-dropdown-group>
<nord-dropdown-item href="#">View profile</nord-dropdown-item>
<nord-dropdown-item>Settings</nord-dropdown-item>
</nord-dropdown-group>
<nord-dropdown-group>
<nord-dropdown-item>
Show keyboard shortcuts
<div slot="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-icon slot="end" name="interface-logout"></nord-icon>
</nord-dropdown-item>
</nord-dropdown>
</nord-navigation>
<nord-header slot="header">
<h1 class="n-typescale-l">Dashboard</h1>
<nord-button variant="primary" slot="end">
<nord-icon slot="start" name="interface-add-small"></nord-icon>
Create new
</nord-button>
<nord-tooltip id="export" position="block-end"> Export data as Spreadsheet </nord-tooltip>
</nord-header>
<nord-stack gap="l">
<nord-card>
<h2 slot="header">Card heading</h2>
<nord-banner variant="success">
Your order has been shipped and will arrive on May 27th. <a href="#">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-navigation slot="nav">
<nord-dropdown slot="header" expand>
<nord-button slot="toggle" expand>
<nord-avatar slot="start" name="Bath Clinic" variant="square">B</nord-avatar>
Bath Clinic
</nord-button>
<nord-dropdown-group heading="laura.williams@nordhealth.com">
<nord-dropdown-item>
<nord-avatar slot="start" name="Bath Clinic" size="s" variant="square">B</nord-avatar>
Bath Clinic
<nord-icon slot="end" name="interface-checked"></nord-icon>
</nord-dropdown-item>
<nord-dropdown-item>
<nord-avatar
slot="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-avatar
slot="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-avatar
slot="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-group heading="Workspace">
<nord-nav-item href="#" active icon="navigation-dashboard">Dashboard</nord-nav-item>
<nord-nav-item icon="navigation-payments">
Payments
<nord-nav-group slot="subnav">
<nord-nav-item href="#">All transactions</nord-nav-item>
<nord-nav-item href="#">Payments</nord-nav-item>
<nord-nav-item href="#">Disputes</nord-nav-item>
</nord-nav-group>
</nord-nav-item>
<nord-nav-item icon="navigation-reports">
Reports
<nord-nav-group slot="subnav">
<nord-nav-item href="#">Payments</nord-nav-item>
<nord-nav-item href="#">Disputes</nord-nav-item>
<nord-nav-item href="#">Payouts</nord-nav-item>
</nord-nav-group>
</nord-nav-item>
<nord-nav-item href="#" icon="navigation-settings">Settings</nord-nav-item>
</nord-nav-group>
<nord-dropdown expand slot="footer">
<nord-button slot="toggle" expand>
<nord-avatar aria-hidden="true" name="Laura Williams" slot="start"></nord-avatar>
Laura Williams
</nord-button>
<nord-dropdown-group>
<nord-dropdown-item href="#">View profile</nord-dropdown-item>
<nord-dropdown-item>Settings</nord-dropdown-item>
</nord-dropdown-group>
<nord-dropdown-group>
<nord-dropdown-item>
Show keyboard shortcuts
<div slot="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-icon slot="end" name="interface-logout"></nord-icon>
</nord-dropdown-item>
</nord-dropdown>
</nord-navigation>
<nord-header slot="header">
<h1 class="n-typescale-l">Dashboard</h1>
<nord-button variant="primary" slot="end">
<nord-icon slot="start" name="interface-add-small"></nord-icon>
Create new
</nord-button>
<nord-tooltip id="export" position="block-end"> Export data as Spreadsheet </nord-tooltip>
</nord-header>
<nord-stack gap="l">
<nord-card>
<h2 slot="header">Card heading</h2>
<nord-banner variant="success">
Your order has been shipped and will arrive on May 27th. <a href="#">Track order</a>.
</nord-banner>
</nord-card>
</nord-stack>
<nord-drawer slot="drawer">
<nord-header slot="header">
<h2 class="n-typescale-l">Drawer header</h2>
<nord-button slot="end" id="close" variant="plain" aria-describedby="close-sidebar" size="s">
<nord-icon name="interface-close" size="s"></nord-icon>
</nord-button>
<nord-tooltip id="close-sidebar">Close</nord-tooltip>
</nord-header>
<p class="n-typeset">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae itaque ad libero numquam ullam nisi quam
porro, et quo accusantium!
</p>
<nord-button slot="footer">Cancel</nord-button>
<nord-button slot="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")
const hide = () => 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-layout padding="none">
<nord-navigation slot="nav">
<nord-dropdown slot="header" expand>
<nord-button slot="toggle" expand>
<nord-avatar slot="start" name="Bath Clinic" variant="square">B</nord-avatar>
Bath Clinic
</nord-button>
<nord-dropdown-group heading="laura.williams@nordhealth.com">
<nord-dropdown-item>
<nord-avatar slot="start" name="Bath Clinic" size="s" variant="square">B</nord-avatar>
Bath Clinic
<nord-icon slot="end" name="interface-checked"></nord-icon>
</nord-dropdown-item>
<nord-dropdown-item>
<nord-avatar
slot="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-avatar
slot="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-avatar
slot="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-group heading="Workspace">
<nord-nav-item href="#" active icon="navigation-dashboard">Dashboard</nord-nav-item>
<nord-nav-item icon="navigation-payments">
Payments
<nord-nav-group slot="subnav">
<nord-nav-item href="#">All transactions</nord-nav-item>
<nord-nav-item href="#">Payments</nord-nav-item>
<nord-nav-item href="#">Disputes</nord-nav-item>
</nord-nav-group>
</nord-nav-item>
<nord-nav-item icon="navigation-reports">
Reports
<nord-nav-group slot="subnav">
<nord-nav-item href="#">Payments</nord-nav-item>
<nord-nav-item href="#">Disputes</nord-nav-item>
<nord-nav-item href="#">Payouts</nord-nav-item>
</nord-nav-group>
</nord-nav-item>
<nord-nav-item href="#" icon="navigation-settings">Settings</nord-nav-item>
</nord-nav-group>
<nord-dropdown expand slot="footer">
<nord-button slot="toggle" expand>
<nord-avatar aria-hidden="true" name="Laura Williams" slot="start"></nord-avatar>
Laura Williams
</nord-button>
<nord-dropdown-group>
<nord-dropdown-item href="#">View profile</nord-dropdown-item>
<nord-dropdown-item>Settings</nord-dropdown-item>
</nord-dropdown-group>
<nord-dropdown-group>
<nord-dropdown-item>
Show keyboard shortcuts
<div slot="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-icon slot="end" name="interface-logout"></nord-icon>
</nord-dropdown-item>
</nord-dropdown>
</nord-navigation>
<nord-header slot="header">
<h1 class="n-typescale-l">Dashboard</h1>
<nord-button variant="primary" slot="end">
<nord-icon slot="start" name="interface-add-small"></nord-icon>
Create new
</nord-button>
<nord-tooltip id="export" position="block-end"> Export data as Spreadsheet </nord-tooltip>
</nord-header>
<nord-tab-group label="Title" sticky padding="l">
<nord-tab slot="tab">Overview</nord-tab>
<nord-tab-panel>
<nord-card>
<h2 slot="header">Card heading</h2>
<nord-banner variant="success">
Your order has been shipped and will arrive on May 27th. <a href="#">Track order</a>.
</nord-banner>
</nord-card>
</nord-tab-panel>
<nord-tab slot="tab">Terminals</nord-tab>
<nord-tab-panel>
<nord-card>
<h2 slot="header">Card heading 2</h2>
<nord-banner variant="success">
Your order has been shipped and will arrive on May 28th. <a href="#">Track order</a>.
</nord-banner>
</nord-card>
</nord-tab-panel>
<nord-tab slot="tab">Stores</nord-tab>
<nord-tab-panel>
<nord-card>
<h2 slot="header">Card heading 3</h2>
<nord-banner variant="success">
Your order has been shipped and will arrive on May 29th. <a href="#">Track order</a>.
</nord-banner>
</nord-card>
</nord-tab-panel>
<nord-tab slot="tab">Account holders</nord-tab>
<nord-tab-panel>
<nord-card>
<h2 slot="header">Card heading 4</h2>
<nord-banner variant="success">
Your order has been shipped and will arrive on May 30th. <a href="#">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-layout>
<nord-navigation slot="nav">
<nord-dropdown slot="header" expand>
<nord-button slot="toggle" expand>
<nord-avatar slot="start" name="Bath Clinic" variant="square">B</nord-avatar>
Bath Clinic
</nord-button>
<nord-dropdown-group heading="laura.williams@nordhealth.com">
<nord-dropdown-item>
<nord-avatar slot="start" name="Bath Clinic" size="s" variant="square">B</nord-avatar>
Bath Clinic
<nord-icon slot="end" name="interface-checked"></nord-icon>
</nord-dropdown-item>
<nord-dropdown-item>
<nord-avatar
slot="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-avatar
slot="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-avatar
slot="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-group heading="Workspace">
<nord-nav-item href="#" active icon="navigation-dashboard">Dashboard</nord-nav-item>
<nord-nav-item icon="navigation-payments">
Payments
<nord-nav-group slot="subnav">
<nord-nav-item class="prevent-close" href="#">All transactions</nord-nav-item>
<nord-nav-item href="#">Payments</nord-nav-item>
<nord-nav-item href="#">Disputes</nord-nav-item>
</nord-nav-group>
</nord-nav-item>
<nord-nav-item icon="navigation-reports">
Reports
<nord-nav-group slot="subnav">
<nord-nav-item href="#">Payments</nord-nav-item>
<nord-nav-item href="#">Disputes</nord-nav-item>
<nord-nav-item href="#">Payouts</nord-nav-item>
</nord-nav-group>
</nord-nav-item>
<nord-nav-item href="#" icon="navigation-settings">Settings</nord-nav-item>
</nord-nav-group>
<nord-dropdown expand slot="footer">
<nord-button slot="toggle" expand>
<nord-avatar aria-hidden="true" name="Laura Williams" slot="start"></nord-avatar>
Laura Williams
</nord-button>
<nord-dropdown-group>
<nord-dropdown-item href="#">View profile</nord-dropdown-item>
<nord-dropdown-item>Settings</nord-dropdown-item>
</nord-dropdown-group>
<nord-dropdown-group>
<nord-dropdown-item>
Show keyboard shortcuts
<div slot="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-icon slot="end" name="interface-logout"></nord-icon>
</nord-dropdown-item>
</nord-dropdown>
</nord-navigation>
<nord-header slot="header">
<h1 class="n-typescale-l">Dashboard</h1>
<nord-button variant="primary" slot="end">
<nord-icon slot="start" name="interface-add-small"></nord-icon>
Create new
</nord-button>
<nord-tooltip id="export" position="block-end"> Export data as Spreadsheet </nord-tooltip>
</nord-header>
<nord-stack gap="l">
<nord-card>
<h2 slot="header">Card heading</h2>
<nord-banner variant="success">
Your order has been shipped and will arrive on May 27th. <a href="#">Track order</a>.
</nord-banner>
</nord-card>
</nord-stack>
</nord-layout>
<script>
document.querySelector(".prevent-close").addEventListener("click", e => {
// calling preventDefault() on a nav-item's click event
// will prevent the nav automatically closing on mobile
e.preventDefault()
})
</script>
<nord-layout>
<nord-navigation slot="nav">
<nord-dropdown slot="header" expand>
<nord-button slot="toggle" expand>
<nord-avatar slot="start" name="Bath Clinic" variant="square">B</nord-avatar>
Bath Clinic
</nord-button>
<nord-dropdown-group heading="laura.williams@nordhealth.com">
<nord-dropdown-item>
<nord-avatar slot="start" name="Bath Clinic" size="s" variant="square">B</nord-avatar>
Bath Clinic
<nord-icon slot="end" name="interface-checked"></nord-icon>
</nord-dropdown-item>
<nord-dropdown-item>
<nord-avatar
slot="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-avatar
slot="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-avatar
slot="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-group heading="Workspace">
<nord-nav-item href="#" active icon="navigation-dashboard">Dashboard</nord-nav-item>
<nord-nav-item icon="navigation-payments">
Payments
<nord-nav-group slot="subnav">
<nord-nav-item href="#">All transactions</nord-nav-item>
<nord-nav-item href="#">Payments</nord-nav-item>
<nord-nav-item href="#">Disputes</nord-nav-item>
</nord-nav-group>
</nord-nav-item>
<nord-nav-item icon="navigation-reports">
Reports
<nord-nav-group slot="subnav">
<nord-nav-item href="#">Payments</nord-nav-item>
<nord-nav-item href="#">Disputes</nord-nav-item>
<nord-nav-item href="#">Payouts</nord-nav-item>
</nord-nav-group>
</nord-nav-item>
<nord-nav-item href="#" icon="navigation-settings">Settings</nord-nav-item>
</nord-nav-group>
<nord-dropdown expand slot="footer">
<nord-button class="account-button" slot="toggle" expand variant="plain">
<nord-avatar aria-hidden="true" name="Laura Williams" slot="start"></nord-avatar>
Laura Williams
</nord-button>
<nord-dropdown-group>
<nord-dropdown-item href="#">View profile</nord-dropdown-item>
<nord-dropdown-item>Settings</nord-dropdown-item>
</nord-dropdown-group>
<nord-dropdown-group>
<nord-dropdown-item>
Show keyboard shortcuts
<div slot="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-icon slot="end" name="interface-logout"></nord-icon>
</nord-dropdown-item>
</nord-dropdown>
</nord-navigation>
<nord-header slot="header">
<h1 class="n-typescale-l">Dashboard</h1>
<nord-button variant="primary" slot="end">
<nord-icon slot="start" name="interface-add-small"></nord-icon>
Create new
</nord-button>
<nord-tooltip id="export" position="block-end"> Export data as Spreadsheet </nord-tooltip>
</nord-header>
<nord-stack gap="l">
<nord-card>
<h2 slot="header">Card heading</h2>
<nord-banner variant="success">
Your order has been shipped and will arrive on May 27th. <a href="#">Track order</a>.
</nord-banner>
</nord-card>
</nord-stack>
</nord-layout>
<script>
const layout = document.querySelector("nord-layout")
const dropdown = document.querySelector(`nord-dropdown[slot="footer"]`)
dropdown.addEventListener("click", async e => {
if (!e.target.matches("nord-dropdown-item")) {
return
}
await dropdown.hide(!layout.isNarrow)
// we only want to close the nav at narrow widths
if (layout.isNarrow) {
// awaiting hide() allows us to wait until the dropdown has animating
await dropdown.hide(false)
// then close the nav
layout.navOpen = false
} else {
dropdown.hide()
}
})
</script>
<nord-layout sticky padding="none">
<nord-navigation slot="nav">
<nord-dropdown slot="header" expand>
<nord-button slot="toggle" expand>
<nord-avatar slot="start" name="Bath Clinic" variant="square">B</nord-avatar>
Bath Clinic
</nord-button>
<nord-dropdown-group heading="laura.williams@nordhealth.com">
<nord-dropdown-item>
<nord-avatar slot="start" name="Bath Clinic" size="s" variant="square">B</nord-avatar>
Bath Clinic
<nord-icon slot="end" name="interface-checked"></nord-icon>
</nord-dropdown-item>
<nord-dropdown-item>
<nord-avatar
slot="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-avatar
slot="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-avatar
slot="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-group heading="Workspace">
<nord-nav-item href="#" active icon="navigation-dashboard">Dashboard</nord-nav-item>
<nord-nav-item icon="navigation-payments">
Payments
<nord-nav-group slot="subnav">
<nord-nav-item href="#">All transactions</nord-nav-item>
<nord-nav-item href="#">Payments</nord-nav-item>
<nord-nav-item href="#">Disputes</nord-nav-item>
</nord-nav-group>
</nord-nav-item>
<nord-nav-item icon="navigation-reports">
Reports
<nord-nav-group slot="subnav">
<nord-nav-item href="#">Payments</nord-nav-item>
<nord-nav-item href="#">Disputes</nord-nav-item>
<nord-nav-item href="#">Payouts</nord-nav-item>
</nord-nav-group>
</nord-nav-item>
<nord-nav-item href="#" icon="navigation-settings">Settings</nord-nav-item>
</nord-nav-group>
<nord-dropdown expand slot="footer">
<nord-button slot="toggle" expand>
<nord-avatar aria-hidden="true" name="Laura Williams" slot="start"></nord-avatar>
Laura Williams
</nord-button>
<nord-dropdown-group>
<nord-dropdown-item href="#">View profile</nord-dropdown-item>
<nord-dropdown-item>Settings</nord-dropdown-item>
</nord-dropdown-group>
<nord-dropdown-group>
<nord-dropdown-item>
Show keyboard shortcuts
<div slot="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-icon slot="end" name="interface-logout"></nord-icon>
</nord-dropdown-item>
</nord-dropdown>
</nord-navigation>
<nord-header slot="header">
<h1 class="n-typescale-l">Dashboard</h1>
</nord-header>
<nord-tab-group label="Title" sticky padding="l">
<nord-tab slot="tab">Overview</nord-tab>
<nord-tab-panel>
<nord-card padding="none">
<h2 slot="header">Payouts</h2>
<nord-table>
<table>
<thead>
<tr>
<th class="n-table-align-right">Amount</th>
<th>Status</th>
<th>Description</th>
<th>Method</th>
<th class="n-table-align-right">Date</th>
<th class="n-table-align-right">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="n-table-align-right">350,00 €</td>
<td class="current-status"><nord-badge>Neutral</nord-badge></td>
<td class="n-table-ellipsis">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor massa
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi. Aenean vulputate eleifend tellus.
</td>
<td class="n-caption">Card</td>
<td class="n-caption n-table-align-right">20.3.2021</td>
<td>
<div class="n-table-actions">
<nord-dropdown position="block-end" align="end" size="s">
<nord-button slot="toggle" aria-describedby="edit" size="s">
<nord-icon name="interface-menu-small" label="Open menu"></nord-icon>
</nord-button>
<nord-dropdown-group>
<nord-dropdown-item href="#">View payment details</nord-dropdown-item>
<nord-dropdown-item>Open in new tab</nord-dropdown-item>
<nord-dropdown-item>Copy link</nord-dropdown-item>
</nord-dropdown-group>
<nord-dropdown-group>
<nord-dropdown-item data-action="refund">Refund payment</nord-dropdown-item>
<nord-dropdown-item data-action="delete">
<span>Delete</span>
<nord-icon slot="end" name="interface-delete"></nord-icon>
</nord-dropdown-item>
</nord-dropdown-group>
</nord-dropdown>
</div>
</td>
</tr>
<tr>
<td class="n-table-align-right">29,90 €</td>
<td class="current-status"><nord-badge>Neutral</nord-badge></td>
<td class="n-table-ellipsis">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor massa
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi. Aenean vulputate eleifend tellus.
</td>
<td class="n-caption">Card</td>
<td class="n-caption n-table-align-right">20.3.2021</td>
<td>
<div class="n-table-actions">
<nord-dropdown position="block-end" align="end" size="s">
<nord-button slot="toggle" aria-describedby="edit" size="s">
<nord-icon name="interface-menu-small" label="Open menu"></nord-icon>
</nord-button>
<nord-dropdown-group>
<nord-dropdown-item href="#">View payment details</nord-dropdown-item>
<nord-dropdown-item>Open in new tab</nord-dropdown-item>
<nord-dropdown-item>Copy link</nord-dropdown-item>
</nord-dropdown-group>
<nord-dropdown-group>
<nord-dropdown-item data-action="refund">Refund payment</nord-dropdown-item>
<nord-dropdown-item data-action="delete">
<span>Delete</span>
<nord-icon slot="end" name="interface-delete"></nord-icon>
</nord-dropdown-item>
</nord-dropdown-group>
</nord-dropdown>
</div>
</td>
</tr>
<tr>
<td class="n-table-align-right">50,00 €</td>
<td class="current-status"><nord-badge variant="info">Info</nord-badge></td>
<td class="n-table-ellipsis">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor massa
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi. Aenean vulputate eleifend tellus.
</td>
<td class="n-caption">Card</td>
<td class="n-caption n-table-align-right">19.3.2021</td>
<td>
<div class="n-table-actions">
<nord-dropdown position="block-end" align="end" size="s">
<nord-button slot="toggle" aria-describedby="edit" size="s">
<nord-icon name="interface-menu-small" label="Open menu"></nord-icon>
</nord-button>
<nord-dropdown-group>
<nord-dropdown-item href="#">View payment details</nord-dropdown-item>
<nord-dropdown-item>Open in new tab</nord-dropdown-item>
<nord-dropdown-item>Copy link</nord-dropdown-item>
</nord-dropdown-group>
<nord-dropdown-group>
<nord-dropdown-item data-action="refund">Refund payment</nord-dropdown-item>
<nord-dropdown-item data-action="delete">
<span>Delete</span>
<nord-icon slot="end" name="interface-delete"></nord-icon>
</nord-dropdown-item>
</nord-dropdown-group>
</nord-dropdown>
</div>
</td>
</tr>
<tr>
<td class="n-table-align-right">49,00 €</td>
<td class="current-status"><nord-badge variant="info">Info</nord-badge></td>
<td class="n-table-ellipsis">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor massa
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi. Aenean vulputate eleifend tellus.
</td>
<td class="n-caption">Card</td>
<td class="n-caption n-table-align-right">17.3.2021</td>
<td>
<div class="n-table-actions">
<nord-dropdown position="block-end" align="end" size="s">
<nord-button slot="toggle" aria-describedby="edit" size="s">
<nord-icon name="interface-menu-small" label="Open menu"></nord-icon>
</nord-button>
<nord-dropdown-group>
<nord-dropdown-item href="#">View payment details</nord-dropdown-item>
<nord-dropdown-item>Open in new tab</nord-dropdown-item>
<nord-dropdown-item>Copy link</nord-dropdown-item>
</nord-dropdown-group>
<nord-dropdown-group>
<nord-dropdown-item data-action="refund">Refund payment</nord-dropdown-item>
<nord-dropdown-item data-action="delete">
<span>Delete</span>
<nord-icon slot="end" name="interface-delete"></nord-icon>
</nord-dropdown-item>
</nord-dropdown-group>
</nord-dropdown>
</div>
</td>
</tr>
<tr>
<td class="n-table-align-right">1023,00 €</td>
<td class="current-status"><nord-badge variant="info">Info</nord-badge></td>
<td class="n-table-ellipsis">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor massa
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi. Aenean vulputate eleifend tellus.
</td>
<td class="n-caption">Card</td>
<td class="n-caption n-table-align-right">12.3.2021</td>
<td>
<div class="n-table-actions">
<nord-dropdown position="block-end" align="end" size="s">
<nord-button slot="toggle" aria-describedby="edit" size="s">
<nord-icon name="interface-menu-small" label="Open menu"></nord-icon>
</nord-button>
<nord-dropdown-group>
<nord-dropdown-item href="#">View payment details</nord-dropdown-item>
<nord-dropdown-item>Open in new tab</nord-dropdown-item>
<nord-dropdown-item>Copy link</nord-dropdown-item>
</nord-dropdown-group>
<nord-dropdown-group>
<nord-dropdown-item data-action="refund">Refund payment</nord-dropdown-item>
<nord-dropdown-item data-action="delete">
<span>Delete</span>
<nord-icon slot="end" name="interface-delete"></nord-icon>
</nord-dropdown-item>
</nord-dropdown-group>
</nord-dropdown>
</div>
</td>
</tr>
<tr>
<td class="n-table-align-right">32,00 €</td>
<td class="current-status"><nord-badge variant="highlight">Highlight</nord-badge></td>
<td class="n-table-ellipsis">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor massa
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi. Aenean vulputate eleifend tellus.
</td>
<td class="n-caption">Card</td>
<td class="n-caption n-table-align-right">10.3.2021</td>