add BaseCard component

webapp/assets/_new/styles/resets.scss

@@ -9,3 +9,13 @@ button {
   font-family: inherit;
   font-size: inherit;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+}

webapp/components/_new/generic/BaseCard/BaseCard.story.js

@@ -0,0 +1,27 @@
+import { storiesOf } from '@storybook/vue'
+import helpers from '~/storybook/helpers'
+import BaseCard from './BaseCard.vue'
+
+storiesOf('Generic/BaseCard', module)
+  .addDecorator(helpers.layout)
+
+  .add('default', () => ({
+    components: { BaseCard },
+    template: `
+      <base-card>
+        <h2 class="card-heading">I am a card heading</h2>
+        <p>And I am a paragraph.</p>
+      </base-card>
+    `,
+  }))
+
+  .add('with image', () => ({
+    components: { BaseCard },
+    template: `
+      <base-card style="width: 400px;">
+        <img class="card-image" src="https://unsplash.com/photos/R4y_E5ZQDPg/download" />
+        <h2 class="card-heading">I am a card heading</h2>
+        <p>And I am a paragraph.</p>
+      </base-card>
+    `,
+  }))

webapp/components/_new/generic/BaseCard/BaseCard.vue

@@ -0,0 +1,32 @@
+<template>
+  <article class="base-card">
+    <slot />
+  </article>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.base-card {
+  padding: $space-base;
+  border-radius: $border-radius-x-large;
+  overflow: hidden;
+  background-color: $color-neutral-100;
+  box-shadow: $box-shadow-base;
+
+  > .card-image {
+    width: calc(100% + (2 * #{$space-base}));
+    margin: -$space-base;
+    margin-bottom: $space-base;
+    font-size: $font-size-x-large;
+  }
+
+  > .card-heading {
+    margin-bottom: $space-x-small;
+  }
+}
+</style>