diff --git a/src/alert/alert.tsx b/src/alert/alert.tsx
index decdc7f1..c72a598f 100644
--- a/src/alert/alert.tsx
+++ b/src/alert/alert.tsx
@@ -14,9 +14,9 @@ const variantClasses = {
 };
 
 /**
- * `Alert` is used to display a short, important message that does not interrupt the user's workflow.
- *
+ * `Alert` is used to communicate high-priority or time-sensitive information.
  * `Alert` is not dismissable.
+ * Use `Callout` instead of `Alert` if you want to communicate information specific to a page.
  */
 export const Alert = ({
 	children,
diff --git a/src/callout/callout.stories.tsx b/src/callout/callout.stories.tsx
new file mode 100644
index 00000000..157d50bc
--- /dev/null
+++ b/src/callout/callout.stories.tsx
@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Callout } from "./callout";
+
+const story = {
+	title: "Components/Callout",
+	component: Callout,
+} satisfies Meta<typeof Callout>;
+
+type Story = StoryObj<typeof Callout>;
+
+export const Success: Story = {
+	args: {
+		children:
+			"Eaque non tempore porro quod voluptates rerum ipsam. Consequatur ea voluptate quo tempora autem quod. Voluptatem perspiciatis non mollitia. Dicta non necessitatibus laboriosam est aut cum eos et. Animi pariatur aliquid sint ipsum nam occaecati nisi sit.",
+		variant: "success",
+	},
+};
+
+export const Info: Story = {
+	args: {
+		children:
+			"Eaque non tempore porro quod voluptates rerum ipsam. Consequatur ea voluptate quo tempora autem quod. Voluptatem perspiciatis non mollitia. Dicta non necessitatibus laboriosam est aut cum eos et. Animi pariatur aliquid sint ipsum nam occaecati nisi sit.",
+		variant: "info",
+	},
+};
+
+export const Warning: Story = {
+	args: {
+		children:
+			"Eaque non tempore porro quod voluptates rerum ipsam. Consequatur ea voluptate quo tempora autem quod. Voluptatem perspiciatis non mollitia. Dicta non necessitatibus laboriosam est aut cum eos et. Animi pariatur aliquid sint ipsum nam occaecati nisi sit.",
+		variant: "warning",
+	},
+};
+
+export const Danger: Story = {
+	args: {
+		children:
+			"Eaque non tempore porro quod voluptates rerum ipsam. Consequatur ea voluptate quo tempora autem quod. Voluptatem perspiciatis non mollitia. Dicta non necessitatibus laboriosam est aut cum eos et. Animi pariatur aliquid sint ipsum nam occaecati nisi sit.",
+		variant: "danger",
+	},
+};
+
+export default story;
diff --git a/src/callout/callout.test.tsx b/src/callout/callout.test.tsx
new file mode 100644
index 00000000..45008093
--- /dev/null
+++ b/src/callout/callout.test.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import { Callout } from "./callout";
+
+describe("<Callout />", () => {
+	it("should render children correctly", () => {
+		render(<Callout variant="info">Hello World</Callout>);
+
+		expect(screen.getByText("Hello World")).toBeInTheDocument();
+	});
+});
+
+// ------------------------------
+// Type tests
+// ------------------------------
+
+// @ts-expect-error - Callout does not accept `role`
+<Callout variant="success" role="alert">
+	Hello World
+</Callout>;
+
+// @ts-expect-error - Callout does not accept `role`
+<Callout variant="info" role="alert">
+	Hello World
+</Callout>;
+
+// @ts-expect-error - Callout does not accept `role`
+<Callout variant="warning" role="alert">
+	Hello World
+</Callout>;
+
+// @ts-expect-error - Callout does not accept `role`
+<Callout variant="danger" role="alert">
+	Hello World
+</Callout>;
diff --git a/src/callout/callout.tsx b/src/callout/callout.tsx
new file mode 100644
index 00000000..63815870
--- /dev/null
+++ b/src/callout/callout.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { CalloutProps } from "./types";
+
+const variantClasses = {
+	success: "text-green-700 bg-green-50 border-green-700",
+	info: "text-blue-700 bg-blue-50 border-blue-700",
+	warning: "text-yellow-700 bg-yellow-50 border-yellow-700",
+	danger: "text-red-700 bg-red-50 border-red-700",
+};
+
+/**
+ * A `Callout` is used to emphasize an important snippet of information within the flow of a page.
+ * Content in a callout should be something on the page that you want to highlight, but that is not critical information.
+ * Use `Alert` instead of `Callout` if you want to communicate system-level information.
+ */
+export const Callout = ({
+	children,
+	className,
+	variant,
+	...others
+}: CalloutProps): JSX.Element => {
+	const variantClass = variantClasses[variant];
+
+	const classes = [
+		"p-4 mb-6 border border-solid border-1 break-words",
+		variantClass,
+		className,
+	].join(" ");
+
+	return (
+		<div className={classes} {...others}>
+			{children}
+		</div>
+	);
+};
diff --git a/src/callout/index.ts b/src/callout/index.ts
new file mode 100644
index 00000000..d15d552b
--- /dev/null
+++ b/src/callout/index.ts
@@ -0,0 +1 @@
+export { Callout } from "./callout";
diff --git a/src/callout/types.ts b/src/callout/types.ts
new file mode 100644
index 00000000..fce4c35c
--- /dev/null
+++ b/src/callout/types.ts
@@ -0,0 +1,6 @@
+type CalloutVariant = "success" | "info" | "warning" | "danger";
+
+export interface CalloutProps
+	extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
+	variant: CalloutVariant;
+}
diff --git a/src/index.ts b/src/index.ts
index 36965209..b65be3da 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,24 +1,25 @@
 // Use this file as the entry point for component export
 export { Alert, type AlertProps } from "./alert";
 export { Button, type ButtonProps } from "./button";
+export { Callout } from "./callout";
 export { CloseButton } from "./close-button";
-export { Image } from "./image";
-export { Table } from "./table";
-export { Panel } from "./panel";
-// export { ToggleButton } from './toggle-button';
-export { Dropdown } from "./drop-down";
-export { MenuItem } from "./drop-down/menu-item";
-export { Container } from "./container";
-export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
 export { Col } from "./col";
+export { Container } from "./container";
 export { ControlLabel } from "./control-label";
-export { FormGroup, type FormGroupProps } from "./form-group";
+export { Dropdown } from "./drop-down";
 export { FormControl } from "./form-control";
+export { FormGroup, type FormGroupProps } from "./form-group";
 export { HelpBlock } from "./help-block";
-export { Row } from "./row";
+export { Image } from "./image";
+export { MenuItem } from "./drop-down/menu-item";
 export { Modal, type ModalProps, type HeaderProps } from "./modal";
-export { getThemingClass } from "./utils";
-export { Spacer } from "./spacer";
+export { Panel } from "./panel";
 export { PrismFormatted } from "./prism-formatted";
-export { QuizQuestion } from "./quiz-question";
+export { Row } from "./row";
+export { Spacer } from "./spacer";
+export { Table } from "./table";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
 export { Quiz, useQuiz } from "./quiz";
+export { QuizQuestion } from "./quiz-question";
+
+export { getThemingClass } from "./utils";