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
index b53f2e10745..b7a2e498945 100644
--- a/packages/calcite-components/src/components/tile-group/tile-group.stories.ts
+++ b/packages/calcite-components/src/components/tile-group/tile-group.stories.ts
@@ -1,5 +1,6 @@
import { select, boolean } from "../../../.storybook/fake-knobs";
import { html } from "../../../support/formatting";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
export default {
title: "Components/Tiles/Tile Group",
@@ -38,7 +39,7 @@ export const simple = (): string => html`
`;
-export const allVariants = (): string => html`
+export const allVariantsHorizontal = (): string => html`
@@ -1184,18 +1535,22 @@ export const allVariants = (): string => html`
@@ -1204,18 +1559,22 @@ export const allVariants = (): string => html`
@@ -1224,18 +1583,22 @@ export const allVariants = (): string => html`
@@ -1249,18 +1612,22 @@ export const allVariants = (): string => html`
@@ -1269,18 +1636,22 @@ export const allVariants = (): string => html`
@@ -1289,18 +1660,22 @@ export const allVariants = (): string => html`
@@ -1314,18 +1689,22 @@ export const allVariants = (): string => html`
@@ -1334,18 +1713,22 @@ export const allVariants = (): string => html`
@@ -1354,18 +1737,22 @@ export const allVariants = (): string => html`
@@ -1379,18 +1766,22 @@ export const allVariants = (): string => html`
@@ -1399,18 +1790,22 @@ export const allVariants = (): string => html`
@@ -1419,18 +1814,22 @@ export const allVariants = (): string => html`
@@ -1444,18 +1843,22 @@ export const allVariants = (): string => html`
@@ -1464,18 +1867,22 @@ export const allVariants = (): string => html`
@@ -1484,18 +1891,22 @@ export const allVariants = (): string => html`
@@ -1510,21 +1921,25 @@ export const allVariants = (): string => html`
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"
>
@@ -1534,21 +1949,25 @@ export const allVariants = (): string => html`
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"
>
@@ -1558,21 +1977,25 @@ export const allVariants = (): string => html`
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"
>
@@ -1586,18 +2009,22 @@ export const allVariants = (): string => html`
@@ -1606,18 +2033,22 @@ export const allVariants = (): string => html`
@@ -1626,18 +2057,22 @@ export const allVariants = (): string => html`
@@ -1816,4 +2251,62 @@ export const allVariants = (): string => html`
+
+
+
+
icon and heading (large visual)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
icon and heading (large visual) links
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 7837beffc90..bfc959a7290 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -250,3 +250,7 @@
}
@include base-component();
+
+::slotted(*) {
+ max-inline-size: 100%;
+}
diff --git a/packages/calcite-components/src/components/tile/tile.stories.ts b/packages/calcite-components/src/components/tile/tile.stories.ts
index 910cd0394f9..f6e676b2e1a 100644
--- a/packages/calcite-components/src/components/tile/tile.stories.ts
+++ b/packages/calcite-components/src/components/tile/tile.stories.ts
@@ -2,6 +2,7 @@ import { select, text } from "../../../.storybook/fake-knobs";
import { iconNames, boolean } from "../../../.storybook/helpers";
import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
export default {
title: "Components/Tiles/Tile",
@@ -347,26 +348,17 @@ export const allVariants = (): string => html`
-
+
-
+
-
+
@@ -377,26 +369,17 @@ export const allVariants = (): string => html`
-
+
-
+
-
+
@@ -407,38 +390,20 @@ export const allVariants = (): string => html`
diff --git a/packages/calcite-components/src/demos/tile-group.html b/packages/calcite-components/src/demos/tile-group.html
index 013d7016acf..c139d6c1fe3 100644
--- a/packages/calcite-components/src/demos/tile-group.html
+++ b/packages/calcite-components/src/demos/tile-group.html
@@ -1277,6 +1277,321 @@
+
+
+
content-top slotted images
+
+
+
+
+
+
+
+
content-bottom slotted images
+
+
+
+
+
+
+
+
slotted images in both slots
+
+
+
+
+
diff --git a/packages/calcite-components/src/demos/tile.html b/packages/calcite-components/src/demos/tile.html
index 4a50cd1b5b8..af2fb2c7c92 100644
--- a/packages/calcite-components/src/demos/tile.html
+++ b/packages/calcite-components/src/demos/tile.html
@@ -334,7 +334,7 @@
@@ -342,7 +342,7 @@
@@ -350,7 +350,7 @@
@@ -364,7 +364,7 @@
@@ -372,7 +372,7 @@
@@ -380,7 +380,7 @@
@@ -394,11 +394,11 @@