diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index a031695..e1e27e5 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -61,6 +61,7 @@ enum Pattern {
     SpinButton = 'Spin button',
     SplitNavigation = 'Split navigation',
     SplitScreen = 'Split screen',
+    StackedCards = 'Stacked cards',
     StepperInput = 'Stepper input',
     StickyFooter = 'Sticky footer',
     StickyHeader = 'Sticky header',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 3529f0b..1496eb9 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -167,6 +167,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.QuestionsAndAnswers} />
                         <CoverCard pattern={Pattern.Ribbon} />
                         <CoverCard pattern={Pattern.Separator} />
+                        <CoverCard pattern={Pattern.StackedCards} />
                         <CoverCard pattern={Pattern.Timeline} />
                         <CoverCard pattern={Pattern.VideoBackground} />
                     </div>
diff --git a/client/patterns/card/Details.tsx b/client/patterns/card/Details.tsx
index cd72c06..a724cda 100644
--- a/client/patterns/card/Details.tsx
+++ b/client/patterns/card/Details.tsx
@@ -73,7 +73,7 @@ const Details: React.FC<{}> = () => {
                 />
             </div>
 
-            <RelatedPatterns patterns={[Pattern.CardLayout]} />
+            <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.StackedCards]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/stacked-cards/Cover.tsx b/client/patterns/stacked-cards/Cover.tsx
new file mode 100644
index 0000000..374e3a0
--- /dev/null
+++ b/client/patterns/stacked-cards/Cover.tsx
@@ -0,0 +1,61 @@
+import 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: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: '#fff',
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        height: '75%',
+                        position: 'relative',
+                        width: '60%',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: '#fff',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
+                            height: '100%',
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'rotate(15deg)',
+                            width: '100%',
+                            zIndex: -1,
+                        }}
+                    />
+                    <div
+                        style={{
+                            backgroundColor: '#fff',
+                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                            borderRadius: '4px',
+                            height: '100%',
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
+                            transform: 'rotate(30deg)',
+                            width: '100%',
+                            zIndex: -1,
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/stacked-cards/Details.tsx b/client/patterns/stacked-cards/Details.tsx
new file mode 100644
index 0000000..d60044e
--- /dev/null
+++ b/client/patterns/stacked-cards/Details.tsx
@@ -0,0 +1,102 @@
+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';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Stacked cards">
+            <Helmet>
+                <meta name="description" content="Create stacked cards with CSS" />
+                <meta name="keywords" content="css card, css stacked cards, css transform rotate" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: '#fff',
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    height: '250px',
+                                    position: 'relative',
+                                    width: '200px',
+                                }}
+                            >
+                                {
+                                    Array(5).fill(0).map((_, index) => {
+                                        return (
+                                            <div
+                                                key={index}
+                                                style={{
+                                                    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>
+                    )}
+                    source={`
+<div style="
+    /* Used to position the stacked cards */
+    position: relative;
+">
+    <!-- Repeat if you want to have more cards -->
+    <div style="
+        /* Absolute position */
+        left: 0px;
+        position: absolute;
+        top: 0px;
+
+        /* Take full size */
+        height: 100%;
+        width: 100%;
+
+        /* Displayed under the container */
+        z-index: -1;
+
+        /* Background and border colors */
+        background-color: rgb(255, 255, 255);
+        border: 1px solid rgba(0, 0, 0, 0.3);
+
+        /* Rotate it. Change the number of degrees for the following cards */
+        transform: rotate(5deg);
+    " />
+
+    <!-- Main card's content -->
+    ...
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.Card]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index b34314c..0ce492d 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -62,6 +62,7 @@
     <url><loc>https://csslayout.io/patterns/spin-button</loc></url>
     <url><loc>https://csslayout.io/patterns/split-navigation</loc></url>
     <url><loc>https://csslayout.io/patterns/split-screen</loc></url>
+    <url><loc>https://csslayout.io/patterns/stacked-cards</loc></url>
     <url><loc>https://csslayout.io/patterns/stepper-input</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>