index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="components/demo/styles.css" type="text/css">
	<script type="module">
		import './components/colors/colors.js';
		import './components/typography/typography.js';
		import './index.js';
	</script>
	<title>core-ui</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8">
	<style>
		body {
			padding: 0 30px;
		}
	</style>
</head>
<body class="d2l-typography">

	<h1 class="d2l-heading-2">Demos</h1>
	<d2l-build-info></d2l-build-info>

	<h2 class="d2l-heading-3">Components</h2>
	<ul>
		<li>
			Alerts
			<ul>
				<li><a href="components/alert/demo/alert.html">d2l-alert</a></li>
				<li><a href="components/alert/demo/alert-toast.html">d2l-alert-toast</a></li>
			</ul>
		</li>
		<li><a href="components/backdrop/demo/backdrop.html">d2l-backdrop</a></li>
		<li><a href="components/breadcrumbs/demo/breadcrumbs.html">d2l-breadcrumbs</a></li>
		<li>
			Buttons
			<ul>
				<li><a href="components/button/demo/button.html">d2l-button</a></li>
				<li><a href="components/button/demo/button-add.html">d2l-button-add</a></li>
				<li><a href="components/button/demo/button-icon.html">d2l-button-icon</a></li>
				<li><a href="components/button/demo/button-subtle.html">d2l-button-subtle</a></li>
				<li><a href="components/button/demo/button-toggle.html">d2l-button-toggle</a></li>
				<li><a href="components/button/demo/floating-buttons.html">d2l-floating-buttons</a></li>
				<li><a href="components/button/demo/floating-buttons-in-tabs.html">d2l-floating-buttons in tabs</a></li>
				<li><a href="components/button/demo/floating-buttons-in-frame.html">d2l-floating-buttons in frame</a></li>
			</ul>
		</li>
		<li><a href="components/calendar/demo/calendar.html">d2l-calendar</a></li>
		<li><a href="components/card/demo/card.html">d2l-card</a></li>
		<li>
			Count Badges
			<ul>
				<li><a href="components/count-badge/demo/count-badge.html">d2l-count-badge</a></li>
				<li><a href="components/count-badge/demo/count-badge-icon.html">d2l-count-badge-icon</a></li>
			</ul>
		</li>
		<li><a href="components/collapsible-panel/demo/collapsible-panel.html">d2l-collapsible-panel</a></li>
		<li><a href="components/colors/demo/colors.html">d2l-colors</a></li>
		<li><a href="components/demo/demo/demo-snippet.html">d2l-demo-snippet</a></li>
		<li><a href="components/description-list/demo/description-list.html">d2l-description-list</a></li>
		<li>
			Dialogs
			<ul>
				<li><a href="components/dialog/demo/dialog.html">d2l-dialog</a></li>
				<li><a href="components/dialog/demo/dialog-nested.html">d2l-dialog (Nested)</a></li>
				<li><a href="components/dialog/demo/dialog-confirm.html">d2l-dialog-confirm</a></li>
				<li><a href="components/dialog/demo/dialog-fullscreen.html">d2l-dialog-fullscreen</a></li>
			</ul>
		</li>
		<li>
			Dropdowns
			<ul>
				<li><a href="components/dropdown/demo/dropdown.html">d2l-dropdown</a></li>
				<li><a href="components/dropdown/demo/dropdown-button.html">d2l-dropdown-button</a></li>
				<li><a href="components/dropdown/demo/dropdown-context-menu.html">d2l-dropdown-context-menu</a></li>
				<li><a href="components/dropdown/demo/dropdown-menu.html">d2l-dropdown-menu</a></li>
				<li><a href="components/dropdown/demo/dropdown-more.html">d2l-dropdown-more</a></li>
				<li><a href="components/dropdown/demo/dropdown-tabs.html">d2l-dropdown-tabs</a></li>
			</ul>
		</li>
		<li><a href="components/empty-state/demo/empty-state.html">d2l-empty-state</a></li>
		<li><a href="components/expand-collapse/demo/expand-collapse-content.html">d2l-expand-collapse-content</a></li>
		<li>
			Filters
			<ul>
				<li><a href="components/filter/demo/filter.html">d2l-filter</a></li>
				<li><a href="components/filter/demo/filter-overflow-group.html">d2l-filter-overflow-group</a></li>
				<li><a href="components/filter/demo/filter-tags.html">d2l-filter-tags</a></li>
			</ul>
		</li>
		<li><a href="components/focus-trap/demo/focus-trap.html">d2l-focus-trap</a></li>
		<li>
			Forms
			<ul>
				<li><a href="components/form/demo/form.html">d2l-form</a></li>
				<li><a href="components/form/demo/form-native.html">d2l-form-native</a></li>
			</ul>
		</li>
		<li><a href="components/hierarchical-view/demo/hierarchical-view.html">d2l-hierarchical-view</a></li>
		<li>
			HtmlBlock
			<ul>
				<li><a href="components/html-block/demo/html-block.html?latex=false">d2l-html-block</a></li>
				<li><a href="components/html-block/demo/html-block.html">d2l-html-block (with LaTeX rendering)</a></li>
				<li><a href="components/html-block/demo/html-block-code.html">d2l-html-block (code samples)</a></li>
			</ul>
		</li>
		<li><a href="components/icons/demo/icon.html">d2l-icon</a></li>
		<li>
			Inputs
			<ul>
				<li><a href="components/inputs/demo/input-checkbox.html">d2l-input-checkbox</a></li>
				<li><a href="components/inputs/demo/input-color.html">d2l-input-color</a></li>
				<li><a href="components/inputs/demo/input-date.html">d2l-input-date</a></li>
				<li><a href="components/inputs/demo/input-date-range.html">d2l-input-date-range</a></li>
				<li><a href="components/inputs/demo/input-date-time.html">d2l-input-date-time</a></li>
				<li><a href="components/inputs/demo/input-date-time-range.html">d2l-input-date-time-range</a></li>
				<li><a href="components/inputs/demo/input-number.html">d2l-input-number</li>
				<li><a href="components/inputs/demo/input-percent.html">d2l-input-percent</li>
				<li><a href="components/inputs/demo/input-radio.html">d2l-input-radio</a></li>
				<li><a href="components/inputs/demo/input-search.html">d2l-input-search</a></li>
				<li><a href="components/inputs/demo/input-select.html">d2l-input-select</a></li>
				<li><a href="components/inputs/demo/input-text.html">d2l-input-text</a></li>
				<li><a href="components/inputs/demo/input-textarea.html">d2l-input-textarea</a></li>
				<li><a href="components/inputs/demo/input-time.html">d2l-input-time</a></li>
				<li><a href="components/inputs/demo/input-time-range.html">d2l-input-time-range</a></li>
			</ul>
		</li>
		<li><a href="components/link/demo/link.html">d2l-link</a></li>
		<li>
			List
			<ul>
				<li><a href="components/list/demo/list.html">d2l-list</a></li>
				<li><a href="components/list/demo/list-color.html">d2l-list (color)</a></li>
				<li><a href="components/list/demo/list-drag-and-drop.html">d2l-list (drag & drop)</a></li>
				<li><a href="components/list/demo/list-nested.html">d2l-list (nested)</a></li>
				<li><a href="components/list/demo/list-expand-collapse.html">d2l-list (expand-collapse)</a></li>
				<li><a href="components/list/demo/list-item-actions.html">d2l-list-item (actions)</a></li>
				<li><a href="components/list/demo/list-item-layouts.html">d2l-list-item (layouts)</a></li>
				<li><a href="components/list/demo/list-item-scroll.html">d2l-list-item (scrolling)</a></li>
			</ul>
		</li>
		<li><a href="components/loading-spinner/demo/loading-spinner.html">d2l-loading-spinner</a></li>
		<li>
			Menus
			<ul>
				<li><a href="components/menu/demo/menu.html">d2l-menu</a></li>
				<li><a href="components/menu/demo/checkbox-menu.html">d2l-menu (checkbox)</a></li>
				<li><a href="components/menu/demo/radio-menu.html">d2l-menu (radio)</a></li>
			</ul>
		</li>
		<li><a href="components/meter/demo/meter.html">d2l-meter</a></li>
		<li><a href="components/more-less/demo/more-less.html">d2l-more-less</a></li>
		<li><a href="components/object-property-list/demo/object-property-list.html">d2l-object-property-list</a></li>
		<li><a href="components/offscreen/demo/offscreen.html">d2l-offscreen</a></li>
		<li><a href="components/overflow-group/demo/overflow-group.html">d2l-overflow-group</a></li>
		<li><a href="components/paging/demo/pager-load-more.html">d2l-pager-load-more</a></li>
		<li><a href="components/selection/demo/selection.html">d2l-selection</a></li>
		<li><a href="components/scroll-wrapper/demo/scroll-wrapper.html">d2l-scroll-wrapper</a></li>
		<li><a href="components/status-indicator/demo/status-indicator.html">d2l-status-indicator</a></li>
		<li><a href="components/switch/demo/switch.html">d2l-switch</a></li>
		<li><a href="components/table/demo/table.html">d2l-table</a></li>
		<li><a href="components/tabs/demo/tabs.html">d2l-tabs</a></li>
		<li><a href="components/tag-list/demo/tag-list.html">d2l-tag-list</a></li>
		<li><a href="components/tooltip/demo/tooltip.html">d2l-tooltip</a></li>
		<li><a href="components/typography/demo/typography.html">d2l-typography</a></li>
	</ul>

	<h2 class="d2l-heading-3">Directives</h2>
	<ul>
		<li><a href="directives/animate/demo/">animate</a></li>
	</ul>

	<h2 class="d2l-heading-3">Helpers</h2>
	<ul>
		<li><a href="helpers/demo/announce.html">announce</a></li>
		<li><a href="helpers/demo/dismissible.html">dismissible</a></li>
		<li><a href="helpers/demo/gestures.html">gestures</a></li>
		<li><a href="helpers/demo/prism.html">prism</a></li>
	</ul>

	<h2 class="d2l-heading-3">Mixins</h2>
	<ul>
		<li><a href="mixins/arrow-keys/demo/arrow-keys-mixin.html">arrow-keys-mixin</a></li>
		<li><a href="mixins/async-container/demo/async-container.html">async-container-mixin</a></li>
		<li><a href="mixins/labelled/demo/labelled-mixin.html">labelled-mixin</a></li>
		<li><a href="mixins/localize/demo/localize-mixin.html">localize-mixin</a></li>
		<li><a href="components/skeleton/demo/skeleton-mixin.html">skeleton-mixin</a></li>
	</ul>

	<h2 class="d2l-heading-3">Templates</h2>
	<ul>
		<li><a href="templates/primary-secondary/demo/index.html">Primary Secondary Template (fullscreen width)</a></li>
		<li><a href="templates/primary-secondary/demo/width-type-normal.html">Primary Secondary Template (normal width)</a></li>
		<li><a href="templates/primary-secondary/demo/overflow-hidden.html">Primary Secondary Template (hidden primary overflow)</a></li>
		<li><a href="templates/primary-secondary/demo/integration.html">Primary Secondary Template (integration with other components)</a></li>
	</ul>

</body>
</html>