diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 8d2ead28b71..dbdc6085aa2 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -84,6 +84,7 @@ 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";
@@ -170,6 +171,7 @@ 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";
@@ -4985,6 +4987,20 @@ 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.
@@ -7140,6 +7156,12 @@ declare global {
         prototype: HTMLCalciteTileElement;
         new (): HTMLCalciteTileElement;
     };
+    interface HTMLCalciteTileGroupElement extends Components.CalciteTileGroup, HTMLStencilElement {
+    }
+    var HTMLCalciteTileGroupElement: {
+        prototype: HTMLCalciteTileGroupElement;
+        new (): HTMLCalciteTileGroupElement;
+    };
     interface HTMLCalciteTileSelectElementEventMap {
         "calciteTileSelectChange": void;
     }
@@ -7421,6 +7443,7 @@ 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;
@@ -12490,6 +12513,20 @@ 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.
@@ -12992,6 +13029,7 @@ 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;
@@ -13116,6 +13154,7 @@ 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
new file mode 100644
index 00000000000..16ac237b847
--- /dev/null
+++ b/packages/calcite-components/src/components/tile-group/interfaces.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 00000000000..904a43172c1
--- /dev/null
+++ b/packages/calcite-components/src/components/tile-group/readme.md
@@ -0,0 +1,21 @@
+# 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
new file mode 100644
index 00000000000..71551c3c9c1
--- /dev/null
+++ b/packages/calcite-components/src/components/tile-group/resources.ts
@@ -0,0 +1,3 @@
+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
new file mode 100644
index 00000000000..54b8899955c
--- /dev/null
+++ b/packages/calcite-components/src/components/tile-group/tile-group.e2e.ts
@@ -0,0 +1,96 @@
+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: "none" },
+    );
+  });
+
+  describe("disabled with link tiles", () => {
+    disabled(
+      html`<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-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
new file mode 100644
index 00000000000..7685f65c13b
--- /dev/null
+++ b/packages/calcite-components/src/components/tile-group/tile-group.scss
@@ -0,0 +1,40 @@
+:host {
+  box-sizing: border-box;
+  display: inline-block;
+
+  .tile-group {
+    display: grid;
+    grid-auto-rows: minmax(auto, 1fr);
+  }
+
+  ::slotted(calcite-tile) {
+    margin-block-end: var(--calcite-spacing-px);
+    margin-inline-end: var(--calcite-spacing-px);
+  }
+}
+
+:host([scale="s"]) {
+  .tile-group {
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  }
+}
+:host([scale="m"]) {
+  .tile-group {
+    grid-template-columns: repeat(auto-fit, minmax(140px, 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
new file mode 100644
index 00000000000..584f12da97b
--- /dev/null
+++ b/packages/calcite-components/src/components/tile-group/tile-group.stories.ts
@@ -0,0 +1,964 @@
+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: 10000 },
+  },
+  ...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_NoTest = (): 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
new file mode 100644
index 00000000000..80d52d33f97
--- /dev/null
+++ b/packages/calcite-components/src/components/tile-group/tile-group.tsx
@@ -0,0 +1,94 @@
+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/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index dfc87da2ad8..c1324d4e007 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -150,11 +150,14 @@
     padding: var(--calcite-spacing-xl);
   }
 }
-:host(:not([embed])[href]:hover) {
+:host(:not([embed])[href]:hover),
+:host(:not([embed])[href]:focus) {
   --calcite-tile-border-color: var(--calcite-color-brand);
   .container {
     box-shadow: 0 0 0 2px var(--calcite-tile-border-color);
     cursor: pointer;
+    position: relative;
+    z-index: var(--calcite-z-index);
   }
 }
 :host(:not([embed])[href]:active) {
diff --git a/packages/calcite-components/src/demos/tile-group.html b/packages/calcite-components/src/demos/tile-group.html
new file mode 100644
index 00000000000..145e632be28
--- /dev/null
+++ b/packages/calcite-components/src/demos/tile-group.html
@@ -0,0 +1,934 @@
+<!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 e8a0d4e3e1e..a1dfc41d1ae 100644
--- a/packages/calcite-components/src/index.html
+++ b/packages/calcite-components/src/index.html
@@ -196,10 +196,7 @@ <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>
@@ -212,7 +209,10 @@ <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,10 +344,7 @@ <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>
@@ -366,7 +363,10 @@ <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,6 +462,13 @@ <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">