feat: Add some basic Card styling.

A little brute-forcey right now, but we'll correct that.

src/components/ui/Card/README.md

@@ -1,12 +1,26 @@
 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';
+import { Paragraph, Button, Heading, Tags, Icon } from '@octopusthink/nautilus';
 
 <React.Fragment>
+ <Card title="Cards can be super simple">
+ <Icon name="star" />
+ <Heading level={1}>Cards should always have a title</Heading>
+ <Paragraph 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>
+ <Button>Choose this</Button>
+ <Button minimal navigation>Learn more</Button>
+
+ </Card>
+
+ <Card title="Cards can be super simple">
+ <Heading level={2}>Cards should always have a title</Heading>
+ <Paragraph>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>
+
  <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>
+ <Paragraph large>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>

src/components/ui/Card/index.js

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 
-import { headingSmall, toUnits } from 'styles';
+import { heading, body, interfaceUI, toUnits } from 'styles';
 import { useTheme } from 'themes';
 
 export const Card = (props) => {
@@ -14,9 +14,33 @@ export const Card = (props) => {
  <div
  css={css`
  background: white;
- border: 1px solid ${theme.colors.neutral.grey200};
- box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
+ border: 1px solid ${theme.colors.neutral.grey0};
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.125);
  padding: ${toUnits(theme.spacing.padding.large)};
+ margin-bottom: ${toUnits(theme.spacing.margin.medium)};
+
+ /* TODO: All headings inside of cards should use the same styling, regardless of level. Let's do this in a more elegant way. */
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ ${heading.small(theme)};
+ color: ${theme.colors.neutral.grey800};
+ }
+
+ /* TODO: Apply the small paragraph styling in a less brute-forcey sort of way.*/
+ p {
+ ${body.small(theme)};
+ }
+
+ /* TODO: Create a small prop on the button, and pull that styling in here. */
+ button {
+ ${interfaceUI.small(theme)};
+ padding: ${toUnits(theme.spacing.padding.small)}
+ ${toUnits(theme.spacing.padding.medium)};
+ }
  `}
  {...otherProps}
  >