From d4d486725ba27b24ceaad33e03b89225afab65f8 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 1 Feb 2024 16:08:23 -0800
Subject: [PATCH] removing tile-group in favor of #8687

---
 .../calcite-components/src/components.d.ts    |  39 -
 .../src/components/tile-group/interfaces.ts   |   1 -
 .../src/components/tile-group/readme.md       |  21 -
 .../src/components/tile-group/resources.ts    |   3 -
 .../components/tile-group/tile-group.e2e.ts   |  70 --
 .../src/components/tile-group/tile-group.scss |  36 -
 .../tile-group/tile-group.stories.ts          | 964 ------------------
 .../src/components/tile-group/tile-group.tsx  |  94 --
 .../src/demos/tile-group.html                 | 934 -----------------
 packages/calcite-components/src/index.html    |  19 +-
 10 files changed, 6 insertions(+), 2175 deletions(-)
 delete mode 100644 packages/calcite-components/src/components/tile-group/interfaces.ts
 delete mode 100644 packages/calcite-components/src/components/tile-group/readme.md
 delete mode 100644 packages/calcite-components/src/components/tile-group/resources.ts
 delete mode 100644 packages/calcite-components/src/components/tile-group/tile-group.e2e.ts
 delete mode 100644 packages/calcite-components/src/components/tile-group/tile-group.scss
 delete mode 100644 packages/calcite-components/src/components/tile-group/tile-group.stories.ts
 delete mode 100644 packages/calcite-components/src/components/tile-group/tile-group.tsx
 delete mode 100644 packages/calcite-components/src/demos/tile-group.html

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 5abd2807e06..273ff7865fd 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -84,7 +84,6 @@ import { TableMessages } from "./components/table/assets/table/t9n";
 import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
 import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
 import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
-import { TileGroupLayout } from "./components/tile-group/interfaces";
 import { TileSelectType } from "./components/tile-select/interfaces";
 import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
 import { TipMessages } from "./components/tip/assets/tip/t9n";
@@ -171,7 +170,6 @@ export { TableMessages } from "./components/table/assets/table/t9n";
 export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
 export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
 export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
-export { TileGroupLayout } from "./components/tile-group/interfaces";
 export { TileSelectType } from "./components/tile-select/interfaces";
 export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
 export { TipMessages } from "./components/tip/assets/tip/t9n";
@@ -4978,20 +4976,6 @@ export namespace Components {
          */
         "scale": Scale;
     }
-    interface CalciteTileGroup {
-        /**
-          * When `true`, interaction is prevented and the component is displayed with lower opacity.
-         */
-        "disabled": boolean;
-        /**
-          * Defines the layout of the component.  Use `"horizontal"` for rows, and `"vertical"` for a single column.
-         */
-        "layout": TileGroupLayout;
-        /**
-          * Specifies the size of the component.
-         */
-        "scale": Scale;
-    }
     interface CalciteTileSelect {
         /**
           * When `true`, the component is checked.
@@ -7147,12 +7131,6 @@ declare global {
         prototype: HTMLCalciteTileElement;
         new (): HTMLCalciteTileElement;
     };
-    interface HTMLCalciteTileGroupElement extends Components.CalciteTileGroup, HTMLStencilElement {
-    }
-    var HTMLCalciteTileGroupElement: {
-        prototype: HTMLCalciteTileGroupElement;
-        new (): HTMLCalciteTileGroupElement;
-    };
     interface HTMLCalciteTileSelectElementEventMap {
         "calciteTileSelectChange": void;
     }
@@ -7434,7 +7412,6 @@ declare global {
         "calcite-tabs": HTMLCalciteTabsElement;
         "calcite-text-area": HTMLCalciteTextAreaElement;
         "calcite-tile": HTMLCalciteTileElement;
-        "calcite-tile-group": HTMLCalciteTileGroupElement;
         "calcite-tile-select": HTMLCalciteTileSelectElement;
         "calcite-tile-select-group": HTMLCalciteTileSelectGroupElement;
         "calcite-time-picker": HTMLCalciteTimePickerElement;
@@ -12495,20 +12472,6 @@ declare namespace LocalJSX {
          */
         "scale"?: Scale;
     }
-    interface CalciteTileGroup {
-        /**
-          * When `true`, interaction is prevented and the component is displayed with lower opacity.
-         */
-        "disabled"?: boolean;
-        /**
-          * Defines the layout of the component.  Use `"horizontal"` for rows, and `"vertical"` for a single column.
-         */
-        "layout"?: TileGroupLayout;
-        /**
-          * Specifies the size of the component.
-         */
-        "scale"?: Scale;
-    }
     interface CalciteTileSelect {
         /**
           * When `true`, the component is checked.
@@ -13011,7 +12974,6 @@ declare namespace LocalJSX {
         "calcite-tabs": CalciteTabs;
         "calcite-text-area": CalciteTextArea;
         "calcite-tile": CalciteTile;
-        "calcite-tile-group": CalciteTileGroup;
         "calcite-tile-select": CalciteTileSelect;
         "calcite-tile-select-group": CalciteTileSelectGroup;
         "calcite-time-picker": CalciteTimePicker;
@@ -13136,7 +13098,6 @@ declare module "@stencil/core" {
             "calcite-tabs": LocalJSX.CalciteTabs & JSXBase.HTMLAttributes<HTMLCalciteTabsElement>;
             "calcite-text-area": LocalJSX.CalciteTextArea & JSXBase.HTMLAttributes<HTMLCalciteTextAreaElement>;
             "calcite-tile": LocalJSX.CalciteTile & JSXBase.HTMLAttributes<HTMLCalciteTileElement>;
-            "calcite-tile-group": LocalJSX.CalciteTileGroup & JSXBase.HTMLAttributes<HTMLCalciteTileGroupElement>;
             "calcite-tile-select": LocalJSX.CalciteTileSelect & JSXBase.HTMLAttributes<HTMLCalciteTileSelectElement>;
             "calcite-tile-select-group": LocalJSX.CalciteTileSelectGroup & JSXBase.HTMLAttributes<HTMLCalciteTileSelectGroupElement>;
             "calcite-time-picker": LocalJSX.CalciteTimePicker & JSXBase.HTMLAttributes<HTMLCalciteTimePickerElement>;
diff --git a/packages/calcite-components/src/components/tile-group/interfaces.ts b/packages/calcite-components/src/components/tile-group/interfaces.ts
deleted file mode 100644
index 16ac237b847..00000000000
--- a/packages/calcite-components/src/components/tile-group/interfaces.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type TileGroupLayout = "vertical" | "horizontal";
diff --git a/packages/calcite-components/src/components/tile-group/readme.md b/packages/calcite-components/src/components/tile-group/readme.md
deleted file mode 100644
index 904a43172c1..00000000000
--- a/packages/calcite-components/src/components/tile-group/readme.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# calcite-tile-group
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property   | Attribute  | Description                                                                                             | Type                         | Default        |
-| ---------- | ---------- | ------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- |
-| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity.                | `boolean`                    | `false`        |
-| `layout`   | `layout`   | Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. | `"horizontal" \| "vertical"` | `"horizontal"` |
-| `scale`    | `scale`    | Specifies the size of the component.                                                                    | `"l" \| "m" \| "s"`          | `"m"`          |
-
-## Slots
-
-| Slot | Description                                |
-| ---- | ------------------------------------------ |
-|      | A slot for adding `calcite-tile` elements. |
-
----
-
-*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/calcite-components/src/components/tile-group/resources.ts b/packages/calcite-components/src/components/tile-group/resources.ts
deleted file mode 100644
index 71551c3c9c1..00000000000
--- a/packages/calcite-components/src/components/tile-group/resources.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const CSS = {
-  tileGroup: "tile-group",
-};
diff --git a/packages/calcite-components/src/components/tile-group/tile-group.e2e.ts b/packages/calcite-components/src/components/tile-group/tile-group.e2e.ts
deleted file mode 100644
index 4f603aa0ad5..00000000000
--- a/packages/calcite-components/src/components/tile-group/tile-group.e2e.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, disabled, reflects, renders, hidden } from "../../tests/commonTests";
-import { html } from "../../../support/formatting";
-
-describe("calcite-tile-group", () => {
-  describe("renders", () => {
-    renders("calcite-tile-group", { display: "inline-block" });
-  });
-
-  describe("honors hidden attribute.", () => {
-    hidden("calcite-tile-group");
-  });
-
-  describe("accessible", () => {
-    accessible(`<calcite-tile-group></calcite-tile-group>`);
-  });
-
-  describe("defaults", () => {
-    defaults("calcite-tile-group", [
-      { propertyName: "layout", defaultValue: "horizontal" },
-      { propertyName: "scale", defaultValue: "m" },
-    ]);
-  });
-
-  describe("reflects", () => {
-    reflects("calcite-tile-group", [
-      { propertyName: "layout", value: "horizontal" },
-      { propertyName: "scale", value: "m" },
-    ]);
-  });
-
-  describe("disabled", () => {
-    disabled(
-      html`<calcite-tile-group>
-        <calcite-tile></calcite-tile>
-        <calcite-tile></calcite-tile>
-        <calcite-tile></calcite-tile>
-      </calcite-tile-group>`,
-      { focusTarget: "child" },
-    );
-  });
-
-  describe("prop passing", () => {
-    it("tiles receive parent scale prop on initial load and when scale attribute is mutated", async () => {
-      const page = await newE2EPage();
-      await page.setContent(html`
-        <calcite-tile-group scale="s">
-          <calcite-tile></calcite-tile>
-          <calcite-tile></calcite-tile>
-          <calcite-tile></calcite-tile>
-        </calcite-tile-group>
-      `);
-
-      let tiles = await page.findAll("calcite-tile");
-      tiles.forEach((tile) => {
-        expect(tile.getAttribute("scale")).toBe("s");
-      });
-
-      await page.$eval("calcite-tile-group", (element: HTMLCalciteTileGroupElement) =>
-        element.setAttribute("scale", "l"),
-      );
-      await page.waitForChanges();
-
-      tiles = await page.findAll("calcite-tile");
-      tiles.forEach((tile) => {
-        expect(tile.getAttribute("scale")).toBe("l");
-      });
-    });
-  });
-});
diff --git a/packages/calcite-components/src/components/tile-group/tile-group.scss b/packages/calcite-components/src/components/tile-group/tile-group.scss
deleted file mode 100644
index f655c60c763..00000000000
--- a/packages/calcite-components/src/components/tile-group/tile-group.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-:host {
-  box-sizing: border-box;
-  display: inline-block;
-
-  .tile-group {
-    display: grid;
-    grid-auto-rows: minmax(auto, 1fr);
-    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  }
-
-  ::slotted(calcite-tile) {
-    margin-block-end: 1px;
-    margin-inline-end: 1px;
-  }
-}
-
-:host([scale="s"]) {
-  .tile-group {
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-  }
-}
-:host([scale="l"]) {
-  .tile-group {
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  }
-}
-
-:host([layout="vertical"]) {
-  .tile-group {
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-@include disabled();
-@include base-component();
diff --git a/packages/calcite-components/src/components/tile-group/tile-group.stories.ts b/packages/calcite-components/src/components/tile-group/tile-group.stories.ts
deleted file mode 100644
index 8e53cae6083..00000000000
--- a/packages/calcite-components/src/components/tile-group/tile-group.stories.ts
+++ /dev/null
@@ -1,964 +0,0 @@
-import { select, boolean } from "@storybook/addon-knobs";
-import { html } from "../../../support/formatting";
-import readme from "./readme.md";
-import { storyFilters } from "../../../.storybook/helpers";
-
-export default {
-  title: "Components/Tiles/Tile Group",
-  parameters: {
-    notes: readme,
-    chromatic: { delay: 1000 },
-  },
-  ...storyFilters(),
-};
-
-export const playground = (): string => html`
-  <calcite-tile-group
-    dir="${select("dir", ["ltr", "rtl"], "ltr", "Tile Group")}"
-    ${boolean("disabled", false)}
-    layout="${select("layout", ["horizontal", "vertical"], "horizontal", "Tile Group")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-  >
-    <calcite-tile
-      heading="Tile heading lorem ipsum"
-      description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-      icon="layers"
-    ></calcite-tile>
-    <calcite-tile
-      heading="Tile heading lorem ipsum"
-      description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-      icon="layers"
-    ></calcite-tile>
-    <calcite-tile
-      heading="Tile heading lorem ipsum"
-      description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-      icon="layers"
-    ></calcite-tile>
-    <calcite-tile
-      heading="Tile heading lorem ipsum"
-      description="Iterative approaches to corporate strategy foster collab."
-      icon="layers"
-    ></calcite-tile>
-  </calcite-tile-group>
-`;
-
-export const allVariants_TestOnly = (): string => html`
-  <style>
-    .parent {
-      display: flex;
-      color: var(--calcite-color-text-3);
-      font-family: var(--calcite-sans-family);
-      font-size: var(--calcite-font-size-0);
-      font-weight: var(--calcite-font-weight-medium);
-    }
-
-    .child {
-      display: inline-flex;
-      flex-direction: column;
-      flex: 0 1 50%;
-      padding: 15px;
-    }
-
-    .right-aligned-text {
-      text-align: right;
-      flex: 0 0 21%;
-    }
-
-    hr {
-      margin: 25px 0;
-      border-top: 1px solid var(--calcite-color-border-2);
-    }
-  </style>
-  <!-- horizontal -->
-  <div class="parent">
-    <div class="child right-aligned-text"><h2>horizontal</h2></div>
-  </div>
-
-  <div class="parent">
-    <div class="child"></div>
-    <div class="child">small</div>
-    <div class="child">medium</div>
-    <div class="child">large</div>
-  </div>
-
-  <!-- icon, heading, description -->
-  <div class="parent">
-    <div class="child right-aligned-text">icon, heading, description</div>
-    <div class="child">
-      <calcite-tile-group scale="s">
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Iterative approaches to corporate strategy foster collab."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Iterative approaches to corporate strategy foster collab."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group scale="l">
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Iterative approaches to corporate strategy foster collab."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- icon, heading, description as link -->
-  <div class="parent">
-    <div class="child right-aligned-text">icon, heading, description as link</div>
-    <div class="child">
-      <calcite-tile-group scale="s">
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group scale="l">
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- icon, heading, description disabled -->
-  <div class="parent">
-    <div class="child right-aligned-text">icon, heading, description disabled</div>
-    <div class="child">
-      <calcite-tile-group scale="s" disabled>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group disabled>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group scale="l" disabled>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- heading only -->
-  <div class="parent">
-    <div class="child right-aligned-text">heading only</div>
-    <div class="child">
-      <calcite-tile-group scale="s">
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group>
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group scale="l">
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- heading only as link -->
-  <div class="parent">
-    <div class="child right-aligned-text">heading only as link</div>
-    <div class="child">
-      <calcite-tile-group scale="s">
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group scale="l">
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- description only -->
-  <div class="parent">
-    <div class="child right-aligned-text">description only</div>
-    <div class="child">
-      <calcite-tile-group scale="s">
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group>
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group scale="l">
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- description only as link -->
-  <div class="parent">
-    <div class="child right-aligned-text">description only as link</div>
-    <div class="child">
-      <calcite-tile-group scale="s">
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group scale="l">
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- heading and description -->
-  <div class="parent">
-    <div class="child right-aligned-text">heading and description</div>
-    <div class="child">
-      <calcite-tile-group scale="s">
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group scale="l">
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- heading and description as link -->
-  <div class="parent">
-    <div class="child right-aligned-text">heading and description as link</div>
-    <div class="child">
-      <calcite-tile-group scale="s">
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group scale="l">
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- icon and heading (large visual) -->
-  <div class="parent">
-    <div class="child right-aligned-text">icon and heading (large visual)</div>
-    <div class="child">
-      <calcite-tile-group scale="s">
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group scale="l">
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- icon and heading (large visual) as link -->
-  <div class="parent">
-    <div class="child right-aligned-text">icon and heading (large visual) as link</div>
-    <div class="child">
-      <calcite-tile-group scale="s">
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group scale="l">
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- A horizonal line-->
-  <hr />
-
-  <!-- Vertical -->
-  <div class="parent">
-    <div class="child right-aligned-text"><h2>vertical</h2></div>
-  </div>
-
-  <!-- heading only -->
-  <div class="parent">
-    <div class="child right-aligned-text">heading only</div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="s">
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical">
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="l">
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-        <calcite-tile heading="Tile title"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- heading only as link -->
-  <div class="parent">
-    <div class="child right-aligned-text">heading only as link</div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="s">
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical">
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="l">
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-        <calcite-tile href="/" heading="Tile title"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- description only -->
-  <div class="parent">
-    <div class="child right-aligned-text">description only</div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="s">
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical">
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="l">
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-        <calcite-tile description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- description only as link -->
-  <div class="parent">
-    <div class="child right-aligned-text">description only as link</div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="s">
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical">
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="l">
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-        <calcite-tile href="/" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- heading and description -->
-  <div class="parent">
-    <div class="child right-aligned-text">heading and description</div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="s">
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical">
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="l">
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- heading and description as link -->
-  <div class="parent">
-    <div class="child right-aligned-text">heading and description as link</div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="s">
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical">
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="l">
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-        <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- icon, heading, description -->
-  <div class="parent">
-    <div class="child right-aligned-text">icon, heading, description</div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="s">
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical">
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="l">
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- icon, heading, description as link -->
-  <div class="parent">
-    <div class="child right-aligned-text">icon, heading, description as link</div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="s">
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical">
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="l">
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-        <calcite-tile
-          heading="Tile heading lorem ipsum"
-          href="/"
-          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-          icon="layers"
-        ></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- icon and heading (large visual) -->
-  <div class="parent">
-    <div class="child right-aligned-text">icon and heading (large visual)</div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="s">
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical">
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="l">
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-
-  <!-- icon and heading (large visual) as link -->
-  <div class="parent">
-    <div class="child right-aligned-text">icon and heading (large visual) as link</div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="s">
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical">
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-    <div class="child">
-      <calcite-tile-group layout="vertical" scale="l">
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-        <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-      </calcite-tile-group>
-    </div>
-  </div>
-`;
diff --git a/packages/calcite-components/src/components/tile-group/tile-group.tsx b/packages/calcite-components/src/components/tile-group/tile-group.tsx
deleted file mode 100644
index 80d52d33f97..00000000000
--- a/packages/calcite-components/src/components/tile-group/tile-group.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Component, Element, h, Prop, VNode, Watch } from "@stencil/core";
-import {
-  connectInteractive,
-  disconnectInteractive,
-  InteractiveComponent,
-  InteractiveContainer,
-  updateHostInteraction,
-} from "../../utils/interactive";
-import { TileGroupLayout } from "./interfaces";
-import { Scale } from "../interfaces";
-import { CSS } from "./resources";
-
-/**
- * @slot - A slot for adding `calcite-tile` elements.
- */
-@Component({
-  tag: "calcite-tile-group",
-  styleUrl: "tile-group.scss",
-  shadow: true,
-})
-export class TileGroup implements InteractiveComponent {
-  //--------------------------------------------------------------------------
-  //
-  //  Properties
-  //
-  //--------------------------------------------------------------------------
-
-  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
-  @Prop({ reflect: true }) disabled = false;
-
-  /**
-   * Defines the layout of the component.
-   *
-   * Use `"horizontal"` for rows, and `"vertical"` for a single column.
-   */
-  @Prop({ reflect: true }) layout: TileGroupLayout = "horizontal";
-
-  /**
-   * Specifies the size of the component.
-   */
-  @Prop({ reflect: true }) scale: Scale = "m";
-
-  @Watch("scale")
-  scaleWatcher(): void {
-    this.updateTiles();
-  }
-
-  //--------------------------------------------------------------------------
-  //
-  //  Private Properties
-  //
-  //--------------------------------------------------------------------------
-
-  @Element() el: HTMLCalciteTileGroupElement;
-
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-
-  private updateTiles = (): void => {
-    this.el.querySelectorAll("calcite-tile").forEach((item) => (item.scale = this.scale));
-  };
-
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-
-  connectedCallback(): void {
-    connectInteractive(this);
-    this.updateTiles();
-  }
-
-  componentDidRender(): void {
-    updateHostInteraction(this);
-  }
-
-  disconnectedCallback(): void {
-    disconnectInteractive(this);
-  }
-
-  render(): VNode {
-    return (
-      <InteractiveContainer disabled={this.disabled}>
-        <div class={CSS.tileGroup}>
-          <slot onSlotchange={this.updateTiles} />
-        </div>
-      </InteractiveContainer>
-    );
-  }
-}
diff --git a/packages/calcite-components/src/demos/tile-group.html b/packages/calcite-components/src/demos/tile-group.html
deleted file mode 100644
index 145e632be28..00000000000
--- a/packages/calcite-components/src/demos/tile-group.html
+++ /dev/null
@@ -1,934 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Tile Group</title>
-    <style>
-      .parent {
-        display: flex;
-        color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
-        font-size: var(--calcite-font-size-0);
-        font-weight: var(--calcite-font-weight-medium);
-      }
-
-      .child {
-        display: inline-flex;
-        flex-direction: column;
-        flex: 0 1 50%;
-        padding: 15px;
-      }
-
-      .right-aligned-text {
-        text-align: right;
-        flex: 0 0 21%;
-      }
-
-      hr {
-        margin: 25px 0;
-        border-top: 1px solid var(--calcite-color-border-2);
-      }
-    </style>
-    <script src="./_assets/head.js"></script>
-    <script type="module" src="./_assets/demo-spacer.js"></script>
-  </head>
-
-  <body>
-    <demo-dom-swapper>
-      <!-- horizontal -->
-      <div class="parent">
-        <div class="child right-aligned-text"><h2>horizontal</h2></div>
-      </div>
-
-      <div class="parent">
-        <div class="child"></div>
-        <div class="child">small</div>
-        <div class="child">medium</div>
-        <div class="child">large</div>
-      </div>
-
-      <!-- icon, heading, description -->
-      <div class="parent">
-        <div class="child right-aligned-text">icon, heading, description</div>
-        <div class="child">
-          <calcite-tile-group scale="s">
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Iterative approaches to corporate strategy foster collab."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Iterative approaches to corporate strategy foster collab."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group scale="l">
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Iterative approaches to corporate strategy foster collab."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- icon, heading, description as link -->
-      <div class="parent">
-        <div class="child right-aligned-text">icon, heading, description as link</div>
-        <div class="child">
-          <calcite-tile-group scale="s">
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group scale="l">
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- icon, heading, description disabled -->
-      <div class="parent">
-        <div class="child right-aligned-text">icon, heading, description disabled</div>
-        <div class="child">
-          <calcite-tile-group scale="s" disabled>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group disabled>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group scale="l" disabled>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- heading only -->
-      <div class="parent">
-        <div class="child right-aligned-text">heading only</div>
-        <div class="child">
-          <calcite-tile-group scale="s">
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group>
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group scale="l">
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- heading only as link -->
-      <div class="parent">
-        <div class="child right-aligned-text">heading only as link</div>
-        <div class="child">
-          <calcite-tile-group scale="s">
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group scale="l">
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- description only -->
-      <div class="parent">
-        <div class="child right-aligned-text">description only</div>
-        <div class="child">
-          <calcite-tile-group scale="s">
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group>
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group scale="l">
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- description only as link -->
-      <div class="parent">
-        <div class="child right-aligned-text">description only as link</div>
-        <div class="child">
-          <calcite-tile-group scale="s">
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group scale="l">
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- heading and description -->
-      <div class="parent">
-        <div class="child right-aligned-text">heading and description</div>
-        <div class="child">
-          <calcite-tile-group scale="s">
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group scale="l">
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- heading and description as link -->
-      <div class="parent">
-        <div class="child right-aligned-text">heading and description as link</div>
-        <div class="child">
-          <calcite-tile-group scale="s">
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group scale="l">
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- icon and heading (large visual) -->
-      <div class="parent">
-        <div class="child right-aligned-text">icon and heading (large visual)</div>
-        <div class="child">
-          <calcite-tile-group scale="s">
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group scale="l">
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- icon and heading (large visual) as link -->
-      <div class="parent">
-        <div class="child right-aligned-text">icon and heading (large visual) as link</div>
-        <div class="child">
-          <calcite-tile-group scale="s">
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group scale="l">
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- A horizonal line-->
-      <hr />
-
-      <!-- Vertical -->
-      <div class="parent">
-        <div class="child right-aligned-text"><h2>vertical</h2></div>
-      </div>
-
-      <!-- heading only -->
-      <div class="parent">
-        <div class="child right-aligned-text">heading only</div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="s">
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical">
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="l">
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-            <calcite-tile heading="Tile title"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- heading only as link -->
-      <div class="parent">
-        <div class="child right-aligned-text">heading only as link</div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="s">
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical">
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="l">
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-            <calcite-tile href="/" heading="Tile title"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- description only -->
-      <div class="parent">
-        <div class="child right-aligned-text">description only</div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="s">
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical">
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="l">
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-            <calcite-tile description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- description only as link -->
-      <div class="parent">
-        <div class="child right-aligned-text">description only as link</div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="s">
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical">
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="l">
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-            <calcite-tile href="/" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- heading and description -->
-      <div class="parent">
-        <div class="child right-aligned-text">heading and description</div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="s">
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical">
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="l">
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- heading and description as link -->
-      <div class="parent">
-        <div class="child right-aligned-text">heading and description as link</div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="s">
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical">
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="l">
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-            <calcite-tile heading="Tile title" href="/" description="Tile description"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- icon, heading, description -->
-      <div class="parent">
-        <div class="child right-aligned-text">icon, heading, description</div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="s">
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical">
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="l">
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- icon, heading, description as link -->
-      <div class="parent">
-        <div class="child right-aligned-text">icon, heading, description as link</div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="s">
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical">
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="l">
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              href="/"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
-              icon="layers"
-            ></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- icon and heading (large visual) -->
-      <div class="parent">
-        <div class="child right-aligned-text">icon and heading (large visual)</div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="s">
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical">
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="l">
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" icon="layers"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-
-      <!-- icon and heading (large visual) as link -->
-      <div class="parent">
-        <div class="child right-aligned-text">icon and heading (large visual) as link</div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="s">
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical">
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-        <div class="child">
-          <calcite-tile-group layout="vertical" scale="l">
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-            <calcite-tile heading="Tile heading lorem ipsum" href="/" icon="layers"></calcite-tile>
-          </calcite-tile-group>
-        </div>
-      </div>
-    </demo-dom-swapper>
-  </body>
-</html>
diff --git a/packages/calcite-components/src/index.html b/packages/calcite-components/src/index.html
index a1dfc41d1ae..e8a0d4e3e1e 100644
--- a/packages/calcite-components/src/index.html
+++ b/packages/calcite-components/src/index.html
@@ -196,7 +196,10 @@ <h1 id="calcite-demo">Calcite demo</h1>
             </calcite-action>
           </a>
         </div>
+      </div>
 
+      <!-- second column -->
+      <div>
         <div>
           <a href="/demos/input.html">
             <calcite-action scale="s" text="Input" alignment="start" text-enabled appearance="solid"> </calcite-action>
@@ -209,10 +212,7 @@ <h1 id="calcite-demo">Calcite demo</h1>
             </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">
@@ -344,7 +344,10 @@ <h1 id="calcite-demo">Calcite demo</h1>
             </calcite-action>
           </a>
         </div>
+      </div>
 
+      <!-- third column -->
+      <div>
         <div>
           <a href="/demos/rating.html">
             <calcite-action scale="s" text="Rating" alignment="start" text-enabled appearance="solid"> </calcite-action>
@@ -363,10 +366,7 @@ <h1 id="calcite-demo">Calcite demo</h1>
             </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>
@@ -462,13 +462,6 @@ <h1 id="calcite-demo">Calcite demo</h1>
           </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">