feat(card): Adds base styles and example for card

packages/ray/lib/_base.scss

@@ -45,3 +45,7 @@ li {
  margin: 0;
  padding: 0;
 }
+
+.responsive-image {
+ width: 100%;
+}

packages/ray/lib/_card.scss

@@ -0,0 +1,14 @@
+$card-padding: 1rem;
+$card-border-color: #e6e6e6;
+
+.card {
+ width: 100%;
+ border: 1px solid $card-border-color;
+ border-radius: $border-radius;
+ background-color: $white;
+ overflow: hidden;
+
+ &__content {
+ padding: $card-padding;
+ }
+}

packages/ray/lib/_typography.scss

@@ -13,13 +13,13 @@ p {
  margin-bottom: 5px;
 
  @include tablet {
- font-size: 18px;
- line-height: 28px;
+ font-size: 20px;
+ line-height: 32px;
  }
 }
 
 .h3 {
- font-size: 18px;
+ font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  margin-bottom: 10px;

packages/ray/lib/application.scss

@@ -8,5 +8,6 @@
 @import 'grid';
 @import 'typography';
 @import 'forms';
+@import 'card';
 
 @import 'buttons';

packages/ray/stories/card.stories.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Card', module).addWithJSX('All', () => (
+ <div
+ style={{
+ padding: '1rem',
+ maxWidth: '600px'
+ }}
+ >
+ <div className="card">
+ <img
+ className="responsive-image"
+ src="https://source.unsplash.com/random/800x450"
+ />
+
+ <div className="card__content">
+ <h2 className="h3" style={{ marginTop: 0 }}>
+ Spacetravel guidelines
+ </h2>
+ <p className="copy2">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
+ atque minima itaque sint! Doloremque odio quia saepe unde sunt neque
+ quam quibusdam in, nihil beatae, consequatur cumque? Cupiditate, quia
+ facilis.
+ </p>
+ </div>
+ </div>
+ </div>
+));