feat: Add a barebones Card component.

Closes #67.

src/components/ui/Card/README.md

@@ -0,0 +1,33 @@
+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 } from '@octopusthink/nautilus';
+
+<React.Fragment>
+  <Card title="Cards can be super simple">
+    <Heading level={3}>Cards should always have a title</Heading>
+    <Paragraph size="small">The Card can either have a title attribute, or you can pass it a heading. Not sure which is the best approach here.</Paragraph>
+  </Card>
+
+</React.Fragment>
+```
+<Card orientation="landscape" title="Fish & Chips & Vinegar" metadata="Places I like to visit" media="http://placekitten.com/400/800">	<Paragraph size="small">By default, cards use a landscape orientation, but can also be swapped around. All content is optional.</Paragraph>
+</Card>
+
+<Card orientation="portrait" title="A card can go both ways" metadata="Horizontal, or vertical?" media="http://placekitten.com/800/400">	<Paragraph size="medium">An experimental project designed to vastly simplify and streamline the WordPress site building process for small business owners, by using technology to automate visual design decisions.</Paragraph>
+</Card>
+
+<Card orientation="landscape">
+  <Card.Header>
+    <img src="http://placekitten.com/400/800" />
+    <Heading>Fish & Chips & Vinegar</Heading>
+    <Tags><Tags.Tag>Places I like to visit</Tags.Tag></Tags>
+  </Card.Header>
+
+  <Paragraph size="small">By default, cards use a landscape orientation, but can also be swapped around. All content is optional.</Paragraph>
+
+  <Card.Footer>
+    <Button>Learn more</Button>
+    <Button minimal>Hide this</Button>
+  </Card.Footer>
+</Card>

src/components/ui/Card/index.js

@@ -0,0 +1,39 @@
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+
+import { headingSmall, toUnits } from 'styles';
+import { useTheme } from 'themes';
+
+export const Card = (props) => {
+  const { children, ...otherProps } = props;
+  const theme = useTheme();
+
+  return (
+    <div
+      css={css`
+        background: white;
+        border: 1px solid ${theme.colors.neutral.grey200};
+        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
+        padding: ${toUnits(theme.spacing.padding.large)};
+      `}
+      {...otherProps}
+    >
+      {children}
+    </div>
+  );
+};
+
+Card.defaultProps = {
+  children: undefined,
+};
+
+Card.propTypes = {
+  /** @ignore */
+  children: PropTypes.node,
+};
+
+export const { defaultProps, propTypes } = Card;
+
+export default Card;

src/components/ui/Card/index.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { axe, render } from 'utils/testing';
+
+import Card from '.';
+
+describe('Card', () => {
+  it('should render a <div>', () => {
+    const { container } = render(<Card>My Account</Card>);
+
+    expect(container.firstChild.tagName).toEqual('DIV');
+  });
+
+  it('should output its children', () => {
+    const { getByTestId } = render(
+      <Card>
+        <div data-testid="child" />
+      </Card>,
+    );
+
+    expect(getByTestId('child')).toBeDefined();
+  });
+
+  it('should output card CSS', () => {
+    const { container } = render(<Card>My Blog Posts</Card>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  describe('accessibility', () => {
+    it('should pass aXe tests', async () => {
+      const { container } = render(<Card>My Blog Posts</Card>);
+
+      expect(await axe(container.innerHTML)).toHaveNoViolations();
+    });
+  });
+});