UI structure (basic cards + css modules setup)

src/components/UI/card/Card.css

@@ -0,0 +1,23 @@
+.card {
+  composes: base from "../theme.css";
+  composes: container from "../theme.css";
+  composes: rounded from "../theme.css";
+  composes: depth from "../theme.css";
+  overflow: hidden;
+}
+
+.card > *:not(iframe, video, img, header, footer) {
+  margin: 0 10px;
+}
+
+.card > *:not(iframe, video, img, header, footer):first-child {
+  margin-top: 10px;
+}
+
+.card > *:not(iframe, video, img, header, footer):last-child {
+  margin-bottom: 10px;
+}
+
+.card > iframe, .card > video, .card > img {
+  max-width: 100%;
+}

src/components/UI/card/Card.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import styles from './Card.css'
+
+
+export default function Card({style, children}) {
+  return <div className={styles.card} style={style}>{children}</div>
+}

src/components/UI/index.js

@@ -0,0 +1 @@
+export { default as Card } from './card/Card'

src/components/UI/theme.css

@@ -0,0 +1,26 @@
+:root {
+  --defaultColor: #333;
+  --backgroundColor: #fff;
+  --shadowColor: rgba(0, 0, 0, 0.25);
+  --successColor: #1c7;
+  --warningColor: #fa0;
+  --errorColor: #f52;
+}
+
+.base {
+  box-sizing: border-box;
+}
+
+.container {
+  margin: 10px;
+  color: var(--defaultColor);
+  background-color: var(--backgroundColor);
+}
+
+.rounded {
+  border-radius: 6px;
+}
+
+.depth {
+  box-shadow: 0px 1px 2px 0px var(--shadowColor);
+}