From 1c3c6ea8d51792d4526a73cfe2912d16c5fbbd86 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Tue, 30 Mar 2021 22:50:36 +0700
Subject: [PATCH] Show cover at top

---
 client/index.css                                |  7 ++-----
 client/layouts/DetailsLayout.tsx                | 17 +++++++++++------
 client/pages/HomePage.tsx                       |  1 -
 client/patterns/accordion/Details.tsx           |  2 +-
 client/patterns/arrow-buttons/Details.tsx       |  2 +-
 client/patterns/avatar-list/Details.tsx         |  2 +-
 client/patterns/avatar/Details.tsx              |  2 +-
 client/patterns/badge/Details.tsx               |  2 +-
 client/patterns/breadcrumb/Details.tsx          |  3 ++-
 client/patterns/button-with-icon/Details.tsx    |  3 ++-
 client/patterns/card-layout/Details.tsx         |  2 +-
 client/patterns/card/Details.tsx                |  2 +-
 client/patterns/centering/Details.tsx           |  3 ++-
 client/patterns/chip/Details.tsx                |  2 +-
 client/patterns/circular-navigation/Details.tsx |  3 ++-
 client/patterns/close-button/Details.tsx        |  2 +-
 client/patterns/cookie-banner/Details.tsx       |  2 +-
 client/patterns/corner-ribbon/Details.tsx       |  2 +-
 client/patterns/curved-background/Details.tsx   |  2 +-
 .../patterns/custom-checkbox-button/Details.tsx |  2 +-
 client/patterns/custom-radio-button/Details.tsx |  2 +-
 client/patterns/diagonal-section/Details.tsx    |  2 +-
 client/patterns/docked-at-corner/Details.tsx    |  2 +-
 client/patterns/dot-leader/Details.tsx          |  2 +-
 client/patterns/dot-navigation/Details.tsx      |  3 ++-
 client/patterns/drawer/Details.tsx              |  3 ++-
 client/patterns/drop-area/Details.tsx           |  3 ++-
 client/patterns/drop-cap/Details.tsx            |  3 ++-
 client/patterns/dropdown/Details.tsx            |  2 +-
 client/patterns/fading-long-section/Details.tsx |  3 ++-
 client/patterns/feature-comparison/Details.tsx  |  2 +-
 client/patterns/feature-list/Details.tsx        |  2 +-
 client/patterns/fixed-at-corner/Details.tsx     |  2 +-
 client/patterns/fixed-at-side/Details.tsx       |  2 +-
 client/patterns/floating-label/Details.tsx      |  3 ++-
 client/patterns/full-background/Details.tsx     |  2 +-
 client/patterns/full-screen-menu/Details.tsx    |  3 ++-
 client/patterns/holy-grail/Details.tsx          |  3 ++-
 client/patterns/initial-avatar/Details.tsx      |  2 +-
 client/patterns/input-addon/Details.tsx         |  3 ++-
 client/patterns/keyboard-shortcut/Details.tsx   |  3 ++-
 client/patterns/lined-paper/Details.tsx         |  3 ++-
 client/patterns/media-object/Details.tsx        |  3 ++-
 client/patterns/mega-menu/Details.tsx           |  2 +-
 client/patterns/menu/Details.tsx                |  2 +-
 client/patterns/modal/Details.tsx               |  3 ++-
 client/patterns/nested-dropdowns/Details.tsx    |  2 +-
 client/patterns/notification/Details.tsx        |  3 ++-
 client/patterns/overlay-play-button/Details.tsx |  2 +-
 client/patterns/pagination/Details.tsx          |  3 ++-
 client/patterns/popover-arrow/Details.tsx       |  2 +-
 client/patterns/presence-indicator/Details.tsx  |  2 +-
 .../patterns/previous-next-buttons/Details.tsx  |  3 ++-
 client/patterns/pricing-table/Details.tsx       |  2 +-
 client/patterns/progress-bar/Details.tsx        |  3 ++-
 client/patterns/property-list/Details.tsx       |  2 +-
 .../patterns/questions-and-answers/Details.tsx  |  2 +-
 client/patterns/radial-progress-bar/Details.tsx |  3 ++-
 client/patterns/radio-button-group/Details.tsx  |  2 +-
 client/patterns/radio-switch/Details.tsx        |  2 +-
 client/patterns/rating/Details.tsx              |  3 ++-
 client/patterns/resizable-element/Details.tsx   |  3 ++-
 client/patterns/ribbon/Details.tsx              |  2 +-
 client/patterns/same-height-columns/Details.tsx |  3 ++-
 client/patterns/search-box/Details.tsx          |  3 ++-
 client/patterns/separator/Details.tsx           |  3 ++-
 client/patterns/sidebar/Details.tsx             |  3 ++-
 client/patterns/simple-grid/Details.tsx         |  2 +-
 client/patterns/slider/Details.tsx              |  3 ++-
 client/patterns/spin-button/Details.tsx         |  2 +-
 client/patterns/split-navigation/Details.tsx    |  2 +-
 client/patterns/split-screen/Details.tsx        |  3 ++-
 client/patterns/stacked-cards/Details.tsx       |  2 +-
 client/patterns/stamp-border/Details.tsx        |  3 ++-
 client/patterns/statistic/Details.tsx           |  3 ++-
 client/patterns/status-light/Details.tsx        |  3 ++-
 client/patterns/stepper-input/Details.tsx       |  2 +-
 client/patterns/sticky-footer/Details.tsx       |  3 ++-
 client/patterns/sticky-header/Details.tsx       |  2 +-
 client/patterns/sticky-sections/Details.tsx     |  2 +-
 client/patterns/sticky-table-column/Details.tsx |  2 +-
 .../patterns/sticky-table-headers/Details.tsx   |  2 +-
 client/patterns/switch/Details.tsx              |  2 +-
 client/patterns/tab/Details.tsx                 |  3 ++-
 client/patterns/teardrop/Details.tsx            |  3 ++-
 client/patterns/timeline/Details.tsx            |  3 ++-
 .../toggle-password-visibility/Details.tsx      |  3 ++-
 client/patterns/tooltip/Details.tsx             |  2 +-
 client/patterns/triangle-buttons/Details.tsx    |  2 +-
 client/patterns/upload-button/Details.tsx       |  3 ++-
 client/patterns/validation-icon/Details.tsx     |  3 ++-
 client/patterns/video-background/Details.tsx    |  2 +-
 client/patterns/watermark/Details.tsx           |  3 ++-
 client/patterns/wizard/Details.tsx              |  3 ++-
 94 files changed, 146 insertions(+), 103 deletions(-)

diff --git a/client/index.css b/client/index.css
index 6b12e69..e9f5cff 100644
--- a/client/index.css
+++ b/client/index.css
@@ -18,10 +18,6 @@ a {
     text-decoration: none;
 }
 
-pre[class*="language-"] {
-   
-}
-
 /* Layout */
 .container {
     margin: 0 auto;
@@ -54,7 +50,8 @@ pre[class*="language-"] {
     padding-bottom: 2rem;
 }
 .hero__logo {
-    text-align: center;
+    display: flex;
+    justify-content: center;
 }
 .hero__logo img {
     height: 16rem;
diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx
index ac4b935..04c8cae 100644
--- a/client/layouts/DetailsLayout.tsx
+++ b/client/layouts/DetailsLayout.tsx
@@ -6,18 +6,20 @@
 import * as React from 'react';
 
 import Ad from '../components/Ad';
-import useDocumentTitle from '../hooks/useDocumentTitle';
-import Layout from './Layout';
 import Product from '../components/Product';
 import { ProductList } from '../constants/ProductList';
+import Pattern from '../constants/Pattern';
 import randomItems from '../helpers/randomIterms';
+import useDocumentTitle from '../hooks/useDocumentTitle';
+import CoverLoader from '../loaders/CoverLoader';
+import Layout from './Layout';
 
 interface DetailsLayoutProps {
-    title: string;
+    pattern: Pattern;
 }
 
-const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
-    useDocumentTitle(`CSS Layout ∙ ${title}`);
+const DetailsLayout: React.FC<DetailsLayoutProps> = ({ pattern, children }) => {
+    useDocumentTitle(`CSS Layout ∙ ${pattern}`);
 
     const products = randomItems(ProductList, 3);
 
@@ -25,7 +27,10 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
         <Layout>
             <div className="hero">
                 <div className="container">
-                    <h1 className="hero__heading">{title}</h1>
+                    <div className="hero__logo">
+                        <CoverLoader pattern={pattern} />
+                    </div>
+                    <h1 className="hero__heading">{pattern}</h1>
                 </div>
             </div>
             <div className="container">
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 5dccc8c..7fd1bff 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -9,7 +9,6 @@ import { Link } from 'react-router-dom';
 
 import './homePage.css';
 
-import Ad from '../components/Ad';
 import CoverCard from '../components/CoverCard';
 import Pattern from '../constants/Pattern';
 import chunk from '../helpers/chunk';
diff --git a/client/patterns/accordion/Details.tsx b/client/patterns/accordion/Details.tsx
index 4e03e0f..0bd314d 100644
--- a/client/patterns/accordion/Details.tsx
+++ b/client/patterns/accordion/Details.tsx
@@ -57,7 +57,7 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout title="Accordion">
+        <DetailsLayout pattern={Pattern.Accordion}>
             <Helmet>
                 <meta name="description" content="Create an accordion with CSS flexbox" />
                 <meta name="keywords" content="css accordion, css flexbox" />
diff --git a/client/patterns/arrow-buttons/Details.tsx b/client/patterns/arrow-buttons/Details.tsx
index 035b1e4..3fdc596 100644
--- a/client/patterns/arrow-buttons/Details.tsx
+++ b/client/patterns/arrow-buttons/Details.tsx
@@ -13,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Arrow buttons">
+        <DetailsLayout pattern={Pattern.ArrowButtons}>
             <Helmet>
                 <meta name="description" content="Create arrow buttons with CSS" />
                 <meta name="keywords" content="css arrow buttons" />
diff --git a/client/patterns/avatar-list/Details.tsx b/client/patterns/avatar-list/Details.tsx
index 194c7e5..1390a2d 100644
--- a/client/patterns/avatar-list/Details.tsx
+++ b/client/patterns/avatar-list/Details.tsx
@@ -33,7 +33,7 @@ const Avatar: React.FC<{}> = ({ children }) => {
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Avatar list">
+        <DetailsLayout pattern={Pattern.AvatarList}>
             <Helmet>
                 <meta name="description" content="Create an avatar list with CSS flexbox" />
                 <meta name="keywords" content="css avatar, css flexbox" />
diff --git a/client/patterns/avatar/Details.tsx b/client/patterns/avatar/Details.tsx
index ca1e8cc..53b7f73 100644
--- a/client/patterns/avatar/Details.tsx
+++ b/client/patterns/avatar/Details.tsx
@@ -13,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Avatar">
+        <DetailsLayout pattern={Pattern.Avatar}>
             <Helmet>
                 <meta name="description" content="Create an avatar component with CSS flexbox" />
                 <meta name="keywords" content="css avatar, css flexbox" />
diff --git a/client/patterns/badge/Details.tsx b/client/patterns/badge/Details.tsx
index e8a8120..025df0a 100644
--- a/client/patterns/badge/Details.tsx
+++ b/client/patterns/badge/Details.tsx
@@ -13,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Badge">
+        <DetailsLayout pattern={Pattern.Badge}>
             <Helmet>
                 <meta name="description" content="Create a badge component with CSS flexbox" />
                 <meta name="keywords" content="css badge, css flexbox" />
diff --git a/client/patterns/breadcrumb/Details.tsx b/client/patterns/breadcrumb/Details.tsx
index 8020a0d..98e022f 100644
--- a/client/patterns/breadcrumb/Details.tsx
+++ b/client/patterns/breadcrumb/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -12,7 +13,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Breadcrumb">
+        <DetailsLayout pattern={Pattern.Breadcrumb}>
             <Helmet>
                 <meta name="description" content="Create a breadcrumb with CSS flexbox" />
                 <meta name="keywords" content="css breadcrumb, css flexbox" />
diff --git a/client/patterns/button-with-icon/Details.tsx b/client/patterns/button-with-icon/Details.tsx
index 6ca4155..c47699a 100644
--- a/client/patterns/button-with-icon/Details.tsx
+++ b/client/patterns/button-with-icon/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -13,7 +14,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Button with icon">
+        <DetailsLayout pattern={Pattern.ButtonWithIcon}>
             <Helmet>
                 <meta name="description" content="Create an icon button with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css icon button" />
diff --git a/client/patterns/card-layout/Details.tsx b/client/patterns/card-layout/Details.tsx
index 0c66071..2120845 100644
--- a/client/patterns/card-layout/Details.tsx
+++ b/client/patterns/card-layout/Details.tsx
@@ -14,7 +14,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Card layout">
+        <DetailsLayout pattern={Pattern.CardLayout}>
             <Helmet>
                 <meta name="description" content="Create a card layout with CSS flexbox" />
                 <meta name="keywords" content="css card layout, css flexbox, css layout" />
diff --git a/client/patterns/card/Details.tsx b/client/patterns/card/Details.tsx
index 08607da..0cc6ba1 100644
--- a/client/patterns/card/Details.tsx
+++ b/client/patterns/card/Details.tsx
@@ -15,7 +15,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Card">
+        <DetailsLayout pattern={Pattern.Card}>
             <Helmet>
                 <meta name="description" content="Create a card with CSS flexbox" />
                 <meta name="keywords" content="css card, css flexbox" />
diff --git a/client/patterns/centering/Details.tsx b/client/patterns/centering/Details.tsx
index 947a0b9..0c303eb 100644
--- a/client/patterns/centering/Details.tsx
+++ b/client/patterns/centering/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -13,7 +14,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Centering">
+        <DetailsLayout pattern={Pattern.Centering}>
             <Helmet>
                 <meta name="description" content="Center an element with CSS flexbox" />
                 <meta name="keywords" content="css centering, css flexbox" />
diff --git a/client/patterns/chip/Details.tsx b/client/patterns/chip/Details.tsx
index b1ea196..b37db84 100644
--- a/client/patterns/chip/Details.tsx
+++ b/client/patterns/chip/Details.tsx
@@ -15,7 +15,7 @@ import InputChip from './InputChip';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Chip">
+        <DetailsLayout pattern={Pattern.Chip}>
             <Helmet>
                 <meta name="description" content="Create a chip component with CSS flexbox" />
                 <meta name="keywords" content="css chip, css flexbox, css tag" />
diff --git a/client/patterns/circular-navigation/Details.tsx b/client/patterns/circular-navigation/Details.tsx
index fb89932..31d290f 100644
--- a/client/patterns/circular-navigation/Details.tsx
+++ b/client/patterns/circular-navigation/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -48,7 +49,7 @@ const Details: React.FC<{}> = () => {
     const numItems = 6;
 
     return (
-        <DetailsLayout title="Circular navigation">
+        <DetailsLayout pattern={Pattern.CircularNavigation}>
             <Helmet>
                 <meta name="description" content="Create a circular navigation with CSS flexbox" />
                 <meta name="keywords" content="css circular navigation, css flexbox" />
diff --git a/client/patterns/close-button/Details.tsx b/client/patterns/close-button/Details.tsx
index 894e129..584e82d 100644
--- a/client/patterns/close-button/Details.tsx
+++ b/client/patterns/close-button/Details.tsx
@@ -13,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Close button">
+        <DetailsLayout pattern={Pattern.CloseButton}>
             <Helmet>
                 <meta name="description" content="Create a close button with CSS flexbox" />
                 <meta name="keywords" content="css close button, css flexbox" />
diff --git a/client/patterns/cookie-banner/Details.tsx b/client/patterns/cookie-banner/Details.tsx
index 43f284d..aec2f57 100644
--- a/client/patterns/cookie-banner/Details.tsx
+++ b/client/patterns/cookie-banner/Details.tsx
@@ -15,7 +15,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Cookie banner">
+        <DetailsLayout pattern={Pattern.CookieBanner}>
             <Helmet>
                 <meta name="description" content="Create a cookie banner with CSS flexbox" />
                 <meta name="keywords" content="css cookie banner, css flexbox" />
diff --git a/client/patterns/corner-ribbon/Details.tsx b/client/patterns/corner-ribbon/Details.tsx
index 169cdcd..8e56977 100644
--- a/client/patterns/corner-ribbon/Details.tsx
+++ b/client/patterns/corner-ribbon/Details.tsx
@@ -15,7 +15,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Corner ribbon">
+        <DetailsLayout pattern={Pattern.CornerRibbon}>
             <Helmet>
                 <meta name="description" content="Create a corner ribbon with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css ribbon" />
diff --git a/client/patterns/curved-background/Details.tsx b/client/patterns/curved-background/Details.tsx
index 6d9910e..6d467bf 100644
--- a/client/patterns/curved-background/Details.tsx
+++ b/client/patterns/curved-background/Details.tsx
@@ -13,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Curved background">
+        <DetailsLayout pattern={Pattern.CurvedBackground}>
             <Helmet>
                 <meta name="description" content="Create an element with curved background" />
                 <meta name="keywords" content="css border radius, css curved background" />
diff --git a/client/patterns/custom-checkbox-button/Details.tsx b/client/patterns/custom-checkbox-button/Details.tsx
index 2a6fff4..ee4582f 100644
--- a/client/patterns/custom-checkbox-button/Details.tsx
+++ b/client/patterns/custom-checkbox-button/Details.tsx
@@ -63,7 +63,7 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout title="Custom checkbox button">
+        <DetailsLayout pattern={Pattern.CustomCheckboxButton}>
             <Helmet>
                 <meta name="description" content="Create a custom checkbox button with CSS flexbox" />
                 <meta name="keywords" content="css checkbox, css flexbox" />
diff --git a/client/patterns/custom-radio-button/Details.tsx b/client/patterns/custom-radio-button/Details.tsx
index c6fd167..d36cd06 100644
--- a/client/patterns/custom-radio-button/Details.tsx
+++ b/client/patterns/custom-radio-button/Details.tsx
@@ -64,7 +64,7 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout title="Custom radio button">
+        <DetailsLayout pattern={Pattern.CustomRadioButton}>
             <Helmet>
                 <meta name="description" content="Create a custom radio button with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css radio" />
diff --git a/client/patterns/diagonal-section/Details.tsx b/client/patterns/diagonal-section/Details.tsx
index 155f936..4706b2a 100644
--- a/client/patterns/diagonal-section/Details.tsx
+++ b/client/patterns/diagonal-section/Details.tsx
@@ -14,7 +14,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Diagonal section">
+        <DetailsLayout pattern={Pattern.DiagonalSection}>
             <Helmet>
                 <meta name="description" content="Create a diagonal section with CSS" />
                 <meta name="keywords" content="css diagonal section, css transform skew" />
diff --git a/client/patterns/docked-at-corner/Details.tsx b/client/patterns/docked-at-corner/Details.tsx
index 0a1bf6c..7330e71 100644
--- a/client/patterns/docked-at-corner/Details.tsx
+++ b/client/patterns/docked-at-corner/Details.tsx
@@ -15,7 +15,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Docked at corner">
+        <DetailsLayout pattern={Pattern.DockedAtCorner}>
             <Helmet>
                 <meta name="description" content="Dock an element at corner with CSS" />
                 <meta name="keywords" content="css docked, css flexbox" />
diff --git a/client/patterns/dot-leader/Details.tsx b/client/patterns/dot-leader/Details.tsx
index a85edfa..d8f3e2c 100644
--- a/client/patterns/dot-leader/Details.tsx
+++ b/client/patterns/dot-leader/Details.tsx
@@ -16,7 +16,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Dot leader">
+        <DetailsLayout pattern={Pattern.DotLeader}>
             <Helmet>
                 <meta name="description" content="Create dot leaders with CSS flexbox" />
                 <meta name="keywords" content="css dot leader, css flexbox" />
diff --git a/client/patterns/dot-navigation/Details.tsx b/client/patterns/dot-navigation/Details.tsx
index 59605bf..da08e77 100644
--- a/client/patterns/dot-navigation/Details.tsx
+++ b/client/patterns/dot-navigation/Details.tsx
@@ -5,6 +5,7 @@
 
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -36,7 +37,7 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout title="Dot navigation">
+        <DetailsLayout pattern={Pattern.DotNavigation}>
             <Helmet>
                 <meta name="description" content="Create dot navigation with CSS flexbox" />
                 <meta name="keywords" content="css dot navigation, css flexbox" />
diff --git a/client/patterns/drawer/Details.tsx b/client/patterns/drawer/Details.tsx
index f2da4bb..04d3897 100644
--- a/client/patterns/drawer/Details.tsx
+++ b/client/patterns/drawer/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -12,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Drawer">
+        <DetailsLayout pattern={Pattern.Drawer}>
             <Helmet>
                 <meta name="description" content="Create a drawer navigation with CSS" />
                 <meta name="keywords" content="css drawer, css off-canvas" />
diff --git a/client/patterns/drop-area/Details.tsx b/client/patterns/drop-area/Details.tsx
index ed99560..19d48be 100644
--- a/client/patterns/drop-area/Details.tsx
+++ b/client/patterns/drop-area/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -12,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Drop area">
+        <DetailsLayout pattern={Pattern.DropArea}>
             <Helmet>
                 <meta name="description" content="Create a dropping area with CSS flexbox" />
                 <meta name="keywords" content="css dropping area, css flexbox" />
diff --git a/client/patterns/drop-cap/Details.tsx b/client/patterns/drop-cap/Details.tsx
index 002d605..0ec44e6 100644
--- a/client/patterns/drop-cap/Details.tsx
+++ b/client/patterns/drop-cap/Details.tsx
@@ -10,10 +10,11 @@ import './dropcap.css';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
+import Pattern from '../../constants/Pattern';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Drop cap">
+        <DetailsLayout pattern={Pattern.DropCap}>
             <Helmet>
                 <meta name="description" content="Create a drop cap with CSS" />
                 <meta name="keywords" content="css drop cap" />
diff --git a/client/patterns/dropdown/Details.tsx b/client/patterns/dropdown/Details.tsx
index 43979f4..f420cb0 100644
--- a/client/patterns/dropdown/Details.tsx
+++ b/client/patterns/dropdown/Details.tsx
@@ -18,7 +18,7 @@ import Triangle from '../../placeholders/Triangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Dropdown">
+        <DetailsLayout pattern={Pattern.Dropdown}>
             <Helmet>
                 <meta name="description" content="Create a dropdown with CSS" />
                 <meta name="keywords" content="css dropdown, css menu" />
diff --git a/client/patterns/fading-long-section/Details.tsx b/client/patterns/fading-long-section/Details.tsx
index fe83d23..26f25dc 100644
--- a/client/patterns/fading-long-section/Details.tsx
+++ b/client/patterns/fading-long-section/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -12,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Fading long section">
+        <DetailsLayout pattern={Pattern.FadingLongSection}>
             <Helmet>
                 <meta name="description" content="Fading long section to indicate there is more content" />
                 <meta name="keywords" content="css fading overflow, css linear gradient" />
diff --git a/client/patterns/feature-comparison/Details.tsx b/client/patterns/feature-comparison/Details.tsx
index 3715a48..965e726 100644
--- a/client/patterns/feature-comparison/Details.tsx
+++ b/client/patterns/feature-comparison/Details.tsx
@@ -16,7 +16,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Feature comparison">
+        <DetailsLayout pattern={Pattern.FeatureComparison}>
             <Helmet>
                 <meta name="description" content="Create a feature comparison list with CSS flexbox" />
                 <meta name="keywords" content="css feature comparison, css flexbox" />
diff --git a/client/patterns/feature-list/Details.tsx b/client/patterns/feature-list/Details.tsx
index 9ec50d4..dc25f47 100644
--- a/client/patterns/feature-list/Details.tsx
+++ b/client/patterns/feature-list/Details.tsx
@@ -16,7 +16,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Feature list">
+        <DetailsLayout pattern={Pattern.FeatureList}>
             <Helmet>
                 <meta name="description" content="Create a feature list with CSS flexbox" />
                 <meta name="keywords" content="css feature list, css flexbox" />
diff --git a/client/patterns/fixed-at-corner/Details.tsx b/client/patterns/fixed-at-corner/Details.tsx
index e681644..701296a 100644
--- a/client/patterns/fixed-at-corner/Details.tsx
+++ b/client/patterns/fixed-at-corner/Details.tsx
@@ -14,7 +14,7 @@ import Triangle from '../../placeholders/Triangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Fixed at corner">
+        <DetailsLayout pattern={Pattern.FixedAtCorner}>
             <Helmet>
                 <meta name="description" content="Fix an element at corner with CSS" />
                 <meta name="keywords" content="css fixed" />
diff --git a/client/patterns/fixed-at-side/Details.tsx b/client/patterns/fixed-at-side/Details.tsx
index 1b3e69a..a9e014e 100644
--- a/client/patterns/fixed-at-side/Details.tsx
+++ b/client/patterns/fixed-at-side/Details.tsx
@@ -14,7 +14,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Fixed at side">
+        <DetailsLayout pattern={Pattern.FixedAtSide}>
             <Helmet>
                 <meta name="description" content="Fix an element at the middle of side with CSS" />
                 <meta name="keywords" content="css fixed" />
diff --git a/client/patterns/floating-label/Details.tsx b/client/patterns/floating-label/Details.tsx
index 03215d0..64690f5 100644
--- a/client/patterns/floating-label/Details.tsx
+++ b/client/patterns/floating-label/Details.tsx
@@ -10,10 +10,11 @@ import './floating-label.css';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
+import Pattern from '../../constants/Pattern';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Floating label">
+        <DetailsLayout pattern={Pattern.FloatingLabel}>
             <Helmet>
                 <meta name="description" content="Create a floating label with CSS" />
                 <meta name="keywords" content="css floating label, placeholder shown" />
diff --git a/client/patterns/full-background/Details.tsx b/client/patterns/full-background/Details.tsx
index 7666328..780e5c5 100644
--- a/client/patterns/full-background/Details.tsx
+++ b/client/patterns/full-background/Details.tsx
@@ -14,7 +14,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Full background">
+        <DetailsLayout pattern={Pattern.FullBackground}>
             <Helmet>
                 <meta name="description" content="Create a full background element with CSS" />
                 <meta name="keywords" content="css background size cover, css full background" />
diff --git a/client/patterns/full-screen-menu/Details.tsx b/client/patterns/full-screen-menu/Details.tsx
index 2495aa1..17d79ba 100644
--- a/client/patterns/full-screen-menu/Details.tsx
+++ b/client/patterns/full-screen-menu/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -12,7 +13,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Full screen menu">
+        <DetailsLayout pattern={Pattern.FullScreenMenu}>
             <Helmet>
                 <meta name="description" content="Create a full screen menu with CSS flexbox" />
                 <meta name="keywords" content="css fixed, css flexbox, css menu" />
diff --git a/client/patterns/holy-grail/Details.tsx b/client/patterns/holy-grail/Details.tsx
index 7418166..2c3c4d7 100644
--- a/client/patterns/holy-grail/Details.tsx
+++ b/client/patterns/holy-grail/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -13,7 +14,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Holy grail">
+        <DetailsLayout pattern={Pattern.HolyGrail}>
             <Helmet>
                 <meta name="description" content="Create a holy grail layout with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css holy grail layout, css layout" />
diff --git a/client/patterns/initial-avatar/Details.tsx b/client/patterns/initial-avatar/Details.tsx
index 2e465f3..70cdc30 100644
--- a/client/patterns/initial-avatar/Details.tsx
+++ b/client/patterns/initial-avatar/Details.tsx
@@ -14,7 +14,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Initial avatar">
+        <DetailsLayout pattern={Pattern.InitialAvatar}>
             <Helmet>
                 <meta name="description" content="Create an initial avatar with CSS" />
                 <meta name="keywords" content="css avatar" />
diff --git a/client/patterns/input-addon/Details.tsx b/client/patterns/input-addon/Details.tsx
index 0f5541b..724a4e8 100644
--- a/client/patterns/input-addon/Details.tsx
+++ b/client/patterns/input-addon/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -12,7 +13,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Input add-on">
+        <DetailsLayout pattern={Pattern.InputAddon}>
             <Helmet>
                 <meta name="description" content="Create an input add-on with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css input add-on" />
diff --git a/client/patterns/keyboard-shortcut/Details.tsx b/client/patterns/keyboard-shortcut/Details.tsx
index d5ddd93..0f05188 100644
--- a/client/patterns/keyboard-shortcut/Details.tsx
+++ b/client/patterns/keyboard-shortcut/Details.tsx
@@ -8,6 +8,7 @@ import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import Heading from '../../components/Heading';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
@@ -45,7 +46,7 @@ const Item: React.FC<ItemProps> = ({ action, keys }) => {
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Keyboard shortcut">
+        <DetailsLayout pattern={Pattern.KeyboardShortcut}>
             <Helmet>
                 <meta name="description" content="Create a keyboard shortcut with CSS" />
                 <meta name="keywords" content="kbd tag, keyboard shortcut" />
diff --git a/client/patterns/lined-paper/Details.tsx b/client/patterns/lined-paper/Details.tsx
index 396b724..e1b59f9 100644
--- a/client/patterns/lined-paper/Details.tsx
+++ b/client/patterns/lined-paper/Details.tsx
@@ -5,13 +5,14 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Lined paper">
+        <DetailsLayout pattern={Pattern.LinedPaper}>
             <Helmet>
                 <meta name="description" content="Create lined paper with CSS" />
                 <meta name="keywords" content="css linear gradient, css lined paper, css multiple horizontal lines" />
diff --git a/client/patterns/media-object/Details.tsx b/client/patterns/media-object/Details.tsx
index 401ac87..07eb0ea 100644
--- a/client/patterns/media-object/Details.tsx
+++ b/client/patterns/media-object/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -14,7 +15,7 @@ import Square from '../../placeholders/Square';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Media object">
+        <DetailsLayout pattern={Pattern.MediaObject}>
             <Helmet>
                 <meta name="description" content="Create a media object with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, media object" />
diff --git a/client/patterns/mega-menu/Details.tsx b/client/patterns/mega-menu/Details.tsx
index c483938..d1bfb24 100644
--- a/client/patterns/mega-menu/Details.tsx
+++ b/client/patterns/mega-menu/Details.tsx
@@ -18,7 +18,7 @@ import Triangle from '../../placeholders/Triangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Mega menu">
+        <DetailsLayout pattern={Pattern.MegaMenu}>
             <Helmet>
                 <meta name="description" content="Create a mega menu with CSS" />
                 <meta name="keywords" content="css mega menu" />
diff --git a/client/patterns/menu/Details.tsx b/client/patterns/menu/Details.tsx
index 3b3c78b..f7232e1 100644
--- a/client/patterns/menu/Details.tsx
+++ b/client/patterns/menu/Details.tsx
@@ -17,7 +17,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Menu">
+        <DetailsLayout pattern={Pattern.Menu}>
             <Helmet>
                 <meta name="description" content="Create a menu with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css menu" />
diff --git a/client/patterns/modal/Details.tsx b/client/patterns/modal/Details.tsx
index 32e54da..74784ce 100644
--- a/client/patterns/modal/Details.tsx
+++ b/client/patterns/modal/Details.tsx
@@ -6,6 +6,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -15,7 +16,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Modal">
+        <DetailsLayout pattern={Pattern.Modal}>
             <Helmet>
                 <meta name="description" content="Create a modal with CSS flexbox" />
                 <meta name="keywords" content="css dialog, css flexbox, css modal" />
diff --git a/client/patterns/nested-dropdowns/Details.tsx b/client/patterns/nested-dropdowns/Details.tsx
index 36fc2e8..6d70939 100644
--- a/client/patterns/nested-dropdowns/Details.tsx
+++ b/client/patterns/nested-dropdowns/Details.tsx
@@ -15,7 +15,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Nested dropdowns">
+        <DetailsLayout pattern={Pattern.NestedDropdowns}>
             <Helmet>
                 <meta name="description" content="Create nested dropdown menu with CSS" />
                 <meta name="keywords" content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu" />
diff --git a/client/patterns/notification/Details.tsx b/client/patterns/notification/Details.tsx
index c625c90..2d4f8ee 100644
--- a/client/patterns/notification/Details.tsx
+++ b/client/patterns/notification/Details.tsx
@@ -6,6 +6,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -14,7 +15,7 @@ import Circle from '../../placeholders/Circle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Notification">
+        <DetailsLayout pattern={Pattern.Notification}>
             <Helmet>
                 <meta name="description" content="Create a notification with CSS flexbox" />
                 <meta name="keywords" content="css alert, css flexbox, css notification" />
diff --git a/client/patterns/overlay-play-button/Details.tsx b/client/patterns/overlay-play-button/Details.tsx
index 8272354..78f4c35 100644
--- a/client/patterns/overlay-play-button/Details.tsx
+++ b/client/patterns/overlay-play-button/Details.tsx
@@ -14,7 +14,7 @@ import Triangle from '../../placeholders/Triangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Overlay play button">
+        <DetailsLayout pattern={Pattern.OverlayPlayButton}>
             <Helmet>
                 <meta name="description" content="Create an overlay play button with CSS flexbox" />
                 <meta name="keywords" content="css flexbox" />
diff --git a/client/patterns/pagination/Details.tsx b/client/patterns/pagination/Details.tsx
index 82ad896..38da19d 100644
--- a/client/patterns/pagination/Details.tsx
+++ b/client/patterns/pagination/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -13,7 +14,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Pagination">
+        <DetailsLayout pattern={Pattern.Pagination}>
             <Helmet>
                 <meta name="description" content="Create a pagination with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css pagination" />
diff --git a/client/patterns/popover-arrow/Details.tsx b/client/patterns/popover-arrow/Details.tsx
index 19747ea..bbc07b4 100644
--- a/client/patterns/popover-arrow/Details.tsx
+++ b/client/patterns/popover-arrow/Details.tsx
@@ -13,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Popover arrow">
+        <DetailsLayout pattern={Pattern.PopoverArrow}>
             <Helmet>
                 <meta name="description" content="Create a popover arrow with CSS" />
                 <meta name="keywords" content="css arrow, css popover" />
diff --git a/client/patterns/presence-indicator/Details.tsx b/client/patterns/presence-indicator/Details.tsx
index bc5432a..6ad9cac 100644
--- a/client/patterns/presence-indicator/Details.tsx
+++ b/client/patterns/presence-indicator/Details.tsx
@@ -14,7 +14,7 @@ import Circle from '../../placeholders/Circle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Presence indicator">
+        <DetailsLayout pattern={Pattern.PresenceIndicator}>
             <Helmet>
                 <meta name="description" content="Create a presence indicator with CSS" />
                 <meta name="keywords" content="css indicator" />
diff --git a/client/patterns/previous-next-buttons/Details.tsx b/client/patterns/previous-next-buttons/Details.tsx
index 0c32592..e138746 100644
--- a/client/patterns/previous-next-buttons/Details.tsx
+++ b/client/patterns/previous-next-buttons/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -12,7 +13,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Previous and next buttons">
+        <DetailsLayout pattern={Pattern.PreviousNextButtons}>
             <Helmet>
                 <meta name="description" content="Create previous and next buttons with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css pagination" />
diff --git a/client/patterns/pricing-table/Details.tsx b/client/patterns/pricing-table/Details.tsx
index 192b8e3..78eaae1 100644
--- a/client/patterns/pricing-table/Details.tsx
+++ b/client/patterns/pricing-table/Details.tsx
@@ -17,7 +17,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Pricing table">
+        <DetailsLayout pattern={Pattern.PricingTable}>
             <Helmet>
                 <meta name="description" content="Create a pricing table with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css pricing table" />
diff --git a/client/patterns/progress-bar/Details.tsx b/client/patterns/progress-bar/Details.tsx
index 9ce6cde..bc1c36f 100644
--- a/client/patterns/progress-bar/Details.tsx
+++ b/client/patterns/progress-bar/Details.tsx
@@ -5,6 +5,7 @@
 
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import useInterval from '../../hooks/useInterval';
 import DetailsLayout from '../../layouts/DetailsLayout';
@@ -17,7 +18,7 @@ const Details: React.FC<{}> = () => {
     }, 1 * 100);
 
     return (
-        <DetailsLayout title="Progress bar">
+        <DetailsLayout pattern={Pattern.ProgressBar}>
             <Helmet>
                 <meta name="description" content="Create a progress bar with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css progress bar" />
diff --git a/client/patterns/property-list/Details.tsx b/client/patterns/property-list/Details.tsx
index 55ae00d..ae4df78 100644
--- a/client/patterns/property-list/Details.tsx
+++ b/client/patterns/property-list/Details.tsx
@@ -33,7 +33,7 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout title="Property list">
+        <DetailsLayout pattern={Pattern.PropertyList}>
             <Helmet>
                 <meta name="description" content="Create a property list with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, property list" />
diff --git a/client/patterns/questions-and-answers/Details.tsx b/client/patterns/questions-and-answers/Details.tsx
index fdc3ec1..ccae2ec 100644
--- a/client/patterns/questions-and-answers/Details.tsx
+++ b/client/patterns/questions-and-answers/Details.tsx
@@ -53,7 +53,7 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout title="Questions and answers">
+        <DetailsLayout pattern={Pattern.QuestionsAndAnswers}>
             <Helmet>
                 <meta name="description" content="Create a questions and answers section with CSS flexbox" />
                 <meta name="keywords" content="css accordion, css faq, css flexbox" />
diff --git a/client/patterns/radial-progress-bar/Details.tsx b/client/patterns/radial-progress-bar/Details.tsx
index 5d0f425..2043a5b 100644
--- a/client/patterns/radial-progress-bar/Details.tsx
+++ b/client/patterns/radial-progress-bar/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -72,7 +73,7 @@ const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Radial progress bar">
+        <DetailsLayout pattern={Pattern.RadialProgressBar}>
             <Helmet>
                 <meta name="description" content="Create a radial progress bar with CSS flexbox" />
                 <meta name="keywords" content="css clip rect, css flexbox, css progress bar" />
diff --git a/client/patterns/radio-button-group/Details.tsx b/client/patterns/radio-button-group/Details.tsx
index 115d1c1..eade9dc 100644
--- a/client/patterns/radio-button-group/Details.tsx
+++ b/client/patterns/radio-button-group/Details.tsx
@@ -49,7 +49,7 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout title="Radio button group">
+        <DetailsLayout pattern={Pattern.RadioButtonGroup}>
             <Helmet>
                 <meta name="description" content="Create a radio button group with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css radio button" />
diff --git a/client/patterns/radio-switch/Details.tsx b/client/patterns/radio-switch/Details.tsx
index e196a73..09b6688 100644
--- a/client/patterns/radio-switch/Details.tsx
+++ b/client/patterns/radio-switch/Details.tsx
@@ -17,7 +17,7 @@ const Details: React.FC<{}> = () => {
     const toggle = () => setFirstChecked((c) => !c);
 
     return (
-        <DetailsLayout title="Radio switch">
+        <DetailsLayout pattern={Pattern.RadioSwitch}>
             <Helmet>
                 <meta name="description" content="Create a radio switch with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css radio switch, css switch" />
diff --git a/client/patterns/rating/Details.tsx b/client/patterns/rating/Details.tsx
index ae38e86..da778a6 100644
--- a/client/patterns/rating/Details.tsx
+++ b/client/patterns/rating/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -12,7 +13,7 @@ import Star from './Star';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Rating">
+        <DetailsLayout pattern={Pattern.Rating}>
             <Helmet>
                 <meta name="description" content="Create a star rating with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css star rating" />
diff --git a/client/patterns/resizable-element/Details.tsx b/client/patterns/resizable-element/Details.tsx
index 1363021..d0e8844 100644
--- a/client/patterns/resizable-element/Details.tsx
+++ b/client/patterns/resizable-element/Details.tsx
@@ -5,13 +5,14 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Resizable element">
+        <DetailsLayout pattern={Pattern.ResizableElement}>
             <Helmet>
                 <meta name="description" content="Create resizable indicators with CSS" />
                 <meta name="keywords" content="css resizable, css resize cursor" />
diff --git a/client/patterns/ribbon/Details.tsx b/client/patterns/ribbon/Details.tsx
index b014f46..70909f5 100644
--- a/client/patterns/ribbon/Details.tsx
+++ b/client/patterns/ribbon/Details.tsx
@@ -14,7 +14,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Ribbon">
+        <DetailsLayout pattern={Pattern.Ribbon}>
             <Helmet>
                 <meta name="description" content="Create a ribbon with CSS" />
                 <meta name="keywords" content="css ribbon" />
diff --git a/client/patterns/same-height-columns/Details.tsx b/client/patterns/same-height-columns/Details.tsx
index 0468c46..986ff9d 100644
--- a/client/patterns/same-height-columns/Details.tsx
+++ b/client/patterns/same-height-columns/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -13,7 +14,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Same height columns">
+        <DetailsLayout pattern={Pattern.SameHeightColumns}>
             <Helmet>
                 <meta name="description" content="Create same height columns with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css layout, css same height columns" />
diff --git a/client/patterns/search-box/Details.tsx b/client/patterns/search-box/Details.tsx
index 44f46ae..f1ab7b1 100644
--- a/client/patterns/search-box/Details.tsx
+++ b/client/patterns/search-box/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -12,7 +13,7 @@ import Circle from '../../placeholders/Circle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Search box">
+        <DetailsLayout pattern={Pattern.SearchBox}>
             <Helmet>
                 <meta name="description" content="Create a search box with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css search box" />
diff --git a/client/patterns/separator/Details.tsx b/client/patterns/separator/Details.tsx
index 1f064ce..2e9d8a2 100644
--- a/client/patterns/separator/Details.tsx
+++ b/client/patterns/separator/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -12,7 +13,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Separator">
+        <DetailsLayout pattern={Pattern.Separator}>
             <Helmet>
                 <meta name="description" content="Create a separator with CSS flexbox" />
                 <meta name="keywords" content="css divider, css flexbox, css separator" />
diff --git a/client/patterns/sidebar/Details.tsx b/client/patterns/sidebar/Details.tsx
index 29f83b0..395f302 100644
--- a/client/patterns/sidebar/Details.tsx
+++ b/client/patterns/sidebar/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -12,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Sidebar">
+        <DetailsLayout pattern={Pattern.Sidebar}>
             <Helmet>
                 <meta name="description" content="Create a sidebar with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css layout, css sidebar" />
diff --git a/client/patterns/simple-grid/Details.tsx b/client/patterns/simple-grid/Details.tsx
index f659f5c..55926c6 100644
--- a/client/patterns/simple-grid/Details.tsx
+++ b/client/patterns/simple-grid/Details.tsx
@@ -14,7 +14,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Simple grid">
+        <DetailsLayout pattern={Pattern.SimpleGrid}>
             <Helmet>
                 <meta name="description" content="Create a simple grid with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
diff --git a/client/patterns/slider/Details.tsx b/client/patterns/slider/Details.tsx
index 2e921d3..570c081 100644
--- a/client/patterns/slider/Details.tsx
+++ b/client/patterns/slider/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -13,7 +14,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Slider">
+        <DetailsLayout pattern={Pattern.Slider}>
             <Helmet>
                 <meta name="description" content="Create a slider with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css slider" />
diff --git a/client/patterns/spin-button/Details.tsx b/client/patterns/spin-button/Details.tsx
index 1b28c29..5e8c084 100644
--- a/client/patterns/spin-button/Details.tsx
+++ b/client/patterns/spin-button/Details.tsx
@@ -19,7 +19,7 @@ const Details: React.FC<{}> = () => {
     const change = (e: React.ChangeEvent<HTMLInputElement>) => setValue(parseInt(e.target.value, 10));
 
     return (
-        <DetailsLayout title="Spin button">
+        <DetailsLayout pattern={Pattern.SpinButton}>
             <Helmet>
                 <meta name="description" content="Create a spin button with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css spin button" />
diff --git a/client/patterns/split-navigation/Details.tsx b/client/patterns/split-navigation/Details.tsx
index 993f91f..d83d91a 100644
--- a/client/patterns/split-navigation/Details.tsx
+++ b/client/patterns/split-navigation/Details.tsx
@@ -14,7 +14,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Split navigation">
+        <DetailsLayout pattern={Pattern.SplitNavigation}>
             <Helmet>
                 <meta name="description" content="Create a split navigation with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css menu, css navigation, css split navigation" />
diff --git a/client/patterns/split-screen/Details.tsx b/client/patterns/split-screen/Details.tsx
index 4e73c04..31652de 100644
--- a/client/patterns/split-screen/Details.tsx
+++ b/client/patterns/split-screen/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -14,7 +15,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Split screen">
+        <DetailsLayout pattern={Pattern.SplitScreen}>
             <Helmet>
                 <meta name="description" content="Create a split screen with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css layout, css split screen" />
diff --git a/client/patterns/stacked-cards/Details.tsx b/client/patterns/stacked-cards/Details.tsx
index fe3ecf9..10252d2 100644
--- a/client/patterns/stacked-cards/Details.tsx
+++ b/client/patterns/stacked-cards/Details.tsx
@@ -13,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Stacked cards">
+        <DetailsLayout pattern={Pattern.StackedCards}>
             <Helmet>
                 <meta name="description" content="Create stacked cards with CSS" />
                 <meta name="keywords" content="css card, css stacked cards, css transform rotate" />
diff --git a/client/patterns/stamp-border/Details.tsx b/client/patterns/stamp-border/Details.tsx
index 8a48bb1..94c9594 100644
--- a/client/patterns/stamp-border/Details.tsx
+++ b/client/patterns/stamp-border/Details.tsx
@@ -5,13 +5,14 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Stamp border">
+        <DetailsLayout pattern={Pattern.StampBorder}>
             <Helmet>
                 <meta name="description" content="Create stamp border with CSS" />
                 <meta name="keywords" content="css radial gradient, css stamp border" />
diff --git a/client/patterns/statistic/Details.tsx b/client/patterns/statistic/Details.tsx
index fae70b2..0a6e10c 100644
--- a/client/patterns/statistic/Details.tsx
+++ b/client/patterns/statistic/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import random from '../../helpers/random';
 import DetailsLayout from '../../layouts/DetailsLayout';
@@ -12,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Statistic">
+        <DetailsLayout pattern={Pattern.Statistic}>
             <Helmet>
                 <meta name="description" content="Create a statistic component with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css statistic" />
diff --git a/client/patterns/status-light/Details.tsx b/client/patterns/status-light/Details.tsx
index be63624..3f06ebe 100644
--- a/client/patterns/status-light/Details.tsx
+++ b/client/patterns/status-light/Details.tsx
@@ -7,13 +7,14 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 
 import Heading from '../../components/Heading';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Status light">
+        <DetailsLayout pattern={Pattern.StatusLight}>
             <Helmet>
                 <meta name="description" content="Create a status light with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css status light" />
diff --git a/client/patterns/stepper-input/Details.tsx b/client/patterns/stepper-input/Details.tsx
index 1d10f1d..285a09a 100644
--- a/client/patterns/stepper-input/Details.tsx
+++ b/client/patterns/stepper-input/Details.tsx
@@ -22,7 +22,7 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout title="Stepper input">
+        <DetailsLayout pattern={Pattern.StepperInput}>
             <Helmet>
                 <meta name="description" content="Create a stepper input with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css stepper input" />
diff --git a/client/patterns/sticky-footer/Details.tsx b/client/patterns/sticky-footer/Details.tsx
index 5f5c9b1..6481530 100644
--- a/client/patterns/sticky-footer/Details.tsx
+++ b/client/patterns/sticky-footer/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -13,7 +14,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Sticky footer">
+        <DetailsLayout pattern={Pattern.StickyFooter}>
             <Helmet>
                 <meta name="description" content="Create a sticky footer with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css layout, css sticky, css sticky footer" />
diff --git a/client/patterns/sticky-header/Details.tsx b/client/patterns/sticky-header/Details.tsx
index 1546960..2e3949f 100644
--- a/client/patterns/sticky-header/Details.tsx
+++ b/client/patterns/sticky-header/Details.tsx
@@ -15,7 +15,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Sticky header">
+        <DetailsLayout pattern={Pattern.StickyHeader}>
             <Helmet>
                 <meta name="description" content="Create a sticky header with CSS" />
                 <meta name="keywords" content="css layout, css position sticky, css sticky header" />
diff --git a/client/patterns/sticky-sections/Details.tsx b/client/patterns/sticky-sections/Details.tsx
index cc1a62e..6ada06d 100644
--- a/client/patterns/sticky-sections/Details.tsx
+++ b/client/patterns/sticky-sections/Details.tsx
@@ -13,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Sticky sections">
+        <DetailsLayout pattern={Pattern.StickySections}>
             <Helmet>
                 <meta name="description" content="Create sticky sections with CSS" />
                 <meta name="keywords" content="css layout, css sticky, css sticky sections" />
diff --git a/client/patterns/sticky-table-column/Details.tsx b/client/patterns/sticky-table-column/Details.tsx
index 81e61f7..2f5ae64 100644
--- a/client/patterns/sticky-table-column/Details.tsx
+++ b/client/patterns/sticky-table-column/Details.tsx
@@ -17,7 +17,7 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     const numberOfColumns = 10;
     return (
-        <DetailsLayout title="Sticky table column">
+        <DetailsLayout pattern={Pattern.StickyTableColumn}>
             <Helmet>
                 <meta name="description" content="Create sticky table column with CSS" />
                 <meta name="keywords" content="css position sticky, css sticky table column" />
diff --git a/client/patterns/sticky-table-headers/Details.tsx b/client/patterns/sticky-table-headers/Details.tsx
index 8ec128e..da685cc 100644
--- a/client/patterns/sticky-table-headers/Details.tsx
+++ b/client/patterns/sticky-table-headers/Details.tsx
@@ -15,7 +15,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Sticky table headers">
+        <DetailsLayout pattern={Pattern.StickyTableHeaders}>
             <Helmet>
                 <meta name="description" content="Create sticky table headers with CSS" />
                 <meta name="keywords" content="css position sticky, css sticky table headers" />
diff --git a/client/patterns/switch/Details.tsx b/client/patterns/switch/Details.tsx
index b50fa1e..68ecb29 100644
--- a/client/patterns/switch/Details.tsx
+++ b/client/patterns/switch/Details.tsx
@@ -16,7 +16,7 @@ const Details: React.FC<{}> = () => {
     const toggle = () => setChecked((c) => !c);
 
     return (
-        <DetailsLayout title="Switch">
+        <DetailsLayout pattern={Pattern.Switch}>
             <Helmet>
                 <meta name="description" content="Create a switch with CSS flexbox" />
                 <meta name="keywords" content="css custom checkbox, css flexbox, css switch, css switcher" />
diff --git a/client/patterns/tab/Details.tsx b/client/patterns/tab/Details.tsx
index e05fd2f..7dec1fe 100644
--- a/client/patterns/tab/Details.tsx
+++ b/client/patterns/tab/Details.tsx
@@ -5,6 +5,7 @@
 
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -38,7 +39,7 @@ const Details: React.FC<{}> = () => {
     };
 
     return (
-        <DetailsLayout title="Tab">
+        <DetailsLayout pattern={Pattern.Tab}>
             <Helmet>
                 <meta name="description" content="Create tabs with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css navigation, css tab" />
diff --git a/client/patterns/teardrop/Details.tsx b/client/patterns/teardrop/Details.tsx
index 2fe78c3..2869903 100644
--- a/client/patterns/teardrop/Details.tsx
+++ b/client/patterns/teardrop/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -12,7 +13,7 @@ import Circle from '../../placeholders/Circle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Teardrop">
+        <DetailsLayout pattern={Pattern.Teardrop}>
             <Helmet>
                 <meta name="description" content="Create a teardrop with CSS" />
                 <meta
diff --git a/client/patterns/timeline/Details.tsx b/client/patterns/timeline/Details.tsx
index 4319a3c..8ccab26 100644
--- a/client/patterns/timeline/Details.tsx
+++ b/client/patterns/timeline/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -14,7 +15,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Timeline">
+        <DetailsLayout pattern={Pattern.Timeline}>
             <Helmet>
                 <meta name="description" content="Create a timeline with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css timeline" />
diff --git a/client/patterns/toggle-password-visibility/Details.tsx b/client/patterns/toggle-password-visibility/Details.tsx
index a70b38a..190ede8 100644
--- a/client/patterns/toggle-password-visibility/Details.tsx
+++ b/client/patterns/toggle-password-visibility/Details.tsx
@@ -5,6 +5,7 @@
 
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -14,7 +15,7 @@ const Details: React.FC<{}> = () => {
     const toggle = () => setVisible((v) => !v);
 
     return (
-        <DetailsLayout title="Toggle password visibility">
+        <DetailsLayout pattern={Pattern.TogglePasswordVisibility}>
             <Helmet>
                 <meta name="description" content="Create a toggle password visibility with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, toggle password visibility" />
diff --git a/client/patterns/tooltip/Details.tsx b/client/patterns/tooltip/Details.tsx
index dbeae5c..c9f4a2f 100644
--- a/client/patterns/tooltip/Details.tsx
+++ b/client/patterns/tooltip/Details.tsx
@@ -17,7 +17,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Tooltip">
+        <DetailsLayout pattern={Pattern.Tooltip}>
             <Helmet>
                 <meta name="description" content="Create a tooltip with CSS" />
                 <meta name="keywords" content="css tooltip" />
diff --git a/client/patterns/triangle-buttons/Details.tsx b/client/patterns/triangle-buttons/Details.tsx
index 3ed8967..45cf99b 100644
--- a/client/patterns/triangle-buttons/Details.tsx
+++ b/client/patterns/triangle-buttons/Details.tsx
@@ -13,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Triangle buttons">
+        <DetailsLayout pattern={Pattern.TriangleButtons}>
             <Helmet>
                 <meta name="description" content="Create triangle buttons with CSS" />
                 <meta name="keywords" content="css triangle buttons" />
diff --git a/client/patterns/upload-button/Details.tsx b/client/patterns/upload-button/Details.tsx
index dbb2c2c..faff09c 100644
--- a/client/patterns/upload-button/Details.tsx
+++ b/client/patterns/upload-button/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -12,7 +13,7 @@ import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Upload button">
+        <DetailsLayout pattern={Pattern.UploadButton}>
             <Helmet>
                 <meta name="description" content="Create an upload button with CSS flexbox" />
                 <meta name="keywords" content="css file input, css flexbox, css upload button" />
diff --git a/client/patterns/validation-icon/Details.tsx b/client/patterns/validation-icon/Details.tsx
index bd355a0..310c31c 100644
--- a/client/patterns/validation-icon/Details.tsx
+++ b/client/patterns/validation-icon/Details.tsx
@@ -5,13 +5,14 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Validation icon">
+        <DetailsLayout pattern={Pattern.ValidationIcon}>
             <Helmet>
                 <meta name="description" content="Add validation icons to input with CSS" />
                 <meta name="keywords" content="css validation icon" />
diff --git a/client/patterns/video-background/Details.tsx b/client/patterns/video-background/Details.tsx
index 4ab8976..d0ca5f7 100644
--- a/client/patterns/video-background/Details.tsx
+++ b/client/patterns/video-background/Details.tsx
@@ -14,7 +14,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Video background">
+        <DetailsLayout pattern={Pattern.VideoBackground}>
             <Helmet>
                 <meta name="description" content="Add video background with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, object fit cover" />
diff --git a/client/patterns/watermark/Details.tsx b/client/patterns/watermark/Details.tsx
index b57ca31..c8645a4 100644
--- a/client/patterns/watermark/Details.tsx
+++ b/client/patterns/watermark/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -12,7 +13,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Watermark">
+        <DetailsLayout pattern={Pattern.Watermark}>
             <Helmet>
                 <meta name="description" content="Create a watermark with CSS" />
                 <meta name="keywords" content="css watermark" />
diff --git a/client/patterns/wizard/Details.tsx b/client/patterns/wizard/Details.tsx
index 8840a9a..029bdbf 100644
--- a/client/patterns/wizard/Details.tsx
+++ b/client/patterns/wizard/Details.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -14,7 +15,7 @@ import Line from '../../placeholders/Line';
 
 const Details: React.FC<{}> = () => {
     return (
-        <DetailsLayout title="Wizard">
+        <DetailsLayout pattern={Pattern.Wizard}>
             <Helmet>
                 <meta name="description" content="Create a wizard with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css stepper, css wizard" />