diff --git a/src/components/Callout/Callout.jsx b/src/components/Callout/Callout.jsx
new file mode 100644
index 0000000..a55ed62
--- /dev/null
+++ b/src/components/Callout/Callout.jsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function Callout({ children }) {
+    return <div className='hw-callout'>{children}</div>
+}
diff --git a/src/components/Callout/Callout.stories.js b/src/components/Callout/Callout.stories.js
new file mode 100644
index 0000000..8f882fa
--- /dev/null
+++ b/src/components/Callout/Callout.stories.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import Callout from './Callout'
+import PrimaryButton from '../Button/PrimaryButton'
+
+export default {
+    title: 'Components/Callout',
+    component: Callout
+}
+
+const Template = (args) => (
+    <Callout>
+        <p>Some text in the callout</p>
+        <PrimaryButton>More info</PrimaryButton>
+    </Callout>
+)
+
+export const input = Template.bind({})