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,7 +20,6 @@ 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
 html={`
 <div class="card">
@@ -82,9 +81,8 @@ css={`
                     </div>
                 </div>
             </BrowserFrame>
-            </div>
 
-            <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,7 +18,6 @@ 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
 html={`
 <div class="container">
@@ -101,9 +100,8 @@ css={`
                     </div>
                 </div>
             </BrowserFrame>
-            </div>
 
-            <RelatedPatterns patterns={[Pattern.Card, Pattern.ThreeDimensionsCard]} />
+            <RelatedPatterns patterns={[Pattern.Card, Pattern.LayeredCard, Pattern.ThreeDimensionsCard]} />
         </DetailsLayout>
     );
 };

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

@@ -19,7 +19,6 @@ 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
 html={`
 <div class="three-dimensions-card">
@@ -90,9 +89,8 @@ css={`
                     </div>
                 </div>
             </BrowserFrame>
-            </div>
 
-            <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>