diff --git a/contents/_includes/patterns/rating.njk b/contents/_includes/patterns/rating.njk
new file mode 100644
index 0000000..ec723d2
--- /dev/null
+++ b/contents/_includes/patterns/rating.njk
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 0820664..b33c0ae 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -93,6 +93,7 @@ eleventyExcludeFromCollections: true
{% pattern "Custom radio button" %}{% include "patterns/custom-radio-button.njk" %}{% endpattern %}
{% pattern "Input addon" %}{% include "patterns/input-addon.njk" %}{% endpattern %}
{% pattern "Radio switch" %}{% include "patterns/radio-switch.njk" %}{% endpattern %}
+ {% pattern "Rating" %}{% include "patterns/rating.njk" %}{% endpattern %}
diff --git a/contents/rating.md b/contents/rating.md
new file mode 100644
index 0000000..d755ee0
--- /dev/null
+++ b/contents/rating.md
@@ -0,0 +1,63 @@
+---
+layout: layouts/post.njk
+title: Rating
+description: Create a star rating with CSS flexbox
+keywords: css flexbox, css star rating
+---
+
+## HTML
+
+```html
+
+
+
+
+
+
+
+```
+
+## CSS
+
+```css
+.rating {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ flex-direction: row-reverse;
+}
+
+.rating__star:hover,
+.rating__star:hover ~ .rating__star {
+ color: transparent;
+}
+
+/*
+Make all previous stars selected when hover on a star
+Note that we use \`flex-direction: row-reverse\` on the container
+*/
+.rating__star:hover:before,
+.rating__star:hover ~ .rating__star:before {
+ color: #eab308;
+ content: '★';
+ left: 0;
+ position: absolute;
+}
+
+.rating__star {
+ font-size: 1.5rem;
+
+ /* Reset styles for button */
+ background-color: transparent;
+ border: transparent;
+ margin: 0 2px;
+ padding: 0;
+
+ /* Used to position the hover state */
+ position: relative;
+}
+```
+
+{% demo %}{% include "patterns/rating.njk" %}{% enddemo %}
diff --git a/pages/rating/index.tsx b/pages/rating/index.tsx
deleted file mode 100644
index 4206a9b..0000000
--- a/pages/rating/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-interface StarProps {
- isActive: boolean;
-}
-
-const Star: React.FC = ({ isActive }) => {
- return ;
-};
-
-const Details: React.FC<{}> = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`}
- css={`
- .rating {
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-
- flex-direction: row-reverse;
-
- font-size: 32px;
- }
-
- .rating__star:hover,
- .rating__star:hover ~ .rating__star {
- color: transparent;
- }
-
- /*
-Make all previous stars selected when hover on a star
-Note that we use \`flex-direction: row-reverse\` on the container
-*/
- .rating__star:hover:before,
- .rating__star:hover ~ .rating__star:before {
- color: #00449e;
- content: '\\2605';
- left: 0;
- position: absolute;
- }
-
- .rating__star {
- /* Reset styles for button */
- background-color: transparent;
- border: transparent;
- margin: 0 2px;
- padding: 0;
-
- /* Used to position the hover state */
- position: relative;
- }
- `}
- >
-
-
-
- );
-};
-
-export default Details;
diff --git a/patterns/rating/Cover.tsx b/patterns/rating/Cover.tsx
deleted file mode 100644
index f39dcd3..0000000
--- a/patterns/rating/Cover.tsx
+++ /dev/null
@@ -1,36 +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 1c12827..5ca529a 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -59,6 +59,7 @@
@import './patterns/questions-and-answers';
@import './patterns/radial-progress-bar';
@import './patterns/radio-switch';
+@import './patterns/rating';
@import './patterns/resizable-element';
@import './patterns/ribbon';
@import './patterns/separator';
diff --git a/styles/patterns/_rating.scss b/styles/patterns/_rating.scss
new file mode 100644
index 0000000..c2fc9c2
--- /dev/null
+++ b/styles/patterns/_rating.scss
@@ -0,0 +1,38 @@
+.rating {
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ flex-direction: row-reverse;
+}
+
+.rating__star:hover,
+.rating__star:hover ~ .rating__star {
+ color: transparent;
+}
+
+/*
+Make all previous stars selected when hover on a star
+Note that we use \`flex-direction: row-reverse\` on the container
+*/
+.rating__star:hover:before,
+.rating__star:hover ~ .rating__star:before {
+ color: #eab308;
+ content: '★';
+ left: 0;
+ position: absolute;
+}
+
+.rating__star {
+ font-size: 1.5rem;
+
+ /* Reset styles for button */
+ background-color: transparent;
+ border: transparent;
+ margin: 0 2px;
+ padding: 0;
+
+ /* Used to position the hover state */
+ position: relative;
+}
\ No newline at end of file