Add card

client/App.jsx

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import Home from './Home';
 import Badge from './layouts/badge/Details';
 import ButtonWithIcon from './layouts/button-with-icon/Details';
+import Card from './layouts/card/Details';
 import Centering from './layouts/centering/Details';
 import FixedAtCorner from './layouts/fixed-at-corner/Details';
 import HolyGrail from './layouts/holy-grail/Details';
@@ -26,6 +27,7 @@ const App = () => {
                 <Route exact={true} path='/'><Home /></Route>
                 <Route exact={true} path='/badge'><Badge /></Route>
                 <Route exact={true} path='/button-with-icon'><ButtonWithIcon /></Route>
+                <Route exact={true} path='/card'><Card /></Route>
                 <Route exact={true} path='/centering'><Centering /></Route>
                 <Route exact={true} path='/fixed-at-corner'><FixedAtCorner /></Route>
                 <Route exact={true} path='/holy-grail'><HolyGrail /></Route>

client/Home.jsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 
 import BadgeCover from './layouts/badge/Cover';
 import ButtonWithIconCover from './layouts/button-with-icon/Cover';
+import CardCover from './layouts/card/Cover';
 import CenterCover from './layouts/centering/Cover';
 import FixedAtCornerCover from './layouts/fixed-at-corner/Cover';
 import HolyGrailCover from './layouts/holy-grail/Cover';
@@ -90,6 +91,12 @@ const Home = () => {
                             <h4 className="f4 mv0 pt3">Button with icon</h4>
                         </Link>
                     </div>
+                    <div className="pa1 w-20">
+                        <Link to="/card" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
+                            <CardCover />
+                            <h4 className="f4 mv0 pt3">Card</h4>
+                        </Link>
+                    </div>
                     <div className="pa1 w-20">
                         <Link to="/centering" className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3">
                             <CenterCover />

client/layouts/card/Cover.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Cover = () => {
+    return (
+        <Frame>
+            <div className="flex flex-column h-100 pa2">
+                <div className="w-100 mb2">
+                    <Rectangle height={32} />
+                </div>
+                <div style={{ flex: 1 }}>
+                    <div className="w-100 mb1"><Line /></div>
+                    <div className="w-100 mb1"><Line /></div>
+                    <div className="w-80 mb1"><Line /></div>
+                    <div className="w-60 mb2"><Line /></div>
+                    <div className="w-30">
+                        <Rectangle height={8} />
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/layouts/card/Details.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import DetailsLayout from '../../DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import SampleCode from '../../SampleCode';
+import useDocumentTitle from '../../hooks/useDocumentTitle';
+
+const Details = () => {
+    useDocumentTitle('CSS Layout ∙ Card');
+
+    return (
+        <DetailsLayout>
+            <h1 className="f1 tc">Card</h1>
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column items-center justify-center pa3">
+                        <div className="b--black-30 ba br2 flex flex-column w5">
+                            <Rectangle height={150} />
+                            <div className="pa3" style={{ flex: 1 }}>
+                                <div className="mb3"><Block numberOfBlocks={15} /></div>
+                                <div className="w4">
+                                    <Rectangle height={32} />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="
+    display: flex;
+    flex-direction: column;
+">
+    <!-- Cover -->
+    <div style="
+        height: 150px;
+        width: 100%;
+    ">
+        ...
+    </div>
+
+    <!-- Content -->
+    <div style="
+        /* Take available height */
+        flex: 1;
+    ">
+        ...
+    </div>
+    ...
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;