packages/calcite-components/src/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Demos</title>
    <script src="demos/_assets/head.js"></script>
    <style>
      a {
        text-decoration: none;
      }
    </style>
  </head>

  <body>
    <!--
      **************************************************
      * NAVIGATION
      **************************************************
    -->
    <div class="navigation body-margin">
      <div>
        <h1 id="calcite-demo">Calcite demo</h1>
      </div>

      <div class="examples-github-storybook">
        <div>
          <calcite-button href="https://esri.github.io/calcite-ui-icons/#?" appearance="solid" kind="inverse"
            >Calcite UI Icons</calcite-button
          >
        </div>

        <div>
          <calcite-button href="https://github.com/Esri/calcite-design-system" appearance="solid" kind="inverse"
            >GitHub</calcite-button
          >
        </div>

        <div>
          <calcite-button
            href="https://esri.github.io/calcite-components/?path=/story/overview-home--page"
            appearance="solid"
            kind="inverse"
            >Storybook</calcite-button
          >
        </div>
      </div>
    </div>

    <!-- calcite components -->
    <div class="calcite-comp">Calcite Components</div>

    <!--
      **************************************************
      * CALCITE COMPONENTS
      **************************************************
    -->
    <div class="calcite-components">
      <div>
        <div>
          <a href="/demos/accordion.html">
            <calcite-action scale="s" text="Accordion" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/action.html">
            <calcite-action scale="s" text="Action" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/alert.html">
            <calcite-action scale="s" text="Alert" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/animation/animation.html">
            <calcite-action scale="s" text="Animation" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/avatar.html">
            <calcite-action scale="s" text="Avatar" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/block.html">
            <calcite-action scale="s" text="Block" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/button.html">
            <calcite-action scale="s" text="Button" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/card.html">
            <calcite-action scale="s" text="Card / Card Group" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/carousel.html">
            <calcite-action scale="s" text="Carousel" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/checkbox.html">
            <calcite-action scale="s" text="Checkbox" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/chip.html">
            <calcite-action scale="s" text="Chip" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/chip-group.html">
            <calcite-action scale="s" text="Chip Group" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>
        <div>
          <a href="/demos/color-picker.html">
            <calcite-action scale="s" text="Color-picker" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/combobox.html">
            <calcite-action scale="s" text="Combobox" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/date-picker.html">
            <calcite-action scale="s" text="Date-picker" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/dropdown.html">
            <calcite-action scale="s" text="Dropdown" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/fab.html">
            <calcite-action scale="s" text="Fab" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/flow.html">
            <calcite-action scale="s" text="Flow" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/form.html">
            <calcite-action scale="s" text="Form" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/validation.html">
            <calcite-action scale="s" text="Form Validation" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/graph.html">
            <calcite-action scale="s" text="Graph" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/handle/basic.html">
            <calcite-action scale="s" text="Handle" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/icon.html">
            <calcite-action scale="s" text="Icon" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/inline-editable.html">
            <calcite-action scale="s" text="Inline-editable" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/input.html">
            <calcite-action scale="s" text="Input" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/input-date-picker.html">
            <calcite-action scale="s" text="Input Date Picker" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>
      </div>

      <!-- second column -->
      <div>
        <div>
          <a href="/demos/input-number.html">
            <calcite-action scale="s" text="Input Number" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/input-text.html">
            <calcite-action scale="s" text="Input Text" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/input-time-picker.html">
            <calcite-action scale="s" text="Input Time Picker" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/input-time-zone.html">
            <calcite-action scale="s" text="Input Time Zone" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/label.html">
            <calcite-action scale="s" text="Label" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/link.html">
            <calcite-action scale="s" text="Link" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/list.html">
            <calcite-action scale="s" text="List" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/loader.html">
            <calcite-action scale="s" text="Loader" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/menu.html">
            <calcite-action scale="s" text="Menu / Menu Item" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/meter.html">
            <calcite-action scale="s" text="Meter" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/modal.html">
            <calcite-action scale="s" text="Modal" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/navigation.html">
            <calcite-action scale="s" text="Navigation" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/notice.html">
            <calcite-action scale="s" text="Notice" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/pagination.html">
            <calcite-action scale="s" text="Pagination" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/panel.html">
            <calcite-action scale="s" text="Panel" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/pick-list.html">
            <calcite-action scale="s" text="Pick-list" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/popover.html">
            <calcite-action scale="s" text="Popover" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/progress.html">
            <calcite-action scale="s" text="Progress" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/radio-button.html">
            <calcite-action scale="s" text="Radio-button" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/radio-button-group.html">
            <calcite-action scale="s" text="Radio Button Group" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/rating.html">
            <calcite-action scale="s" text="Rating" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/scrim.html">
            <calcite-action scale="s" text="Scrim" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/segmented-control.html">
            <calcite-action scale="s" text="Segmented Control" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>
      </div>

      <!-- third column -->
      <div>
        <div>
          <a href="/demos/select.html">
            <calcite-action scale="s" text="Select" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/shell/">
            <calcite-action scale="s" text="Shell" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/shell-panel.html">
            <calcite-action scale="s" text="Shell Panel" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/sheet.html">
            <calcite-action scale="s" text="Sheet" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/slider.html">
            <calcite-action scale="s" text="Slider" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/sortable-list.html">
            <calcite-action scale="s" text="Sortable-list" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/split-button.html">
            <calcite-action scale="s" text="Split-Button" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/stack.html">
            <calcite-action scale="s" text="Stack" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/stepper.html">
            <calcite-action scale="s" text="Stepper" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/switch.html">
            <calcite-action scale="s" text="Switch" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/table.html">
            <calcite-action scale="s" text="Table" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/text-area.html">
            <calcite-action scale="s" text="TextArea" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/tabs.html">
            <calcite-action scale="s" text="Tabs" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/theme/auto.html">
            <calcite-action scale="s" text="Theme" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/tile.html">
            <calcite-action scale="s" text="Tile" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/tile-group.html">
            <calcite-action scale="s" text="Tile Group" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/tile-select.html">
            <calcite-action scale="s" text="Tile-select" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/tip/basic.html">
            <calcite-action scale="s" text="Tip" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/tip-manager.html">
            <calcite-action scale="s" text="Tip Manager" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/tooltip.html">
            <calcite-action scale="s" text="Tooltip" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/tree.html">
            <calcite-action scale="s" text="Tree" alignment="start" text-enabled appearance="solid"> </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/tree-scales.html">
            <calcite-action scale="s" text="Tree Scales" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>

        <div>
          <a href="/demos/value-list.html">
            <calcite-action scale="s" text="Value-list" alignment="start" text-enabled appearance="solid">
            </calcite-action>
          </a>
        </div>
      </div>
    </div>
  </body>
</html>