-
-
Notifications
You must be signed in to change notification settings - Fork 21
Expand file tree
/
Copy pathindex.html
More file actions
1 lines (1 loc) · 28.2 KB
/
index.html
File metadata and controls
1 lines (1 loc) · 28.2 KB
1
<!doctype html><html lang="en" theme="dark"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><title>Component Playground</title><link rel="stylesheet" href="kor-styles.css"/><script src="index.js"></script></head><body><kor-page><kor-app-bar slot="top" logo="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" label="MyApp"><kor-tabs><kor-tab-item label="Active" active></kor-tab-item><kor-tab-item label="Idle"></kor-tab-item><kor-tab-item label="Disabled" disabled="disabled"></kor-tab-item></kor-tabs><kor-icon slot="functions" button icon="brightness_3" onclick="document.documentElement.setAttribute('theme', 'dark')"></kor-icon><kor-icon slot="functions" button icon="brightness_7" onclick="document.documentElement.setAttribute('theme', 'light')"></kor-icon><kor-icon slot="left" button icon="brightness_3" onclick="document.documentElement.setAttribute('theme', 'dark')"></kor-icon><kor-icon slot="right" button icon="brightness_7" onclick="document.documentElement.setAttribute('theme', 'light')"></kor-icon><kor-avatar slot="functions" label="First Middle Last" info="Information text" image="https://i1.wp.com/www.docker.com/blog/wp-content/uploads/2019/10/Renee-M.jpg?fit=753%2C1024&ssl=1"></kor-avatar></kor-app-bar><kor-nav-bar slot="top"><kor-tabs><kor-tab-item label="Active" active></kor-tab-item><kor-tab-item label="Idle"></kor-tab-item><kor-tab-item label="Disabled" disabled="disabled"></kor-tab-item></kor-tabs><kor-icon slot="functions" button icon="save"></kor-icon></kor-nav-bar><kor-pane slot="left" label="Left Pane"><kor-accordion label="Accordion"><kor-icon icon="save" button slot="functions"></kor-icon><kor-icon icon="save" button slot="functions"></kor-icon><kor-input></kor-input><kor-input></kor-input><kor-button label="Label" slot="footer"></kor-button><kor-button label="Label" slot="footer"></kor-button></kor-accordion><kor-accordion label="Textarea"><kor-textarea label="Autofocus" autofocus></kor-textarea><kor-textarea label="Empty"></kor-textarea><kor-textarea label="Pre-filled" value="Lorem ipsum dolor sit amet"></kor-textarea><kor-textarea label="2 Rows" rows="2" value="Lorem ipsum dolor sit amet"></kor-textarea><kor-textarea label="4 Rows Readonly" rows="4" readonly="readonly" value="Lorem ipsum dolor sit amet"></kor-textarea><kor-textarea label="4 Rows Disabled" rows="4" disabled="disabled" value="Lorem ipsum dolor sit amet"></kor-textarea></kor-accordion><kor-accordion label="Image"><kor-image src="https://cdn.mos.cms.futurecdn.net/5PMe5hr8tjSS9Nq5d6Cebe.jpg" legend="Inner top legend" legend-position="inner-top"><kor-icon icon="save" slot="top"></kor-icon><kor-icon icon="save" slot="bottom"></kor-icon><kor-icon icon="save" slot="top"></kor-icon><kor-icon icon="save" slot="bottom"></kor-icon></kor-image><kor-image src="https://cdn.mos.cms.futurecdn.net/5PMe5hr8tjSS9Nq5d6Cebe.jpg" legend="Inner bottom legend" legend-position="inner-bottom"><kor-icon icon="save" slot="top"></kor-icon><kor-icon icon="save" slot="bottom"></kor-icon><kor-icon icon="save" slot="top"></kor-icon><kor-icon icon="save" slot="bottom"></kor-icon></kor-image><kor-image src="https://cdn.mos.cms.futurecdn.net/5PMe5hr8tjSS9Nq5d6Cebe.jpg" legend="Bottom legend"><kor-icon icon="save" slot="top"></kor-icon><kor-icon icon="save" slot="bottom"></kor-icon></kor-image><kor-image src="https://cdn.mos.cms.futurecdn.net/5PMe5hr8tjSS9Nq5d6Cebe.jpg" width="160" height="320" fit="cover"><kor-icon icon="save" slot="top"></kor-icon><kor-icon icon="save" slot="bottom"></kor-icon><kor-icon icon="save" slot="top"></kor-icon><kor-icon icon="save" slot="bottom"></kor-icon><kor-icon icon="save" slot="top"></kor-icon><kor-icon icon="save" slot="bottom"></kor-icon><kor-icon icon="save" slot="top"></kor-icon><kor-icon icon="save" slot="bottom"></kor-icon><kor-icon icon="save" slot="top"></kor-icon><kor-icon icon="save" slot="bottom"></kor-icon><kor-icon icon="save" slot="top"></kor-icon><kor-icon icon="save" slot="bottom"></kor-icon><kor-icon icon="save" slot="top"></kor-icon><kor-icon icon="save" slot="bottom"></kor-icon><kor-icon icon="save" slot="top"></kor-icon><kor-icon icon="save" slot="bottom"></kor-icon></kor-image></kor-accordion><kor-accordion label="Slider"><kor-slider></kor-slider><kor-slider label="Label" value="50"></kor-slider><kor-slider label="Label" min="0" max="200" step="10" value="150"></kor-slider><kor-slider label="Label" min="0" max="200" step="10" value="150" input></kor-slider></kor-accordion><kor-accordion label="Switch"><kor-switch><kor-switch-item label="First" disabled="disabled"></kor-switch-item><kor-switch-item label="Second"></kor-switch-item><kor-switch-item label="Active" active></kor-switch-item></kor-switch><kor-switch><kor-switch-item icon="train" disabled="disabled"></kor-switch-item><kor-switch-item icon="directions_car"></kor-switch-item><kor-switch-item icon="directions_bike" active></kor-switch-item></kor-switch></kor-accordion><kor-accordion label="Stepper"><kor-stepper><kor-stepper-item label="First" disabled="disabled"></kor-stepper-item><kor-stepper-item label="Second"></kor-stepper-item><kor-stepper-item label="Active" active></kor-stepper-item></kor-stepper><kor-stepper><kor-stepper-item label="Second" info="Information text"></kor-stepper-item><kor-stepper-item label="Active" info="Information text" active></kor-stepper-item></kor-stepper><kor-stepper><kor-stepper-item label="First" icon="train" disabled="disabled"></kor-stepper-item><kor-stepper-item label="Second" icon="directions_car"></kor-stepper-item><kor-stepper-item label="Active" icon="directions_bike" active></kor-stepper-item></kor-stepper><kor-stepper orientation="vertical"><kor-stepper-item label="First" disabled="disabled"></kor-stepper-item><kor-stepper-item label="Second"></kor-stepper-item><kor-stepper-item label="Active" active></kor-stepper-item></kor-stepper><kor-stepper orientation="vertical"><kor-stepper-item label="First" info="Information text" disabled="disabled"></kor-stepper-item><kor-stepper-item label="Second" info="Information text"></kor-stepper-item><kor-stepper-item label="Active" info="Information text" active></kor-stepper-item></kor-stepper><kor-stepper orientation="vertical"><kor-stepper-item label="First" icon="train" disabled="disabled"></kor-stepper-item><kor-stepper-item label="Second" icon="directions_car"></kor-stepper-item><kor-stepper-item label="Active" icon="directions_bike" active></kor-stepper-item></kor-stepper></kor-accordion><kor-accordion label="Breadcrumbs"><kor-breadcrumbs><kor-breadcrumb-item label="First"></kor-breadcrumb-item><kor-breadcrumb-item label="Second"></kor-breadcrumb-item><kor-breadcrumb-item label="Active" active></kor-breadcrumb-item></kor-breadcrumbs></kor-accordion><kor-accordion label="Avatar"><kor-avatar></kor-avatar><kor-avatar label="First Last"></kor-avatar><kor-avatar label="First Middle Last" info="Information text" image="https://i1.wp.com/www.docker.com/blog/wp-content/uploads/2019/10/Renee-M.jpg?fit=753%2C1024&ssl=1"></kor-avatar></kor-accordion><kor-accordion label="Input"><kor-input condensed label="Text condensed empty"></kor-input><kor-input label="Text filled" value="Hi"></kor-input><kor-input label="Text icon" icon="text_format"></kor-input><kor-input label="Text icon"><kor-icon button icon="text_format" slot="functions"></kor-icon></kor-input><kor-input label="Search" value="Hi" type="search"></kor-input><kor-input condensed label="Number condensed empty" type="number"></kor-input><kor-input label="Number empty (min 50, max 100, step 10)" type="number" min="50" max="100" step="10"></kor-input><kor-input label="Number filled" type="number" value="150"></kor-input><br/><kor-input type="date"></kor-input><kor-input type="select" label="Select"><kor-menu-item label="Option 1"></kor-menu-item><kor-menu-item label="Option 2"></kor-menu-item><kor-menu-item label="Option 3" active></kor-menu-item><kor-menu-item label="Option 4"></kor-menu-item><kor-menu-item label="Option 5"></kor-menu-item><kor-menu-item label="Option 6"></kor-menu-item><kor-menu-item label="Option 7"></kor-menu-item><kor-menu-item label="Option 8"></kor-menu-item><kor-menu-item label="Option 9"></kor-menu-item><kor-menu-item label="Option 10"></kor-menu-item><kor-menu-item label="Option 11"></kor-menu-item></kor-input><kor-input label="Status error" status="error"></kor-input><kor-input label="Status success" status="success"></kor-input><kor-input label="Status warning" status="warning"></kor-input><br/><kor-input disabled="disabled" label="Disabled" status="error"></kor-input><kor-input readonly="readonly" label="Readonly" status="error"></kor-input></kor-accordion><kor-accordion label="Checkbox"><kor-checkbox></kor-checkbox><kor-checkbox label="With label"></kor-checkbox><kor-checkbox label="Active" active></kor-checkbox><kor-checkbox label="Disabled" disabled="disabled"></kor-checkbox><kor-checkbox label="Active Disabled" active disabled="disabled"></kor-checkbox></kor-accordion><kor-accordion label="Radio Button"><kor-radio-button></kor-radio-button><kor-radio-button label="With label"></kor-radio-button><kor-radio-button label="Active" active></kor-radio-button><kor-radio-button label="Disabled" disabled="disabled"></kor-radio-button><kor-radio-button label="Active Disabled" active disabled="disabled"></kor-radio-button></kor-accordion><kor-accordion label="Toggle"><kor-toggle></kor-toggle><kor-toggle label="With label"></kor-toggle><kor-toggle label="Active" active></kor-toggle><kor-toggle label="Disabled" disabled="disabled"></kor-toggle><kor-toggle label="Active Disabled" active disabled="disabled"></kor-toggle></kor-accordion><kor-accordion label="Button"><kor-button label="Primary"></kor-button><kor-button label="Secondary" color="secondary"></kor-button><kor-button label="Tertiary" color="tertiary"></kor-button><kor-button label="Primary" disabled="disabled"></kor-button><kor-button label="Secondary" color="secondary" disabled="disabled"></kor-button><kor-button label="Tertiary" color="tertiary" disabled="disabled"></kor-button><kor-button icon="save"></kor-button><kor-button icon="save" color="secondary"></kor-button><kor-button icon="save" color="tertiary"></kor-button><kor-button icon="save" disabled="disabled"></kor-button><kor-button icon="save" color="secondary" disabled="disabled"></kor-button><kor-button icon="save" color="tertiary" disabled="disabled"></kor-button></kor-accordion><kor-accordion label="Tool"><kor-tool label="Label ipsum amet"></kor-tool><kor-tool label="Label ipsum amet" toggle></kor-tool><kor-tool label="Label ipsum amet" active></kor-tool><kor-tool label="Label ipsum amet" disabled="disabled"></kor-tool><kor-tool label="Label ipsum amet" size="s"></kor-tool><kor-tool label="Label ipsum amet" size="s" toggle></kor-tool><kor-tool label="Label ipsum amet" size="s" active></kor-tool><kor-tool label="Label ipsum amet" size="s" disabled="disabled"></kor-tool><kor-tool icon="train"></kor-tool><kor-tool icon="train" toggle></kor-tool><kor-tool icon="train" active></kor-tool><kor-tool icon="train" disabled="disabled"></kor-tool><kor-tool icon="train" size="s"></kor-tool><kor-tool icon="train" size="s" toggle></kor-tool><kor-tool icon="train" size="s" active></kor-tool><kor-tool icon="train" size="s" disabled="disabled"></kor-tool><kor-tool label="Label ipsum amet" icon="train"></kor-tool><kor-tool label="Label ipsum amet" icon="train" toggle></kor-tool><kor-tool label="Label ipsum amet" icon="train" active></kor-tool><kor-tool label="Label ipsum amet" icon="train" disabled="disabled"></kor-tool><kor-tool label="Label ipsum amet" size="s" icon="train"></kor-tool><kor-tool label="Label ipsum amet" size="s" icon="train" toggle></kor-tool><kor-tool label="Label ipsum amet" size="s" icon="train" active></kor-tool><kor-tool label="Label ipsum amet" size="s" icon="train" disabled="disabled"></kor-tool></kor-accordion><kor-accordion label="Icon"><kor-icon icon="url('https://material.io/resources/icons/static/ic_icons_192px_light.svg')"></kor-icon><kor-icon icon="save"></kor-icon><kor-icon icon="save" button></kor-icon><kor-icon icon="save" disabled="disabled"></kor-icon><kor-icon icon="save" color="rgb(var(--accent-1))"></kor-icon><kor-icon icon="save" size="s"></kor-icon><kor-icon icon="save" size="l"></kor-icon><kor-icon icon="save" size="xl"></kor-icon></kor-accordion><kor-accordion label="Badge"><kor-badge></kor-badge><kor-badge label="1"></kor-badge><kor-badge label="13"></kor-badge><kor-badge label="130"></kor-badge><kor-badge label="1300"></kor-badge><kor-badge status="error"></kor-badge><kor-badge status="warning"></kor-badge><kor-badge status="success"></kor-badge></kor-accordion><kor-accordion label="Tag"><kor-tag label="With label"></kor-tag><kor-tag label="Button" button></kor-tag><kor-tag icon="train" label="With label, icon"></kor-tag><kor-tag icon="train" label="With label, icon" removable></kor-tag></kor-accordion><kor-accordion label="Progress Bar"><kor-progress-bar value="20"></kor-progress-bar><kor-progress-bar value="20" label="With label"></kor-progress-bar><kor-progress-bar value="20" label="Show progress" show-progress></kor-progress-bar><kor-progress-bar value="20" label="With info" info="Slow connection detected"></kor-progress-bar><kor-progress-bar value="20" label="With info, status" status="warning" info="Slow connection detected"></kor-progress-bar><kor-progress-bar value="20" label="Color" color="red"></kor-progress-bar><br/><kor-progress-bar radial value="20"></kor-progress-bar><kor-progress-bar radial value="20" label="With label"></kor-progress-bar><kor-progress-bar radial value="20" label="Show progress" show-progress></kor-progress-bar><kor-progress-bar radial value="20" label="With info" info="Slow connection detected"></kor-progress-bar><kor-progress-bar radial value="20" label="With info, status" status="warning" info="Slow connection detected"></kor-progress-bar><kor-progress-bar radial value="20" label="Color" color="red"></kor-progress-bar><kor-progress-bar radial value="20" label="Size s" size="s"></kor-progress-bar><kor-progress-bar radial value="20" label="Size l" size="l"></kor-progress-bar></kor-accordion><kor-accordion label="Spinner"><kor-spinner></kor-spinner><kor-spinner label="Size m, with label"></kor-spinner><kor-spinner size="s"></kor-spinner><kor-spinner size="s" label="Size s, with label"></kor-spinner></kor-accordion><kor-accordion label="Menu Item"><kor-menu-item label="Idle toggle='false'" toggle="false"></kor-menu-item><kor-menu-item label="With icon" icon="save"></kor-menu-item><kor-menu-item label="Icon slot"><kor-icon button icon="save" slot="functions"></kor-icon></kor-menu-item><kor-menu-item label="Active" active></kor-menu-item><kor-menu-item label="Disabled" disabled="disabled"></kor-menu-item></kor-accordion><kor-accordion label="Popover"><kor-icon button slot="footer" icon="keyboard_arrow_up" id="popover-tar-1"></kor-icon><kor-icon button slot="footer" icon="keyboard_arrow_down" id="popover-tar-2"></kor-icon><kor-icon button slot="footer" icon="keyboard_arrow_left" id="popover-tar-3"></kor-icon><kor-icon button slot="footer" icon="keyboard_arrow_right" id="popover-tar-4"></kor-icon><kor-popover target="#popover-tar-1" position="top" label="Top"></kor-popover><kor-popover target="#popover-tar-2"><kor-tabs slot="header"><kor-tab-item label="Tab 1" active></kor-tab-item><kor-tab-item label="Tab 2"></kor-tab-item></kor-tabs><kor-icon button icon="save" slot="footer"></kor-icon></kor-popover><kor-popover target="#popover-tar-3" position="left" label="Left"><kor-button label="Button" slot="footer"></kor-button></kor-popover><kor-popover target="#popover-tar-4" position="right" label="Right"><kor-icon button icon="save" slot="footer"></kor-icon><kor-icon button icon="save" slot="footer"></kor-icon></kor-popover></kor-accordion><kor-accordion label="Tooltip"><kor-icon button slot="footer" icon="keyboard_arrow_up" id="tooltip-tar-1"></kor-icon><kor-icon button slot="footer" icon="keyboard_arrow_down" id="tooltip-tar-2"></kor-icon><kor-icon button slot="footer" icon="keyboard_arrow_left" id="tooltip-tar-3"></kor-icon><kor-icon button slot="footer" icon="keyboard_arrow_right" id="tooltip-tar-4"></kor-icon><kor-tooltip target="#tooltip-tar-1" position="top" label="Top"></kor-tooltip><kor-tooltip target="#tooltip-tar-2"><kor-tabs slot="header"><kor-tab-item label="Tab 1" active></kor-tab-item><kor-tab-item label="Tab 2"></kor-tab-item></kor-tabs><kor-icon button icon="save" slot="footer"></kor-icon></kor-tooltip><kor-tooltip target="#tooltip-tar-3" position="left" label="Left"><kor-button label="Button" slot="footer"></kor-button></kor-tooltip><kor-tooltip target="#tooltip-tar-4" position="right" label="Right"><kor-icon button icon="save" slot="footer"></kor-icon><kor-icon button icon="save" slot="footer"></kor-icon></kor-tooltip></kor-accordion><kor-accordion label="Tabs"><kor-tabs><kor-tab-item label="Active" active></kor-tab-item><kor-tab-item label="Idle"></kor-tab-item><kor-tab-item label="Disabled" disabled="disabled"></kor-tab-item></kor-tabs><kor-tabs><kor-tab-item label="Active" icon="train" active></kor-tab-item><kor-tab-item label="Idle" icon="train"></kor-tab-item><kor-tab-item label="Disabled" icon="train" disabled="disabled"></kor-tab-item></kor-tabs><kor-tabs><kor-tab-item icon="train" active></kor-tab-item><kor-tab-item icon="train"></kor-tab-item><kor-tab-item icon="train" disabled="disabled"></kor-tab-item></kor-tabs><kor-tabs orientation="vertical"><kor-tab-item label="Active" active></kor-tab-item><kor-tab-item label="Idle"></kor-tab-item><kor-tab-item label="Disabled" disabled="disabled"></kor-tab-item></kor-tabs><kor-tabs orientation="vertical"><kor-tab-item label="Active" icon="train" active></kor-tab-item><kor-tab-item label="Idle" icon="train"></kor-tab-item><kor-tab-item label="Disabled" icon="train" disabled="disabled"></kor-tab-item></kor-tabs><kor-tabs orientation="vertical"><kor-tab-item icon="train" active></kor-tab-item><kor-tab-item icon="train"></kor-tab-item><kor-tab-item icon="train" disabled="disabled"></kor-tab-item></kor-tabs></kor-accordion><kor-accordion label="Modal"><kor-button label="With label, icon" onclick="document.querySelector('#modal').visible = true"></kor-button><kor-button label="With slots, sticky, size" onclick="document.querySelector('#modal-2').visible = true"></kor-button><kor-modal label="My Modal" icon="email" id="modal"><kor-input></kor-input><kor-input></kor-input></kor-modal><kor-modal height="400px" width="400px" sticky id="modal-2"><kor-tabs slot="header"><kor-tab-item label="Active" active></kor-tab-item><kor-tab-item label="Idle"></kor-tab-item><kor-tab-item label="Disabled" disabled="disabled"></kor-tab-item></kor-tabs><kor-icon button icon="save" slot="functions"></kor-icon><kor-button slot="footer" label="Close Modal" onclick="event.target.parentElement.visible = false"></kor-button></kor-modal></kor-accordion><kor-accordion label="Notifications"><kor-button label="Top Left" onclick="document.querySelector('#notification-1').visible = true"></kor-button><kor-button label="Top Right" onclick="document.querySelector('#notification-2').visible = true"></kor-button><kor-button label="Bottom Left" onclick="document.querySelector('#notification-3').visible = true"></kor-button><kor-button label="Bottom Right" onclick="document.querySelector('#notification-4').visible = true"></kor-button></kor-accordion><kor-accordion label="Drawer"><kor-button label="Left with label, icon" onclick="document.querySelector('#drawer-left').visible = true"></kor-button><kor-button label="Right, with slots, sticky" onclick="document.querySelector('#drawer-right').visible = true"></kor-button><kor-button label="Top" onclick="document.querySelector('#drawer-top').visible = true"></kor-button><kor-button label="Bottom" onclick="document.querySelector('#drawer-bottom').visible = true"></kor-button><kor-drawer position="left" label="Left Drawer" icon="email" id="drawer-left"></kor-drawer><kor-drawer position="right" sticky id="drawer-right"><kor-tabs slot="header"><kor-tab-item label="Active" active></kor-tab-item><kor-tab-item label="Idle"></kor-tab-item><kor-tab-item label="Disabled" disabled="disabled"></kor-tab-item></kor-tabs><kor-icon button icon="save" slot="functions"></kor-icon><kor-button slot="footer" label="Close Drawer" onclick="event.target.parentElement.visible = false"></kor-button></kor-drawer><kor-drawer position="top" label="Top Drawer" id="drawer-top"></kor-drawer><kor-drawer position="bottom" label="Top Drawer" id="drawer-bottom"></kor-drawer></kor-accordion><kor-accordion label="Text"><kor-text>Body 1, Text 1</kor-text><kor-text size="body-1" color="var(--text-2)">Body 1, Text 2</kor-text><kor-text size="body-1" color="var(--text-3)">Body 1, Text 3</kor-text><kor-text size="body-2" color="var(--text-1)">Body 2, Text 1</kor-text><kor-text size="body-2" color="var(--text-2)">Body 2, Text 2</kor-text><kor-text size="body-2" color="var(--text-3)">Body 2, Text 3</kor-text><kor-text size="header-1" color="var(--text-1)">Header 1, Text 1</kor-text><kor-text size="header-1" color="var(--text-2)">Header 1, Text 2</kor-text><kor-text size="header-1" color="var(--text-3)">Header 1, Text 3</kor-text><kor-text size="header-2" color="var(--text-1)">Header 2, Text 1</kor-text><kor-text size="header-2" color="var(--text-2)">Header 2, Text 2</kor-text><kor-text size="header-2" color="var(--text-3)">Header 2, Text 3</kor-text></kor-accordion><kor-accordion label="Divider">Spacing s<kor-divider spacing="s"></kor-divider>Spacing m<kor-divider spacing="m"></kor-divider>Spacing l<kor-divider spacing="l"></kor-divider><div style="display: flex; height: 48px">S<kor-divider spacing="s" orientation="vertical"></kor-divider>M<kor-divider spacing="m" orientation="vertical"></kor-divider>L<kor-divider spacing="l" orientation="vertical"></kor-divider></div></kor-accordion><kor-accordion label="Empty State"><kor-empty-state style="height: 160px" label="With label"></kor-empty-state><kor-empty-state style="height: 160px" label="With label, icon" icon="train"></kor-empty-state><kor-empty-state style="height: 160px" label="With label, icon, footer" icon="train"><kor-button label="Button" slot="footer"></kor-button></kor-empty-state></kor-accordion></kor-pane><kor-pane slot="right" icon="train" label="With label, icon, slots"><kor-icon slot="functions" button icon="save"></kor-icon><kor-accordion label="Idle"></kor-accordion><kor-accordion label="Expanded, Icon" icon="message" expanded></kor-accordion><kor-accordion label="Disabled" disabled="disabled"></kor-accordion><kor-button label="Button" slot="footer"></kor-button></kor-pane><kor-grid rows="2"><kor-card label="With label, icon, slots" icon="extension" grid-cols="6"><kor-icon button slot="functions" icon="save"></kor-icon><kor-table columns="2fr 1fr 1fr"><kor-table-row slot="header"><kor-table-cell head sortable sorted sort-direction="desc">Sortable A</kor-table-cell><kor-table-cell head sortable>Sortable B</kor-table-cell><kor-table-cell head sortable>Sortable C</kor-table-cell></kor-table-row><kor-swipe-actions><kor-swipe-action slot="left" icon="delete" bg-color="rgb(var(--functional-red))"></kor-swipe-action><kor-table-row><kor-table-cell>Cell 1A</kor-table-cell><kor-table-cell>Cell 1B</kor-table-cell><kor-table-cell>Cell 1C</kor-table-cell></kor-table-row><kor-swipe-action slot="right" icon="reply" bg-color="rgb(var(--functional-green))"></kor-swipe-action></kor-swipe-actions><kor-swipe-actions><kor-swipe-action slot="left" icon="save"></kor-swipe-action><kor-table-row><kor-table-cell>Cell 1A</kor-table-cell><kor-table-cell>Cell 1B</kor-table-cell><kor-table-cell>Cell 1C</kor-table-cell></kor-table-row></kor-swipe-actions><kor-table-row><kor-table-cell>Cell 1A</kor-table-cell><kor-table-cell>Cell 1B</kor-table-cell><kor-table-cell>Cell 1C</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell>Cell 2A</kor-table-cell><kor-table-cell>Cell 2B</kor-table-cell><kor-table-cell>Cell 2C</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell>Cell 3A</kor-table-cell><kor-table-cell>Cell 3B</kor-table-cell><kor-table-cell>Cell 3C</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell>Cell 4A</kor-table-cell><kor-table-cell>Cell 4B</kor-table-cell><kor-table-cell>Cell 4C</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell>Cell 5A</kor-table-cell><kor-table-cell>Cell 5B</kor-table-cell><kor-table-cell>Cell 5C</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell>Cell 6A</kor-table-cell><kor-table-cell>Cell 6B</kor-table-cell><kor-table-cell>Cell 6C</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell>Cell 6A</kor-table-cell><kor-table-cell>Cell 6B</kor-table-cell><kor-table-cell>Cell 6C</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell>Cell 7A</kor-table-cell><kor-table-cell>Cell 7B</kor-table-cell><kor-table-cell>Cell 7C</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell>Cell 8A</kor-table-cell><kor-table-cell>Cell 8B</kor-table-cell><kor-table-cell>Cell 8C</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell>Cell 9A</kor-table-cell><kor-table-cell>Cell 9B</kor-table-cell><kor-table-cell>Cell 9C</kor-table-cell></kor-table-row></kor-table><kor-button label="Button" disabled="disabled" slot="footer"></kor-button></kor-card><kor-card grid-cols="6" grid-rows="2"><kor-table readonly="readonly" condensed><kor-table-row slot="header"><kor-table-cell head grid-cols="8">Head A</kor-table-cell><kor-table-cell head grid-cols="8" alignment="center">Head B</kor-table-cell><kor-table-cell head grid-cols="8" alignment="right">Head C</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell grid-cols="8">Cond. left</kor-table-cell><kor-table-cell grid-cols="8" alignment="center">Cond. center</kor-table-cell><kor-table-cell grid-cols="8" alignment="right">Cond. right</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell grid-cols="8">Cond. left</kor-table-cell><kor-table-cell grid-cols="8" alignment="center">Cond. center</kor-table-cell><kor-table-cell grid-cols="8" alignment="right">Cond. right</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell grid-cols="8">Cond. left</kor-table-cell><kor-table-cell grid-cols="8" alignment="center">Cond. center</kor-table-cell><kor-table-cell grid-cols="8" alignment="right">Cond. right</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell grid-cols="8">Cond. left</kor-table-cell><kor-table-cell grid-cols="8" alignment="center">Cond. center</kor-table-cell><kor-table-cell grid-cols="8" alignment="right">Cond. right</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell grid-cols="8">Cond. left</kor-table-cell><kor-table-cell grid-cols="8" alignment="center">Cond. center</kor-table-cell><kor-table-cell grid-cols="8" alignment="right">Cond. right</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell grid-cols="8">Cond. left</kor-table-cell><kor-table-cell grid-cols="8" alignment="center">Cond. center</kor-table-cell><kor-table-cell grid-cols="8" alignment="right">Cond. right</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell grid-cols="8">Cond. left</kor-table-cell><kor-table-cell grid-cols="8" alignment="center">Cond. center</kor-table-cell><kor-table-cell grid-cols="8" alignment="right">Cond. right</kor-table-cell></kor-table-row><kor-table-row><kor-table-cell grid-cols="8">Cond. left</kor-table-cell><kor-table-cell grid-cols="8" alignment="center">Cond. center</kor-table-cell><kor-table-cell grid-cols="8" alignment="right">Cond. right</kor-table-cell></kor-table-row></kor-table></kor-card><kor-card grid-cols="2"></kor-card><kor-card grid-cols="4" label="Image Card" icon="image" image="https://cdn.mos.cms.futurecdn.net/5PMe5hr8tjSS9Nq5d6Cebe.jpg"></kor-card></kor-grid><kor-notifications position="top-left"><kor-notification-item label="Top left with icon" icon="directions_car" id="notification-1"></kor-notification-item></kor-notifications><kor-notifications position="top-right"><kor-notification-item id="notification-2" label="Top right, sticky with slots" sticky><kor-icon button slot="functions" icon="save"></kor-icon>This is the notification with content.<kor-button label="Button" slot="footer" onclick="event.target.parentElement.visible = false"></kor-button></kor-notification-item></kor-notifications><kor-notifications position="bottom-left"><kor-notification-item label="Bottom left" id="notification-3"></kor-notification-item></kor-notifications><kor-notifications position="bottom-right"><kor-notification-item label="Bottom right" id="notification-4"></kor-notification-item></kor-notifications></kor-page></body></html>