diff --git a/src/components/index.js b/src/components/index.js
index 1a7007bb..ef2280e8 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,6 +4,7 @@ export { default as Emphasis } from './inline/Emphasis';
export { default as Strong } from './inline/Strong';
export { default as Button } from './ui/Button';
+export { default as Card } from './ui/Card';
export { default as Heading } from './ui/Heading';
export { default as Icon } from './ui/Icon';
export { default as Link } from './ui/Link';
diff --git a/src/components/ui/Card/README.md b/src/components/ui/Card/README.md
new file mode 100644
index 00000000..d0be4a01
--- /dev/null
+++ b/src/components/ui/Card/README.md
@@ -0,0 +1,82 @@
+A card is used to represent a descrete and self-contained piece of data, typically as part of a feed or series of related datum.
+
+```jsx
+import { Paragraph, Button, Heading, Tags, Icon } from '@octopusthink/nautilus';
+
+
+
+
+ Cards should always have a title
+ The Card can either have a title attribute, or you can pass it a heading. Not sure which is the best approach here.
+
+
+
+
+
+ Cards should always have a title
+ The Card can either have a title attribute, or you can pass it a heading. Not sure which is the best approach here.
+
+
+
+ Cards should always have a title
+ The Card can either have a title attribute, or you can pass it a heading. Not sure which is the best approach here.
+
+
+```
+
+```jsx
+import { Paragraph } from '@octopusthink/nautilus';
+
+
+
+ By default, cards use a landscape orientation, but can also be swapped around.
+ All content is optional.
+
+
+```
+
+```jsx
+import { Paragraph } from '@octopusthink/nautilus';
+
+
+
+ Dis convallis taciti molestie cum etiam mollis facilisis ligula ultricies, accumsan mattis phasellus malesuada in sollicitudin pulvinar quis, turpis pretium purus mi enim suspendisse nisl dolor. Egestas diam mollis bibendum integer est volutpat, quisque posuere cras eu. Eros enim maecenas tellus semper torquent platea pulvinar vulputate fermentum laoreet consequat vel purus, vitae rhoncus est sollicitudin lacus pretium id montes blandit phasellus nullam cras.
+
+
+```
+
+```jsx
+import { Paragraph, Button, Heading, Tags, Icon } from '@octopusthink/nautilus';
+
+
+ {/*
+
+
+ Fish & Chips & Vinegar
+ Places I like to visit
+
+ */}
+
+
+ By default, cards use a landscape orientation, but can also be
+ swapped around. All content is optional.
+
+
+ {/*
+
+
+
+
+ */}
+
+```
diff --git a/src/components/ui/Card/__snapshots__/index.test.js.snap b/src/components/ui/Card/__snapshots__/index.test.js.snap
new file mode 100644
index 00000000..2b36e23c
--- /dev/null
+++ b/src/components/ui/Card/__snapshots__/index.test.js.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card should output card CSS 1`] = `
+.emotion-0 {
+ background: white;
+ border: 1px solid #f8f9fa;
+ box-shadow: 0px 4px 8px rgba(0,0,0,0.125);
+ padding: 2.4rem;
+ margin-bottom: 3.2rem;
+}
+
+.emotion-0 .Nautilus-Heading-1,
+.emotion-0 .Nautilus-Heading-2,
+.emotion-0 .Nautilus-Heading-3,
+.emotion-0 .Nautilus-Heading-4,
+.emotion-0 .Nautilus-Heading-5,
+.emotion-0 .Nautilus-Heading-6 {
+ font-family: -apple-system,BlinkMacSystemFont,San Francisco,Roboto,Segoe UI,Helvetica Neue,sans-serif;
+ font-weight: 600;
+ font-size: 2.7rem;
+ line-height: 1.3333333333333333;
+ color: #666c76;
+}
+
+.emotion-0 p {
+ font-family: -apple-system,BlinkMacSystemFont,San Francisco,Roboto,Segoe UI,Helvetica Neue,sans-serif;
+ font-weight: 400;
+ font-size: 1.7rem;
+ line-height: 1.6470588235294117;
+}
+
+.emotion-0 button {
+ font-family: -apple-system,BlinkMacSystemFont,San Francisco,Roboto,Segoe UI,Helvetica Neue,sans-serif;
+ font-weight: 500;
+ font-size: 1.7rem;
+ line-height: 1.411764705882353;
+ padding: 0.8rem 1.2rem;
+}
+
+