diff --git a/contents/_includes/patterns/stacked-cards.njk b/contents/_includes/patterns/stacked-cards.njk new file mode 100644 index 0000000..8ff1104 --- /dev/null +++ b/contents/_includes/patterns/stacked-cards.njk @@ -0,0 +1,5 @@ +
+
+
+
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 78c37cc..693c7db 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -235,6 +235,12 @@ eleventyExcludeFromCollections: true
Separator
+
+ +
{% include "patterns/stacked-cards.njk" %}
+
Stacked cards
+ +
{% include "patterns/video-background.njk" %}
diff --git a/contents/stacked-cards.md b/contents/stacked-cards.md new file mode 100644 index 0000000..766dff2 --- /dev/null +++ b/contents/stacked-cards.md @@ -0,0 +1,55 @@ +--- +layout: layouts/post.njk +title: Stacked cards +description: Create stacked cards with CSS +keywords: css card, css stacked cards, css transform rotate +--- + +## HTML + +```html +
+ +
+ + + ... +
+``` + +## CSS + +```css +.stacked-cards { + /* Used to position the stacked cards */ + position: relative; + + border: 1px solid #d1d5db; + border-radius: 0.25rem; +} + +.stacked-cards__card { + /* 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 #d1d5db; + + /* Rotate it. Change the number of degrees for the following cards */ + transform: rotate(5deg); +} +``` + +{% demo %} +{% include "patterns/stacked-cards.njk" %} +{% enddemo %} diff --git a/pages/stacked-cards/index.tsx b/pages/stacked-cards/index.tsx deleted file mode 100644 index 791bae8..0000000 --- a/pages/stacked-cards/index.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { Spacer } from '@1milligram/design'; - -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - -
- - - ... -
-`} - css={` - .container { - /* Used to position the stacked cards */ - position: relative; - } - - .container__card { - /* 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); - } - `} - > -
-
- {Array(5) - .fill(0) - .map((_, index) => { - return ( -
- ); - })} -
-
- - - - - - ); -}; - -export default Details; diff --git a/patterns/stacked-cards/Cover.tsx b/patterns/stacked-cards/Cover.tsx deleted file mode 100644 index 1a17b33..0000000 --- a/patterns/stacked-cards/Cover.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index b2190fa..f651c73 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -48,6 +48,7 @@ @import './patterns/questions-and-answers'; @import './patterns/ribbon'; @import './patterns/separator'; +@import './patterns/stacked-cards'; @import './patterns/triangle-buttons'; @import './patterns/video-background'; @import './patterns/voting'; diff --git a/styles/patterns/_stacked-cards.scss b/styles/patterns/_stacked-cards.scss new file mode 100644 index 0000000..34e8319 --- /dev/null +++ b/styles/patterns/_stacked-cards.scss @@ -0,0 +1,40 @@ +.stacked-cards { + /* Used to position the stacked cards */ + position: relative; + + /* Demo */ + border: 1px solid #d1d5db; + border-radius: 0.25rem; + height: 6rem; + width: 6rem; +} + +.stacked-cards__card { + /* 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 #d1d5db; +} +.stacked-cards__card--1st { + /* Rotate it. Change the number of degrees for the following cards */ + transform: rotate(5deg); +} +.stacked-cards__card--2nd { + /* Rotate it. Change the number of degrees for the following cards */ + transform: rotate(10deg); +} +.stacked-cards__card--3rd { + /* Rotate it. Change the number of degrees for the following cards */ + transform: rotate(15deg); +} \ No newline at end of file