Add card layout

client/constants/Pattern.ts

@@ -6,6 +6,7 @@ enum Pattern {
     Breadcrumb = 'Breadcrumb',
     ButtonWithIcon = 'Button with icon',
     Card = 'Card',
+    CardLayout = 'Card layout',
     Centering = 'Centering',
     Chip = 'Chip',
     CircularNavigation = 'Circular navigation',

client/pages/ExplorePage.tsx

@@ -82,6 +82,7 @@ const ExplorePage = () => {
                     <Heading title="Layout" />
 
                     <div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
+                        <CoverCard pattern={Pattern.CardLayout} />
                         <CoverCard pattern={Pattern.HolyGrail} />
                         <CoverCard pattern={Pattern.SameHeightColumns} />
                         <CoverCard pattern={Pattern.Sidebar} />

client/patterns/card-layout/Cover.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div style={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
+                    {
+                        Array(9).fill(0).map((_, index) => {
+                            return (
+                                <div key={index} style={{ flexBasis: '33%', padding: '4px' }}>
+                                    <Rectangle height={20} />
+                                </div>
+                            );
+                        })
+                    }
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/card-layout/Details.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Card layout">
+            <Helmet>
+                <meta name="description" content="Create a card layout with CSS flexbox" />
+                <meta name="keywords" content="css card layout, css flexbox, css layout" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    flexWrap: 'wrap',
+                                    margin: '0 -8px',
+                                    width: '60%',
+                                }}
+                            >
+                                {
+                                    Array(10).fill(0).map((_, index) => {
+                                        return (
+                                            <div key={index} style={{ flexBasis: '25%', marginBottom: '24px', padding: '0 8px' }}>
+                                                <Rectangle height={80} />
+                                            </div>
+                                        );
+                                    })
+                                }
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    display: flex;
+
+    /* Put a card in the next row when previous cards take all width */
+    flex-wrap: wrap;
+
+    margin-left: -8px;
+    margin-right: -8px;
+">
+    <!-- A card with given width -->
+    <div style="
+        /* There will be 4 cards per row */
+        flex-basis: 25%;
+
+        padding-left: 8px;
+        padding-right: 8px;
+    ">
+        ...
+    </div>
+
+    <!-- Repeat other cards -->
+    ...
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.Card, Pattern.SimpleGrid]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/card/Details.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -70,6 +72,8 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+
+            <RelatedPatterns patterns={[Pattern.CardLayout]} />
         </DetailsLayout>
     );
 };

client/patterns/simple-grid/Details.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -124,6 +126,8 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+
+            <RelatedPatterns patterns={[Pattern.CardLayout]} />
         </DetailsLayout>
     );
 };

public/sitemap.xml

@@ -7,6 +7,7 @@
     <url><loc>https://csslayout.io/patterns/breadcrumb</loc></url>
     <url><loc>https://csslayout.io/patterns/button-with-icon</loc></url>
     <url><loc>https://csslayout.io/patterns/card</loc></url>
+    <url><loc>https://csslayout.io/patterns/card-layout</loc></url>
     <url><loc>https://csslayout.io/patterns/centering</loc></url>
     <url><loc>https://csslayout.io/patterns/chip</loc></url>
     <url><loc>https://csslayout.io/patterns/circular-navigation</loc></url>