diff --git a/constants/Pattern.ts b/constants/Pattern.ts
deleted file mode 100644
index 6242507..0000000
--- a/constants/Pattern.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-export enum Pattern {
-    Accordion = 'Accordion',
-    ArrowButtons = 'Arrow buttons',
-    Avatar = 'Avatar',
-    AvatarList = 'Avatar list',
-    Badge = 'Badge',
-    Breadcrumb = 'Breadcrumb',
-    ButtonWithIcon = 'Button with icon',
-    Card = 'Card',
-    CardLayout = 'Card layout',
-    Centering = 'Centering',
-    Chip = 'Chip',
-    CircularNavigation = 'Circular navigation',
-    CloseButton = 'Close button',
-    ColorSwatch = 'Color swatch',
-    ConcaveCorners = 'Concave corners',
-    CookieBanner = 'Cookie banner',
-    CornerRibbon = 'Corner ribbon',
-    CurvedBackground = 'Curved background',
-    CustomCheckboxButton = 'Custom checkbox button',
-    CustomRadioButton = 'Custom radio button',
-    DiagonalSection = 'Diagonal section',
-    DockedAtCorner = 'Docked at corner',
-    DotLeader = 'Dot leader',
-    DotNavigation = 'Dot navigation',
-    Drawer = 'Drawer',
-    DropArea = 'Drop area',
-    DropCap = 'Drop cap',
-    Dropdown = 'Dropdown',
-    FadingLongSection = 'Fading long section',
-    FeatureComparison = 'Feature comparison',
-    FeatureList = 'Feature list',
-    FixedAtCorner = 'Fixed at corner',
-    FixedAtSide = 'Fixed at side',
-    FloatingLabel = 'Floating label',
-    FolderStructure = 'Folder structure',
-    FullBackground = 'Full background',
-    FullScreenMenu = 'Full screen menu',
-    HolyGrail = 'Holy grail',
-    InitialAvatar = 'Initial avatar',
-    InputAddon = 'Input addon',
-    InvertedCorners = 'Inverted corners',
-    KeyboardShortcut = 'Keyboard shortcut',
-    LayeredCard = 'Layered card',
-    LinedPaper = 'Lined paper',
-    MasonryGrid = 'Masonry grid',
-    MediaObject = 'Media object',
-    MegaMenu = 'Mega menu',
-    Menu = 'Menu',
-    Modal = 'Modal',
-    NestedDropdowns = 'Nested dropdowns',
-    Notification = 'Notification',
-    OverlayPlayButton = 'Overlay play button',
-    Pagination = 'Pagination',
-    PopoverArrow = 'Popover arrow',
-    PresenceIndicator = 'Presence indicator',
-    PreviousNextButtons = 'Previous next buttons',
-    PricingTable = 'Pricing table',
-    PriceTag = 'Price tag',
-    PropertyList = 'Property list',
-    ProgressBar = 'Progress bar',
-    QuestionsAndAnswers = 'Questions and answers',
-    RadialProgressBar = 'Radial progress bar',
-    RadioButtonGroup = 'Radio button group',
-    RadioSwitch = 'Radio switch',
-    Rating = 'Rating',
-    ResizableElement = 'Resizable element',
-    Ribbon = 'Ribbon',
-    SameHeightColumns = 'Same height columns',
-    SearchBox = 'Search box',
-    Separator = 'Separator',
-    Sidebar = 'Sidebar',
-    SimpleGrid = 'Simple grid',
-    Slider = 'Slider',
-    SpinButton = 'Spin button',
-    SplitNavigation = 'Split navigation',
-    SplitScreen = 'Split screen',
-    StackedCards = 'Stacked cards',
-    StampBorder = 'Stamp border',
-    Statistic = 'Statistic',
-    StatusLight = 'Status light',
-    StepperInput = 'Stepper input',
-    StickyFooter = 'Sticky footer',
-    StickyHeader = 'Sticky header',
-    StickySections = 'Sticky sections',
-    StickyTableColumn = 'Sticky table column',
-    StickyTableHeaders = 'Sticky table headers',
-    Switch = 'Switch',
-    Tab = 'Tab',
-    Teardrop = 'Teardrop',
-    ThreeDimensionsCard = 'Three dimensions card',
-    Timeline = 'Timeline',
-    TogglePasswordVisibility = 'Toggle password visibility',
-    Tooltip = 'Tooltip',
-    TreeDiagram = 'Tree diagram',
-    TriangleButtons = 'Triangle buttons',
-    UploadButton = 'Upload button',
-    ValidationIcon = 'Validation icon',
-    VideoBackground = 'Video background',
-    Voting = 'Voting',
-    Watermark = 'Watermark',
-    Wizard = 'Wizard',
-    ZigzagTimeline = 'Zigzag timeline',
-}
diff --git a/contents/_includes/patterns/drop-cap.njk b/contents/_includes/patterns/drop-cap.njk
new file mode 100644
index 0000000..ad17c66
--- /dev/null
+++ b/contents/_includes/patterns/drop-cap.njk
@@ -0,0 +1,3 @@
+<div class="drop-cap">
+    CSS is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
+</div>
\ No newline at end of file
diff --git a/contents/drop-cap.md b/contents/drop-cap.md
new file mode 100644
index 0000000..ed9bbeb
--- /dev/null
+++ b/contents/drop-cap.md
@@ -0,0 +1,37 @@
+---
+layout: layouts/post.njk
+title: Drop cap
+description: Create a drop cap with CSS
+keywords: css drop cap, css :first-letter
+---
+
+## HTML
+
+```html
+<div class="drop-cap">
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.drop-cap:first-letter {
+    /* Display at the left */
+    float: left;
+    line-height: 1;
+
+    /* Spacing */
+    margin: 0 0.5rem 0 0;
+    padding: 0 0.5rem;
+
+    /* Optional */
+    border: 2px solid rgba(0, 0, 0, .3);
+    font-size: 2rem;
+    font-weight: 700;
+}
+```
+
+{% demo %}
+{% include "patterns/drop-cap.njk" %}
+{% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index fa8a460..830fd02 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -115,6 +115,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Drop area</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/drop-cap/">
+                    <div class="pattern__cover">{% include "patterns/drop-cap.njk" %}</div>
+                    <div class="pattern__title">Drop cap</div>
+                </a>
+            </div>
         </div>
     </div>
 
diff --git a/pages/drop-cap/index.tsx b/pages/drop-cap/index.tsx
deleted file mode 100644
index 61e2dcb..0000000
--- a/pages/drop-cap/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import { Pattern } from '../../constants/Pattern';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.DropCap}>
-            <Head>
-                <meta name="description" content="Create a drop cap with CSS" />
-                <meta name="og:description" content="Create a drop cap with CSS" />
-                <meta name="twitter:description" content="Create a drop cap with CSS" />
-                <meta name="keywords" content="css drop cap" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="container">
-    ...
-</div>
-`}
-                css={`
-                    /* Styles for the first letter */
-                    .container:first-letter {
-                        /* Display at the left */
-                        float: left;
-                        line-height: 1;
-
-                        /* Spacing */
-                        margin: 0 8px 0 0;
-                        padding: 0 8px;
-
-                        /* Optional */
-                        font-size: 64px;
-                        font-weight: 700;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div style={{ width: '256px' }}>
-                        <div className="p-drop-cap">
-                            Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
-                            of a document written in a markup language like HTML. CSS is a cornerstone technology of the
-                            World Wide Web, alongside HTML and JavaScript.
-                        </div>
-                    </div>
-                </div>
-            </BrowserFrame>
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/drop-cap/Cover.tsx b/patterns/drop-cap/Cover.tsx
deleted file mode 100644
index 38f453d..0000000
--- a/patterns/drop-cap/Cover.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from 'react';
-
-import Circle from '../../placeholders/Circle';
-import Frame from '../../placeholders/Frame';
-import Line from '../../placeholders/Line';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                    width: '100%',
-                }}
-            >
-                <div style={{ display: 'flex', height: '32px', width: '100%' }}>
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            border: '2px dashed rgba(0, 0, 0, 0.3)',
-                            display: 'flex',
-                            justifyContent: 'center',
-                            marginRight: '8px',
-                            width: '32px',
-                        }}
-                    >
-                        <Circle />
-                    </div>
-                    <div style={{ flex: 1 }}>
-                        <div style={{ marginBottom: '4px', width: '100%' }}>
-                            <Line />
-                        </div>
-                        <div style={{ marginBottom: '4px', width: '100%' }}>
-                            <Line />
-                        </div>
-                        <div style={{ marginBottom: '4px', width: '80%' }}>
-                            <Line />
-                        </div>
-                        <div style={{ marginBottom: '4px', width: '60%' }}>
-                            <Line />
-                        </div>
-                        <div style={{ marginBottom: '4px', width: '100%' }}>
-                            <Line />
-                        </div>
-                        <div style={{ marginBottom: '4px', width: '80%' }}>
-                            <Line />
-                        </div>
-                        <div style={{ marginBottom: '4px', width: '40%' }}>
-                            <Line />
-                        </div>
-                    </div>
-                </div>
-                <div style={{ marginTop: '4px' }}>
-                    <div style={{ marginBottom: '4px', width: '100%' }}>
-                        <Line />
-                    </div>
-                    <div style={{ marginBottom: '4px', width: '100%' }}>
-                        <Line />
-                    </div>
-                    <div style={{ marginBottom: '4px', width: '80%' }}>
-                        <Line />
-                    </div>
-                    <div style={{ marginBottom: '4px', width: '40%' }}>
-                        <Line />
-                    </div>
-                    <div style={{ marginBottom: '4px', width: '60%' }}>
-                        <Line />
-                    </div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/blocks/_pattern.scss b/styles/blocks/_pattern.scss
index dad4f58..f1076b3 100644
--- a/styles/blocks/_pattern.scss
+++ b/styles/blocks/_pattern.scss
@@ -7,8 +7,6 @@
 }
 .pattern__link {
     color: #6366f1;
-    font-size: 1.25rem;
-    font-weight: 500;
     text-align: center;
     text-decoration: none;
 }
@@ -23,3 +21,7 @@
     width: 100%;
     margin-bottom: 0.5rem;
 }
+.pattern__title {
+    font-size: 1.25rem;
+    font-weight: 500;
+}
\ No newline at end of file
diff --git a/styles/index.scss b/styles/index.scss
index dd73f35..576d702 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -28,6 +28,7 @@
 @import './patterns/docked-at-corner';
 @import './patterns/dot-leader';
 @import './patterns/drop-area';
+@import './patterns/drop-cap';
 
 // Placeholders
 @import './placeholders/circle';
diff --git a/styles/patterns/_drop-cap.scss b/styles/patterns/_drop-cap.scss
new file mode 100644
index 0000000..2800378
--- /dev/null
+++ b/styles/patterns/_drop-cap.scss
@@ -0,0 +1,18 @@
+.drop-cap {
+    overflow: hidden;
+}
+.drop-cap:first-letter {
+    border: 2px solid rgba(0, 0, 0, .3);
+
+    /* Display at the left */
+    float: left;
+    line-height: 1;
+
+    /* Spacing */
+    margin: 0 0.5rem 0 0;
+    padding: 0 0.5rem;
+
+    /* Optional */
+    font-size: 2rem;
+    font-weight: 700;
+}
\ No newline at end of file