diff --git a/packages/kit-docs/src/lib/components/base/Card.svelte b/packages/kit-docs/src/lib/components/base/Card.svelte
new file mode 100644
index 0000000..19c2f88
--- /dev/null
+++ b/packages/kit-docs/src/lib/components/base/Card.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import clsx from 'clsx';
+  interface $$Props {
+    href?: string;
+    title: string;
+    description?: string;
+  }
+  export let href = '';
+  export let title = '';
+  export let description = '';
+
+  const as = href ? 'a' : 'div';
+
+  $: arrowClass = clsx(
+    href &&
+      'text-brand transition-all duration-100 opacity-0 group-hover:opacity-100 translate group-hover:translate-x-0 -translate-x-3',
+    !href ? 'hidden' : 'inline-block',
+  );
+</script>
+
+<svelte:element
+  this={as}
+  class={clsx(
+    'block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-lg border border-border overflow-hidden px-6 py-5 w-full',
+    href && 'hover:border-brand cursor-pointer',
+  )}
+  {href}
+>
+  {#if $$slots['icon']}
+    <div class="h-6 w-6 text-brand">
+      <slot name="icon" />
+    </div>
+  {/if}
+  <h2 class="font-semibold text-xl dark:text-white mt-4">
+    <span>{title}</span>
+    {#if href}
+      <span class={arrowClass}>-></span>
+    {/if}
+  </h2>
+  {#if description}
+    <span class="mt-1 font-normal text-soft">
+      <p>{description}</p>
+    </span>
+  {/if}
+</svelte:element>
diff --git a/packages/kit-docs/src/lib/components/base/CardGroup.svelte b/packages/kit-docs/src/lib/components/base/CardGroup.svelte
new file mode 100644
index 0000000..e940d55
--- /dev/null
+++ b/packages/kit-docs/src/lib/components/base/CardGroup.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import clsx from 'clsx';
+
+  export let cols: 1 | 2 | 3 | 4 = 2;
+</script>
+
+<div
+  class={clsx(
+    'not-prose grid gap-x-4',
+    cols === 1 && '576:grid-cols-1',
+    cols === 2 && '576:grid-cols-2',
+    cols === 3 && '576:grid-cols-3',
+    cols === 4 && '576:grid-cols-4',
+  )}
+>
+  <slot />
+</div>
diff --git a/packages/kit-docs/src/lib/index.ts b/packages/kit-docs/src/lib/index.ts
index f11e623..dfbd773 100644
--- a/packages/kit-docs/src/lib/index.ts
+++ b/packages/kit-docs/src/lib/index.ts
@@ -4,6 +4,8 @@ export * from './actions/prefetch-link.js';
 
 // Components
 export { default as Button } from './components/base/Button.svelte';
+export { default as Card } from './components/base/Card.svelte';
+export { default as CardGroup } from './components/base/CardGroup.svelte';
 export { default as Chip } from './components/base/Chip.svelte';
 export { default as ColorSchemeToggle } from './components/base/ColorSchemeToggle.svelte';
 export { default as Menu } from './components/base/Menu.svelte';
diff --git a/packages/kit-docs/src/routes/docs/[...2]default-layout/[...3]components/+page.md b/packages/kit-docs/src/routes/docs/[...2]default-layout/[...3]components/+page.md
index 7c242db..e2a078f 100644
--- a/packages/kit-docs/src/routes/docs/[...2]default-layout/[...3]components/+page.md
+++ b/packages/kit-docs/src/routes/docs/[...2]default-layout/[...3]components/+page.md
@@ -7,6 +7,48 @@ description: Guide to components that come with the default layout.
 In this section, we'll look at the components that you can import and use when working with
 the default layout.
 
+## Card
+
+<script>
+import { Card, CardGroup } from '$lib';
+import GitHubIcon from '~icons/ri/github-fill';
+import RocketIcon from '~icons/ri/rocket-fill';
+</script>
+
+```js copy
+import { Card, CardGroup } from '@svelteness/kit-docs';
+import GitHubIcon from '~icons/ri/github-fill';
+import RocketIcon from '~icons/ri/rocket-fill';
+```
+
+```svelte copy
+<CardGroup cols={2}>
+  <Card
+    title="GitHub"
+    description="Check out the kit-docs GitHub repo."
+    href="https://github.com/svelteness/kit-docs"
+  >
+    <GitHubIcon slot="icon" />
+  </Card>
+  <Card 
+    title="Deploying" 
+    description="Learn how to deploy kit-docs." 
+    href="/docs/production/deploying"
+  >
+    <RocketIcon slot="icon" />
+  </Card>
+</CardGroup>
+```
+
+<CardGroup cols={2}>
+  <Card title="GitHub" description="Check out the kit-docs GitHub repo." href="https://github.com/svelteness/kit-docs">
+    <GitHubIcon slot="icon" />
+  </Card>
+  <Card title="Deploying" description="Learn how to deploy kit-docs." href="/docs/production/deploying">
+    <RocketIcon slot="icon" />
+  </Card>
+</CardGroup>
+
 ## Social Link
 
 <script>