diff --git a/src/card/example/index.tsx b/src/card/example/index.tsx
deleted file mode 100644
index f819b93c81..0000000000
--- a/src/card/example/index.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { WidgetBase } from '@dojo/framework/core/WidgetBase';
-import { tsx } from '@dojo/framework/core/vdom';
-import { DNode } from '@dojo/framework/core/interfaces';
-import Card from '../index';
-import * as cardCss from './../../theme/default/card.m.css';
-import Button from '../../button/index';
-import Icon from '../../icon/index';
-
-export class App extends WidgetBase {
-	protected render(): DNode {
-		return (
-			<div>
-				<h2>Card Examples</h2>
-				<div id="example-1">
-					<h3>Basic Card</h3>
-					<div styles={{ width: '400px' }}>
-						<Card>
-							<h1 classes={cardCss.primary}>Hello, World</h1>
-							<p classes={cardCss.secondary}>Lorem ipsum</p>
-						</Card>
-					</div>
-				</div>
-				<div id="example-2">
-					<h3>Basic Card with Action Buttons</h3>
-					<div styles={{ width: '400px' }}>
-						<Card
-							actionsRenderer={() => (
-								<div classes={cardCss.actionButtons}>
-									<Button onClick={() => console.log('action clicked.')}>
-										Action
-									</Button>
-								</div>
-							)}
-						>
-							<h1 classes={cardCss.primary}>Hello, World</h1>
-							<p classes={cardCss.secondary}>Lorem ipsum</p>
-						</Card>
-					</div>
-				</div>
-				<div id="example-3">
-					<h3>Basic Card with Action Icons</h3>
-					<div styles={{ width: '400px' }}>
-						<Card
-							actionsRenderer={() => (
-								<div classes={cardCss.actionIcons}>
-									<Icon type="secureIcon" />
-									<Icon type="downIcon" />
-									<Icon type="upIcon" />
-								</div>
-							)}
-						>
-							<h1 classes={cardCss.primary}>Hello, World</h1>
-							<p classes={cardCss.secondary}>Lorem ipsum</p>
-						</Card>
-					</div>
-				</div>
-				<div id="example-4">
-					<h3>Basic Card with Actions and Icons</h3>
-					<div styles={{ width: '400px' }}>
-						<Card
-							actionsRenderer={() => [
-								<div classes={cardCss.actionButtons}>
-									<Button onClick={() => console.log('action clicked.')}>
-										Action
-									</Button>
-								</div>,
-								<div classes={cardCss.actionButtons}>
-									<Icon type="secureIcon" />
-									<Icon type="downIcon" />
-									<Icon type="upIcon" />
-								</div>
-							]}
-						>
-							<h1 classes={cardCss.primary}>Hello, World</h1>
-							<p classes={cardCss.secondary}>Lorem ipsum</p>
-						</Card>
-					</div>
-				</div>
-				<div id="example-5">
-					<h3>Basic card with 16x9 Media</h3>
-					<div styles={{ width: '400px' }}>
-						<Card>
-							<div
-								classes={[cardCss.media, cardCss.media16by9]}
-								styles={{
-									background:
-										'linear-gradient(to bottom, #1e5799 0%,#2989d8 100%,#207cca 51%,#7db9e8 100%)'
-								}}
-							/>
-							<p classes={cardCss.secondary}>Lorem ipsum</p>
-						</Card>
-					</div>
-				</div>
-				<div id="example-6">
-					<h3>Basic card with Square Media</h3>
-					<div styles={{ width: '200px' }}>
-						<Card>
-							<div
-								classes={[cardCss.media, cardCss.mediaSquare]}
-								styles={{
-									background:
-										'linear-gradient(to bottom, #1e5799 0%,#2989d8 100%,#207cca 51%,#7db9e8 100%)'
-								}}
-							/>
-							<h1 classes={cardCss.primary}>Hello, World</h1>
-							<p classes={cardCss.secondary}>Lorem ipsum</p>
-						</Card>
-					</div>
-				</div>
-				<div id="example-7">
-					<h3>Basic card with Content Media</h3>
-					<div styles={{ width: '400px' }}>
-						<Card>
-							<div
-								classes={[cardCss.media, cardCss.media16by9]}
-								styles={{
-									background:
-										'linear-gradient(to bottom, #1e5799 0%,#2989d8 100%,#207cca 51%,#7db9e8 100%)'
-								}}
-							>
-								<div classes={cardCss.mediaContent}>
-									<h2>Media Content</h2>
-								</div>
-							</div>
-							<h1 classes={cardCss.primary}>Hello, World</h1>
-							<p classes={cardCss.secondary}>Lorem ipsum</p>
-						</Card>
-					</div>
-				</div>
-			</div>
-		);
-	}
-}
-
-export default App;
diff --git a/src/examples/src/config.tsx b/src/examples/src/config.tsx
index eb1ccbd4f4..d0c5c73552 100644
--- a/src/examples/src/config.tsx
+++ b/src/examples/src/config.tsx
@@ -1,6 +1,5 @@
 import dojoTheme from '@dojo/widgets/theme/dojo';
 import materialTheme from '@dojo/widgets/theme/material';
-
 import BasicAccordionPane from './widgets/accordion-pane/Basic';
 import Exclusive from './widgets/accordion-pane/Exclusive';
 import BasicButton from './widgets/button/Basic';
@@ -9,14 +8,20 @@ import ToggleButton from './widgets/button/ToggleButton';
 import BasicCalendar from './widgets/calendar/Basic';
 import FirstDayOfWeekCalendar from './widgets/calendar/CustomFirstWeekDay';
 import LimitedRange from './widgets/calendar/LimitedRange';
+import ActionButtons from './widgets/card/ActionButtons';
+import ActionButtonsAndIcons from './widgets/card/ActionButtonsAndIcons';
+import ActionIcons from './widgets/card/ActionIcons';
 import BasicCard from './widgets/card/Basic';
+import CardWithMediaContent from './widgets/card/CardWithMediaContent';
+import CardWithMediaRectangle from './widgets/card/CardWithMediaRectangle';
+import CardWithMediaSquare from './widgets/card/CardWithMediaSquare';
 import BasicCheckboxGroup from './widgets/checkbox-group/Basic';
-import DisabledCheckbox from './widgets/checkbox/Disabled';
-import ReadonlyCheckbox from './widgets/checkbox/Readonly';
 import CustomLabelCheckboxGroup from './widgets/checkbox-group/CustomLabel';
 import CustomRendererCheckboxGroup from './widgets/checkbox-group/CustomRenderer';
 import InitialValueCheckboxGroup from './widgets/checkbox-group/InitialValue';
 import BasicCheckbox from './widgets/checkbox/Basic';
+import DisabledCheckbox from './widgets/checkbox/Disabled';
+import ReadonlyCheckbox from './widgets/checkbox/Readonly';
 import BasicChip from './widgets/chip/Basic';
 import ClickableChip from './widgets/chip/Clickable';
 import ClickableClosableChip from './widgets/chip/ClickableClosable';
@@ -28,19 +33,22 @@ import BasicCombobox from './widgets/combobox/Basic';
 import BasicConstrainedInput from './widgets/constrained-input/Basic';
 import Username from './widgets/constrained-input/Username';
 import BasicDialog from './widgets/dialog/Basic';
+import CloseableDialog from './widgets/dialog/CloseableDialog';
+import ModalDialog from './widgets/dialog/ModalDialog';
+import UnderlayDialog from './widgets/dialog/UnderlayDialog';
 import BasicEmailInput from './widgets/email-input/Basic';
+import Advanced from './widgets/grid/Advanced';
 import BasicGrid from './widgets/grid/Basic';
+import ColumnResize from './widgets/grid/ColumnResize';
 import CustomCellRenderer from './widgets/grid/CustomCellRenderer';
 import GridCustomFilterRenderer from './widgets/grid/CustomFilterRenderer';
 import CustomSortRenderer from './widgets/grid/CustomSortRenderer';
 import EditableCells from './widgets/grid/EditableCells';
 import Filtering from './widgets/grid/Filtering';
 import Paginated from './widgets/grid/Paginated';
-import ColumnResize from './widgets/grid/ColumnResize';
-import RowSelection from './widgets/grid/RowSelection';
 import Restful from './widgets/grid/Restful';
+import RowSelection from './widgets/grid/RowSelection';
 import Sorting from './widgets/grid/Sorting';
-import Advanced from './widgets/grid/Advanced';
 import AltTextIcon from './widgets/icon/AltText';
 import BasicIcons from './widgets/icon/Basic';
 import BasicLabel from './widgets/label/Basic';
@@ -55,13 +63,20 @@ import OutlinedDisabledSubmit from './widgets/outlined-button/DisabledSubmit';
 import OutlinedToggleButton from './widgets/outlined-button/ToggleButton';
 import BasicPassword from './widgets/password-input/Basic';
 import BasicPopup from './widgets/popup/Basic';
+import MenuPopup from './widgets/popup/MenuPopup';
+import SetWidth from './widgets/popup/SetWidth';
+import Underlay from './widgets/popup/Underlay';
 import BasicProgress from './widgets/progress/Basic';
 import BasicRadio from './widgets/radio/Basic';
 import BasicRaisedButton from './widgets/raised-button/Basic';
 import RaisedDisabledSubmit from './widgets/raised-button/DisabledSubmit';
 import RaisedToggleButton from './widgets/raised-button/ToggleButton';
 import BasicRangeSlider from './widgets/range-slider/Basic';
+import AdditionalText from './widgets/select/AdditionalText';
 import BasicSelect from './widgets/select/Basic';
+import CustomRenderer from './widgets/select/CustomRenderer';
+import DisabledSelect from './widgets/select/DisabledSelect';
+import RequiredSelect from './widgets/select/RequiredSelect';
 import BasicSlidePane from './widgets/slide-pane/Basic';
 import BasicSlider from './widgets/slider/Basic';
 import BasicSnackbar from './widgets/snackbar/Basic';
@@ -71,9 +86,9 @@ import StackedSnackbar from './widgets/snackbar/Stacked';
 import SuccessSnackbar from './widgets/snackbar/Success';
 import BasicSplitPane from './widgets/split-pane/Basic';
 import BasicTabController from './widgets/tab-controller/Basic';
-import DisabledTabController from './widgets/tab-controller/Disabled';
-import CloseableTabController from './widgets/tab-controller/Closeable';
 import ButtonAlignmentTabController from './widgets/tab-controller/ButtonAlignment';
+import CloseableTabController from './widgets/tab-controller/Closeable';
+import DisabledTabController from './widgets/tab-controller/Disabled';
 import BasicTextArea from './widgets/text-area/Basic';
 import DisabledTextArea from './widgets/text-area/Disabled';
 import HelperTextTextArea from './widgets/text-area/HelperText';
@@ -104,19 +119,9 @@ import HeadingCollapsedToolbar from './widgets/toolbar/HeadingCollapsed';
 import BasicTooltip from './widgets/tooltip/Basic';
 import ClickTooltip from './widgets/tooltip/Click';
 import FocusTooltip from './widgets/tooltip/Focus';
-import MenuPopup from './widgets/popup/MenuPopup';
-import SetWidth from './widgets/popup/SetWidth';
-import Underlay from './widgets/popup/Underlay';
-import UnderlayDialog from './widgets/dialog/UnderlayDialog';
-import ModalDialog from './widgets/dialog/ModalDialog';
-import CloseableDialog from './widgets/dialog/CloseableDialog';
 
 `!has('docs')`;
 import testsContext from './tests';
-import CustomRenderer from './widgets/select/CustomRenderer';
-import DisabledSelect from './widgets/select/DisabledSelect';
-import RequiredSelect from './widgets/select/RequiredSelect';
-import AdditionalText from './widgets/select/AdditionalText';
 
 const tests = typeof testsContext !== 'undefined' ? testsContext : { keys: () => [] };
 
@@ -196,6 +201,38 @@ export const config = {
 			}
 		},
 		card: {
+			examples: [
+				{
+					title: 'Basic Card with Action Buttons',
+					module: ActionButtons,
+					filename: 'ActionButtons'
+				},
+				{
+					title: 'Basic Card with Action Icons',
+					module: ActionIcons,
+					filename: 'ActionIcons'
+				},
+				{
+					title: 'Basic Card with Actions and Icons',
+					module: ActionButtonsAndIcons,
+					filename: 'ActionButtonsAndIcons'
+				},
+				{
+					title: 'Basic card with 16x9 Media',
+					module: CardWithMediaRectangle,
+					filename: 'CardWithMediaRectangle'
+				},
+				{
+					title: 'Basic card with Square Media',
+					module: CardWithMediaSquare,
+					filename: 'CardWithMediaSquare'
+				},
+				{
+					title: 'Basic card with Content Media',
+					module: CardWithMediaContent,
+					filename: 'CardWithMediaContent'
+				}
+			],
 			filename: 'index',
 			overview: {
 				example: {
diff --git a/src/examples/src/widgets/card/ActionButtons.tsx b/src/examples/src/widgets/card/ActionButtons.tsx
new file mode 100644
index 0000000000..a847ba5749
--- /dev/null
+++ b/src/examples/src/widgets/card/ActionButtons.tsx
@@ -0,0 +1,30 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import { icache } from '@dojo/framework/core/middleware/icache';
+import Card from '@dojo/widgets/card';
+import Button from '@dojo/widgets/button';
+
+import * as cardCss from '../../../../theme/dojo/card.m.css';
+
+const factory = create({ icache });
+
+export default factory(function ActionButtons({ middleware: { icache } }) {
+	const clickCount = icache.getOrSet<number>('clickCount', 0);
+	return (
+		<div styles={{ width: '400px' }}>
+			<Card
+				actionsRenderer={() => (
+					<div classes={cardCss.actionButtons}>
+						<Button onClick={() => icache.set('clickCount', clickCount + 1)}>
+							{clickCount === 0
+								? 'Action'
+								: `Clicked: ${clickCount} time${clickCount > 1 ? 's' : ''}`}
+						</Button>
+					</div>
+				)}
+			>
+				<h1 classes={cardCss.primary}>Hello, World</h1>
+				<p classes={cardCss.secondary}>Lorem ipsum</p>
+			</Card>
+		</div>
+	);
+});
diff --git a/src/examples/src/widgets/card/ActionButtonsAndIcons.tsx b/src/examples/src/widgets/card/ActionButtonsAndIcons.tsx
new file mode 100644
index 0000000000..8fd5e6bc06
--- /dev/null
+++ b/src/examples/src/widgets/card/ActionButtonsAndIcons.tsx
@@ -0,0 +1,36 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import { icache } from '@dojo/framework/core/middleware/icache';
+import Card from '@dojo/widgets/card';
+import Button from '@dojo/widgets/button';
+import Icon from '@dojo/widgets/icon';
+
+import * as cardCss from '../../../../theme/dojo/card.m.css';
+
+const factory = create({ icache });
+
+export default factory(function ActionButtonsAndIcons({ middleware: { icache } }) {
+	const clickCount = icache.getOrSet<number>('clickCount', 0);
+	return (
+		<div styles={{ width: '400px' }}>
+			<Card
+				actionsRenderer={() => [
+					<div classes={cardCss.actionButtons}>
+						<Button onClick={() => icache.set('clickCount', clickCount + 1)}>
+							{clickCount === 0
+								? 'Action'
+								: `Clicked: ${clickCount} time${clickCount > 1 ? 's' : ''}`}
+						</Button>
+					</div>,
+					<div classes={cardCss.actionButtons}>
+						<Icon type="secureIcon" />
+						<Icon type="downIcon" />
+						<Icon type="upIcon" />
+					</div>
+				]}
+			>
+				<h1 classes={cardCss.primary}>Hello, World</h1>
+				<p classes={cardCss.secondary}>Lorem ipsum</p>
+			</Card>
+		</div>
+	);
+});
diff --git a/src/examples/src/widgets/card/ActionIcons.tsx b/src/examples/src/widgets/card/ActionIcons.tsx
new file mode 100644
index 0000000000..428cdbfb52
--- /dev/null
+++ b/src/examples/src/widgets/card/ActionIcons.tsx
@@ -0,0 +1,26 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import Card from '@dojo/widgets/card';
+import Icon from '@dojo/widgets/icon';
+
+import * as cardCss from '../../../../theme/dojo/card.m.css';
+
+const factory = create();
+
+export default factory(function ActionIcons() {
+	return (
+		<div styles={{ width: '400px' }}>
+			<Card
+				actionsRenderer={() => (
+					<div classes={cardCss.actionIcons}>
+						<Icon type="secureIcon" />
+						<Icon type="downIcon" />
+						<Icon type="upIcon" />
+					</div>
+				)}
+			>
+				<h1 classes={cardCss.primary}>Hello, World</h1>
+				<p classes={cardCss.secondary}>Lorem ipsum</p>
+			</Card>
+		</div>
+	);
+});
diff --git a/src/examples/src/widgets/card/Basic.tsx b/src/examples/src/widgets/card/Basic.tsx
index caa00f83d7..74e08ee0aa 100644
--- a/src/examples/src/widgets/card/Basic.tsx
+++ b/src/examples/src/widgets/card/Basic.tsx
@@ -1,13 +1,17 @@
 import { create, tsx } from '@dojo/framework/core/vdom';
 import Card from '@dojo/widgets/card';
 
+import * as cardCss from '../../../../theme/dojo/card.m.css';
+
 const factory = create();
 
 export default factory(function Basic() {
 	return (
-		<Card>
-			<h1>Hello, World</h1>
-			<p>Lorem ipsum</p>
-		</Card>
+		<div styles={{ width: '400px' }}>
+			<Card>
+				<h1 classes={cardCss.primary}>Hello, World</h1>
+				<p classes={cardCss.secondary}>Lorem ipsum</p>
+			</Card>
+		</div>
 	);
 });
diff --git a/src/examples/src/widgets/card/CardWithMediaContent.tsx b/src/examples/src/widgets/card/CardWithMediaContent.tsx
new file mode 100644
index 0000000000..58535b5751
--- /dev/null
+++ b/src/examples/src/widgets/card/CardWithMediaContent.tsx
@@ -0,0 +1,28 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import Card from '@dojo/widgets/card';
+
+import * as cardCss from '../../../../theme/dojo/card.m.css';
+
+const factory = create();
+
+export default factory(function CardWithMediaContent() {
+	return (
+		<div styles={{ width: '400px' }}>
+			<Card>
+				<div
+					classes={[cardCss.media, cardCss.media16by9]}
+					styles={{
+						background:
+							'linear-gradient(to bottom, #1e5799 0%,#2989d8 100%,#207cca 51%,#7db9e8 100%)'
+					}}
+				>
+					<div classes={cardCss.mediaContent}>
+						<h2>Media Content</h2>
+					</div>
+				</div>
+				<h1 classes={cardCss.primary}>Hello, World</h1>
+				<p classes={cardCss.secondary}>Lorem ipsum</p>
+			</Card>
+		</div>
+	);
+});
diff --git a/src/examples/src/widgets/card/CardWithMediaRectangle.tsx b/src/examples/src/widgets/card/CardWithMediaRectangle.tsx
new file mode 100644
index 0000000000..e1d7e8f2e4
--- /dev/null
+++ b/src/examples/src/widgets/card/CardWithMediaRectangle.tsx
@@ -0,0 +1,23 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import Card from '@dojo/widgets/card';
+
+import * as cardCss from '../../../../theme/dojo/card.m.css';
+
+const factory = create();
+
+export default factory(function CardWithMediaRectangle() {
+	return (
+		<div styles={{ width: '400px' }}>
+			<Card>
+				<div
+					classes={[cardCss.media, cardCss.media16by9]}
+					styles={{
+						background:
+							'linear-gradient(to bottom, #1e5799 0%,#2989d8 100%,#207cca 51%,#7db9e8 100%)'
+					}}
+				/>
+				<p classes={cardCss.secondary}>Lorem ipsum</p>
+			</Card>
+		</div>
+	);
+});
diff --git a/src/examples/src/widgets/card/CardWithMediaSquare.tsx b/src/examples/src/widgets/card/CardWithMediaSquare.tsx
new file mode 100644
index 0000000000..bcc57d4c0d
--- /dev/null
+++ b/src/examples/src/widgets/card/CardWithMediaSquare.tsx
@@ -0,0 +1,24 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import Card from '@dojo/widgets/card';
+
+import * as cardCss from '../../../../theme/dojo/card.m.css';
+
+const factory = create();
+
+export default factory(function CardWithMediaSquare() {
+	return (
+		<div styles={{ width: '200px' }}>
+			<Card>
+				<div
+					classes={[cardCss.media, cardCss.mediaSquare]}
+					styles={{
+						background:
+							'linear-gradient(to bottom, #1e5799 0%,#2989d8 100%,#207cca 51%,#7db9e8 100%)'
+					}}
+				/>
+				<h1 classes={cardCss.primary}>Hello, World</h1>
+				<p classes={cardCss.secondary}>Lorem ipsum</p>
+			</Card>
+		</div>
+	);
+});