diff --git a/contents/_includes/patterns/corner-ribbon.njk b/contents/_includes/patterns/corner-ribbon.njk new file mode 100644 index 0000000..3d3c3ef --- /dev/null +++ b/contents/_includes/patterns/corner-ribbon.njk @@ -0,0 +1,6 @@ +
+
+
+
+
+
\ No newline at end of file diff --git a/contents/corner-ribbon.md b/contents/corner-ribbon.md new file mode 100644 index 0000000..7038d37 --- /dev/null +++ b/contents/corner-ribbon.md @@ -0,0 +1,65 @@ +--- +layout: layouts/post.njk +title: Corner ribbon +description: Create a corner ribbon with CSS flexbox +keywords: css flexbox, css ribbon +--- + +## HTML + +```html +
+ +
+ +
+
+
+
+``` + +## CSS + +```css +.corner-ribbon { + position: relative; +} + +.corner-ribbon__inner { + /* Displayed at the top left corner */ + left: 0px; + position: absolute; + top: 0px; + + /* Size */ + height: 4rem; + width: 4rem; + + /* Hide the part of its children which is displayed outside */ + overflow: hidden; +} + +.corner-ribbon__ribbon { + /* Position */ + left: 1rem; + position: absolute; + top: 1rem; + + /* Size */ + height: 1.5rem; + width: 5.656rem; + + /* Displayed diagonally */ + transform: translate(-38px, -8px) rotate(-45deg); + + /* Background color */ + background-color: rgba(0, 0, 0, 0.3); + + /* Centerize the text content */ + text-align: center; +} +``` + +{% demo %} +{% include "patterns/corner-ribbon.njk" %} +{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index 42dea6d..d5bb996 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -79,6 +79,12 @@ eleventyExcludeFromCollections: true
Cookie banner
+
+ +
{% include "patterns/corner-ribbon.njk" %}
+
Corner ribbon
+ +
diff --git a/pages/corner-ribbon/index.tsx b/pages/corner-ribbon/index.tsx deleted file mode 100644 index 702b040..0000000 --- a/pages/corner-ribbon/index.tsx +++ /dev/null @@ -1,204 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; -import { Heading, 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 { - position: relative; - } - - .container__wrapper { - /* Displayed at the top left corner */ - left: 0px; - position: absolute; - top: 0px; - - /* Size */ - height: 100px; - width: 100px; - - /* Hide the part of its children which is displayed outside */ - overflow: hidden; - } - - .container__ribbon { - /* Position */ - left: -64px; - position: absolute; - top: 32px; - - /* Size */ - height: 24px; - width: 206px; - - /* Displayed diagonally */ - transform: rotate(-45deg); - - /* Background color */ - background-color: rgba(0, 0, 0, 0.3); - - /* Centerize the text content */ - text-align: center; - } - `} - > -
-
-
-
-
-
-
- - - - -
- Use cases - -
-
- You can add a ribbon to a{' '} - - pricing table - {' '} - to indicate the most popular option. -
- -
-
-
-
-
- Popular -
-
-
-
-
-
-
- - - - - ); -}; - -export default Details; diff --git a/patterns/corner-ribbon/Cover.tsx b/patterns/corner-ribbon/Cover.tsx deleted file mode 100644 index 6a7793b..0000000 --- a/patterns/corner-ribbon/Cover.tsx +++ /dev/null @@ -1,56 +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 36acacf..0341c65 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -22,6 +22,7 @@ @import './patterns/color-swatch'; @import './patterns/concave-corners'; @import './patterns/cookie-banner'; +@import './patterns/corner-ribbon'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_corner-ribbon.scss b/styles/patterns/_corner-ribbon.scss new file mode 100644 index 0000000..2c971c0 --- /dev/null +++ b/styles/patterns/_corner-ribbon.scss @@ -0,0 +1,41 @@ +.corner-ribbon { + position: relative; + border: 1px solid rgba(0,0,0,.3); + border-radius: 0.25rem; + height: 100%; + width: 100%; +} + +.corner-ribbon__inner { + /* Displayed at the top left corner */ + left: 0px; + position: absolute; + top: 0px; + + /* Size */ + height: 4rem; + width: 4rem; + + /* Hide the part of its children which is displayed outside */ + overflow: hidden; +} + +.corner-ribbon__ribbon { + /* Position */ + left: 1rem; + position: absolute; + top: 1rem; + + /* Size */ + height: 1.5rem; + width: 5.656rem; + + /* Displayed diagonally */ + transform: translate(-38px, -8px) rotate(-45deg); + + /* Background color */ + background-color: rgba(0, 0, 0, 0.3); + + /* Centerize the text content */ + text-align: center; +} \ No newline at end of file