Add layered card pattern

client/constants/Pattern.ts

@@ -43,6 +43,7 @@ enum Pattern {
     InitialAvatar = 'Initial avatar',
     InputAddon = 'Input addon',
     KeyboardShortcut = 'Keyboard shortcut',
+    LayeredCard = 'Layered card',
     LinedPaper = 'Lined paper',
     MediaObject = 'Media object',
     MegaMenu = 'Mega menu',

client/pages/ExplorePage.tsx

@@ -125,6 +125,7 @@ const ExplorePage = () => {
                                 <CoverCard pattern={Pattern.FullBackground} />
                                 <CoverCard pattern={Pattern.InitialAvatar} />
                                 <CoverCard pattern={Pattern.KeyboardShortcut} />
+                                <CoverCard pattern={Pattern.LayeredCard} />
                                 <CoverCard pattern={Pattern.LinedPaper} />
                                 <CoverCard pattern={Pattern.MediaObject} />
                                 <CoverCard pattern={Pattern.OverlayPlayButton} />

client/patterns/card/Details.tsx

@@ -20,8 +20,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a card with CSS flexbox" />
                 <meta name="keywords" content="css card, css flexbox" />
             </Helmet>
-            <div className='p-8 pb-20'>
+            <BrowserFrame
-                <BrowserFrame
 html={`
 <div class="card">
     <!-- Cover -->
@@ -52,39 +51,38 @@ css={`
     flex: 1;
 }
 `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '16px',
+                    }}
                 >
                     <div
                         style={{
-                            alignItems: 'center',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '8px',
                             display: 'flex',
                             flexDirection: 'column',
-                            height: '100%',
+                            width: '256px',
-                            justifyContent: 'center',
-                            padding: '16px',
                         }}
                     >
-                        <div
+                        <Rectangle height={150} />
-                            style={{
+                        <div style={{ flex: 1, padding: '16px' }}>
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                            <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
-                                borderRadius: '8px',
+                            <div style={{ width: '128px' }}>
-                                display: 'flex',
+                                <Rectangle height={32} />
-                                flexDirection: 'column',
-                                width: '256px',
-                            }}
-                        >
-                            <Rectangle height={150} />
-                            <div style={{ flex: 1, padding: '16px' }}>
-                                <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
-                                <div style={{ width: '128px' }}>
-                                    <Rectangle height={32} />
-                                </div>
                             </div>
                         </div>
                     </div>
-                </BrowserFrame>
+                </div>
-            </div>
+            </BrowserFrame>
 
-            <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.StackedCards, Pattern.ThreeDimensionsCard]} />
+            <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.LayeredCard, Pattern.StackedCards, Pattern.ThreeDimensionsCard]} />
         </DetailsLayout>
     );
 };

client/patterns/layered-card/Cover.tsx

@@ -0,0 +1,52 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '1.5rem',
+                    position: 'relative',
+                }}
+            >
+                <div
+                    style={{
+                        background: '#FFF',
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        height: '3rem',
+                        left: '50%',
+                        position: 'absolute',
+                        top: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        width: '3rem',
+                        zIndex: 2,
+                    }}
+                />
+                <div
+                    style={{
+                        background: 'rgba(0, 0, 0, 0.3)',
+                        height: '3rem',
+                        left: '50%',
+                        position: 'absolute',
+                        top: '50%',
+                        transform: 'translate(calc(-50% + 0.5rem), calc(-50% + 0.5rem))',
+                        width: '3rem',
+                    }}
+                />
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/layered-card/Details.tsx

@@ -0,0 +1,79 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as 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 './styles.css';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout pattern={Pattern.LayeredCard}>
+            <Helmet>
+                <meta name="description" content="Create a layered card with CSS" />
+                <meta name="keywords" content="css layered card" />
+            </Helmet>
+            <BrowserFrame
+html={`
+<div class="layered-card">
+    ...
+</div>
+`}
+css={`
+.layered-card {
+    position: relative;
+}
+
+.layered-card::before {
+    background: rgba(0, 0, 0, 0.3);
+    content: '';
+    
+    /* Position */
+    top: 0;
+    left: 0;
+    position: absolute;
+    transform: translate(1rem, 1rem);
+
+    /* Size */
+    height: 100%;
+    width: 100%;
+
+    /* Display under the main content */
+    z-index: -1;
+}
+`}
+                >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
+                >
+                    <div className="layered-card">
+                        <div
+                            style={{
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                background: '#FFF',
+                                height: '12rem',
+                                width: '12rem',
+                            }}
+                        />
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <RelatedPatterns patterns={[Pattern.Card, Pattern.StackedCards, Pattern.ThreeDimensionsCard]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/layered-card/styles.css

@@ -0,0 +1,26 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.layered-card {
+    position: relative;
+}
+
+.layered-card::before {
+    background: rgba(0, 0, 0, 0.3);
+    content: '';
+    
+    /* Position */
+    top: 0;
+    left: 0;
+    position: absolute;
+    transform: translate(1rem, 1rem);
+
+    /* Size */
+    height: 100%;
+    width: 100%;
+
+    /* Display under the main content */
+    z-index: -1;
+}

client/patterns/stacked-cards/Details.tsx

@@ -18,8 +18,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create stacked cards with CSS" />
                 <meta name="keywords" content="css card, css stacked cards, css transform rotate" />
             </Helmet>
-            <div className='p-8 pb-20'>
+            <BrowserFrame
-                <BrowserFrame
 html={`
 <div class="container">
     <!-- Repeat if you want to have more cards -->
@@ -56,54 +55,53 @@ css={`
     transform: rotate(5deg);
 }
 `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
                     <div
                         style={{
-                            alignItems: 'center',
+                            backgroundColor: '#fff',
-                            display: 'flex',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                            flexDirection: 'column',
+                            borderRadius: '4px',
-                            height: '100%',
+                            height: '250px',
-                            justifyContent: 'center',
+                            position: 'relative',
-                            padding: '8px',
+                            width: '200px',
                         }}
                     >
-                        <div
+                        {
-                            style={{
+                            Array(5).fill(0).map((_, index) => {
-                                backgroundColor: '#fff',
+                                return (
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    <div
-                                borderRadius: '4px',
+                                        key={index}
-                                height: '250px',
+                                        style={{
-                                position: 'relative',
+                                            backgroundColor: '#fff',
-                                width: '200px',
+                                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                            }}
+                                            borderRadius: '4px',
-                        >
+                                            height: '100%',
-                            {
+                                            left: 0,
-                                Array(5).fill(0).map((_, index) => {
+                                            position: 'absolute',
-                                    return (
+                                            top: 0,
-                                        <div
+                                            transform: `rotate(${5 * (index + 1)}deg)`,
-                                            key={index}
+                                            width: '100%',
-                                            style={{
+                                            zIndex: -1,
-                                                backgroundColor: '#fff',
+                                        }}
-                                                border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    />
-                                                borderRadius: '4px',
+                                );
-                                                height: '100%',
+                            })
-                                                left: 0,
+                        }
-                                                position: 'absolute',
-                                                top: 0,
-                                                transform: `rotate(${5 * (index + 1)}deg)`,
-                                                width: '100%',
-                                                zIndex: -1,
-                                            }}
-                                        />
-                                    );
-                                })
-                            }
-                        </div>
                     </div>
-                </BrowserFrame>
+                </div>
-            </div>
+            </BrowserFrame>
 
-            <RelatedPatterns patterns={[Pattern.Card, Pattern.ThreeDimensionsCard]} />
+            <RelatedPatterns patterns={[Pattern.Card, Pattern.LayeredCard, Pattern.ThreeDimensionsCard]} />
         </DetailsLayout>
     );
 };

client/patterns/three-dimensions-card/Details.tsx

@@ -19,8 +19,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="description" content="Create a 3D card with CSS" />
                 <meta name="keywords" content="css 3D card" />
             </Helmet>
-            <div className='p-8 pb-20'>
+            <BrowserFrame
-                <BrowserFrame
 html={`
 <div class="three-dimensions-card">
     ...
@@ -69,30 +68,29 @@ css={`
     width: 100%;
 }
 `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
-                    <div
+                    <div className="three-dimensions-card">
-                        style={{
+                        <div
-                            alignItems: 'center',
+                            style={{
-                            display: 'flex',
+                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                            height: '100%',
+                                height: '8rem',
-                            justifyContent: 'center',
+                                width: '16rem',
-                            padding: '8px',
+                            }}
-                        }}
+                        />
-                    >
-                        <div className="three-dimensions-card">
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '8rem',
-                                    width: '16rem',
-                                }}
-                            />
-                        </div>
                     </div>
-                </BrowserFrame>
+                </div>
-            </div>
+            </BrowserFrame>
 
-            <RelatedPatterns patterns={[Pattern.Card, Pattern.StackedCards]} />
+            <RelatedPatterns patterns={[Pattern.Card, Pattern.LayeredCard, Pattern.StackedCards]} />
         </DetailsLayout>
     );
 };

public/sitemap.xml

@@ -39,6 +39,7 @@
     <url><loc>https://csslayout.io/patterns/initial-avatar</loc></url>
     <url><loc>https://csslayout.io/patterns/input-addon</loc></url>
     <url><loc>https://csslayout.io/patterns/keyboard-shortcut</loc></url>
+    <url><loc>https://csslayout.io/patterns/layered-card</loc></url>
     <url><loc>https://csslayout.io/patterns/lined-paper</loc></url>
     <url><loc>https://csslayout.io/patterns/media-object</loc></url>
     <url><loc>https://csslayout.io/patterns/mega-menu</loc></url>