diff --git a/contents/_includes/patterns/pricing-table.njk b/contents/_includes/patterns/pricing-table.njk new file mode 100644 index 0000000..d0bf0a9 --- /dev/null +++ b/contents/_includes/patterns/pricing-table.njk @@ -0,0 +1,12 @@ +
+
+ {% circle "md" %} + {% lines "hor", 3 %} + {% rectangle "hor", "sm", 100 %} +
+
+ {% circle "md" %} + {% lines "hor", 6 %} + {% rectangle "hor", "sm", 100 %} +
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 17aeb88..3fa95bd 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -205,6 +205,12 @@ eleventyExcludeFromCollections: true
Price tag
+
+ +
{% include "patterns/pricing-table.njk" %}
+
Pricing table
+ +
{% include "patterns/triangle-buttons.njk" %}
diff --git a/contents/pricing-table.md b/contents/pricing-table.md new file mode 100644 index 0000000..9f43fcf --- /dev/null +++ b/contents/pricing-table.md @@ -0,0 +1,63 @@ +--- +layout: layouts/post.njk +title: Pricing table +description: Create a pricing table with CSS flexbox +keywords: css flexbox, css pricing table +--- + +## HTML + +```html +
+ +
+ + ... + + + ... + + + ... + + + ... +
+ + + ... +
+``` + +## CSS + +```css +.pricing-table { + /* Content is centered horizontally */ + align-items: center; + display: flex; + justify-content: center; +} + +.pricing-table__column { + /* Content is centered vertically */ + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + + /* Make all columns have the same width */ + flex: 1; + + /* OPTIONAL: Space between columns */ + margin: 0 0.5rem; + + /* OPTIONAL: Border */ + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 0.25rem; +} +``` + +{% demo %} +{% include "patterns/pricing-table.njk" %} +{% enddemo %} diff --git a/pages/pricing-table/index.tsx b/pages/pricing-table/index.tsx deleted file mode 100644 index 07ecabe..0000000 --- a/pages/pricing-table/index.tsx +++ /dev/null @@ -1,186 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; -import { Spacer } from '@1milligram/design'; - -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import Block from '../../placeholders/Block'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Circle from '../../placeholders/Circle'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - -
- You can{' '} - - add - {' '} - - a ribbon - {' '} - to indicate the most popular option. -
- - -
- - ... - - - ... - - - ... - - - ... -
- - - ... -
-`} - css={` - .container { - /* Content is centered horizontally */ - align-items: center; - display: flex; - justify-content: center; - } - - .container__column { - /* Content is centered vertically */ - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - - /* Make all columns have the same width */ - flex: 1; - - /* OPTIONAL: Space between columns */ - margin: 0 8px; - - /* OPTIONAL: Border */ - border: 1px solid rgba(0, 0, 0, 0.3); - border-radius: 4px; - } - `} - > -
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
- - - - - ); -}; - -export default Details; diff --git a/patterns/pricing-table/Cover.tsx b/patterns/pricing-table/Cover.tsx deleted file mode 100644 index f15bc9e..0000000 --- a/patterns/pricing-table/Cover.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import * as React from 'react'; - -import Circle from '../../placeholders/Circle'; -import Frame from '../../placeholders/Frame'; -import Line from '../../placeholders/Line'; -import Rectangle from '../../placeholders/Rectangle'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
- -
-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
-
- -
-
- -
-
- -
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 9ab0cea..496be0a 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -43,6 +43,7 @@ @import './patterns/media-object'; @import './patterns/overlay-play-button'; @import './patterns/price-tag'; +@import './patterns/pricing-table'; @import './patterns/triangle-buttons'; @import './patterns/video-background'; @import './patterns/voting'; diff --git a/styles/patterns/_pricing-table.scss b/styles/patterns/_pricing-table.scss new file mode 100644 index 0000000..b51b7ea --- /dev/null +++ b/styles/patterns/_pricing-table.scss @@ -0,0 +1,11 @@ +.pricing-table { + align-items: center; + display: flex; + justify-content: center; +} +.pricing-table__column { + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 0.25rem; + margin: 0 0.25rem; + padding: 0.25rem; +} \ No newline at end of file