diff --git a/.eleventy.js b/.eleventy.js
index 47d4bfc..82450fa 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -54,8 +54,9 @@ module.exports = function(eleventyConfig) {
         return `<div class="square"></div>`;
     });
     // `corner` can be one of `t`, `r`, `b`, `l`, `tr`, `br`, `tl`, `bl`
-    eleventyConfig.addShortcode('triangle', function(corner) {
-        return `<div class="triangle triangle--${corner}"></div>`;
+    eleventyConfig.addShortcode('triangle', function(corner, size) {
+        const s = size || 'sm';
+        return `<div class="triangle triangle--${corner} triangle--${s}"></div>`;
     });
 
     // Get the first `n` elements of a collection.
diff --git a/contents/_includes/patterns/fixed-at-corner.njk b/contents/_includes/patterns/fixed-at-corner.njk
new file mode 100644
index 0000000..0a61280
--- /dev/null
+++ b/contents/_includes/patterns/fixed-at-corner.njk
@@ -0,0 +1,14 @@
+<div class="fixed-at-corner">
+    <div class="fixed-at-corner__corner fixed-at-corner__corner--tl">
+        {% triangle "tl", "md" %}
+    </div>
+    <div class="fixed-at-corner__corner fixed-at-corner__corner--tr">
+        {% triangle "tr", "md" %}
+    </div>
+    <div class="fixed-at-corner__corner fixed-at-corner__corner--br">
+        {% triangle "br", "md" %}
+    </div>
+    <div class="fixed-at-corner__corner fixed-at-corner__corner--bl">
+        {% triangle "bl", "md" %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/contents/fixed-at-corner.md b/contents/fixed-at-corner.md
new file mode 100644
index 0000000..145c2c6
--- /dev/null
+++ b/contents/fixed-at-corner.md
@@ -0,0 +1,68 @@
+---
+layout: layouts/post.njk
+title: Fixed at corner
+description: Fix an element at corner with CSS
+keywords: css fixed
+---
+
+## HTML
+
+```html
+<div class="fixed-at-corner">
+    <!-- Top-left corner -->
+    <div class="fixed-at-corner__corner fixed-at-corner__corner--tl">
+        ...
+    </div>
+
+    <!-- Top-right corner -->
+    <div class="fixed-at-corner__corner fixed-at-corner__corner--tr">
+        ...
+    </div>
+
+    <!-- Bottom-right corner -->
+    <div class="fixed-at-corner__corner fixed-at-corner__corner--br">
+        ...
+    </div>
+
+    <!-- Bottom-left corner -->
+    <div class="fixed-at-corner__corner fixed-at-corner__corner--bl">    
+        ...
+    </div>
+</div>
+```
+
+## CSS
+
+```css
+.fixed-at-corner {
+    position: relative;
+}
+
+.fixed-at-corner__corner {
+    position: absolute;
+}
+
+.fixed-at-corner__corner--tl {
+    left: 0;
+    top: 0;
+}
+
+.fixed-at-corner__corner--tr {
+    top: 0;
+    right: 0;
+}
+
+.fixed-at-corner__corner--br {
+    bottom: 0;
+    right: 0;
+}
+
+.fixed-at-corner__corner--bl {
+    bottom: 0;
+    left: 0;
+}
+```
+
+{% demo %}
+{% include "patterns/fixed-at-corner.njk" %}
+{% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index ce91a8a..1ee4219 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -139,6 +139,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Feature list</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/fixed-at-corner/">
+                    <div class="pattern__cover">{% include "patterns/fixed-at-corner.njk" %}</div>
+                    <div class="pattern__title">Fixed at corner</div>
+                </a>
+            </div>
         </div>
     </div>
 
diff --git a/pages/fixed-at-corner/index.tsx b/pages/fixed-at-corner/index.tsx
deleted file mode 100644
index bc1bf19..0000000
--- a/pages/fixed-at-corner/index.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Triangle from '../../placeholders/Triangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.FixedAtCorner}>
-            <Head>
-                <meta name="description" content="Fix an element at corner with CSS" />
-                <meta name="og:description" content="Fix an element at corner with CSS" />
-                <meta name="twitter:description" content="Fix an element at corner with CSS" />
-                <meta name="keywords" content="css fixed" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="container">
-    <!-- Top-left corner -->
-    <div class="container__corner container__corner--tl">
-        ...
-    </div>
-
-    <!-- Top-right corner -->
-    <div class="container__corner container__corner--tr">
-        ...
-    </div>
-
-    <!-- Bottom-right corner -->
-    <div class="container__corner container__corner--br">
-        ...
-    </div>
-
-    <!-- Bottom-left corner -->
-    <div class="container__corner container__corner--bl">    
-        ...
-    </div>
-</div>
-`}
-                css={`
-                    .container {
-                        position: relative;
-                    }
-
-                    .container__corner {
-                        position: absolute;
-                    }
-
-                    .container__corner--tl {
-                        left: 0;
-                        top: 0;
-                    }
-
-                    .container__corner--tr {
-                        top: 0;
-                        right: 0;
-                    }
-
-                    .container__corner--br {
-                        bottom: 0;
-                        right: 0;
-                    }
-
-                    .container__corner--bl {
-                        bottom: 0;
-                        left: 0;
-                    }
-                `}
-            >
-                <div style={{ height: '100%', position: 'relative' }}>
-                    <div style={{ left: 0, position: 'absolute', top: 0 }}>
-                        <Triangle size={64} corner="tl" />
-                    </div>
-                    <div style={{ position: 'absolute', right: 0, top: 0 }}>
-                        <Triangle size={64} corner="tr" />
-                    </div>
-                    <div style={{ bottom: 0, position: 'absolute', right: 0 }}>
-                        <Triangle size={64} corner="br" />
-                    </div>
-                    <div style={{ bottom: 0, left: 0, position: 'absolute' }}>
-                        <Triangle size={64} corner="bl" />
-                    </div>
-                </div>
-            </BrowserFrame>
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon, Pattern.FixedAtSide]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/fixed-at-corner/Cover.tsx b/patterns/fixed-at-corner/Cover.tsx
deleted file mode 100644
index d4b0887..0000000
--- a/patterns/fixed-at-corner/Cover.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Triangle from '../../placeholders/Triangle';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div style={{ position: 'relative' }}>
-                <div style={{ left: 0, position: 'absolute', top: 0 }}>
-                    <Triangle size={32} />
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index cf368bf..28be893 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -32,6 +32,7 @@
 @import './patterns/fading-long-section';
 @import './patterns/feature-comparison';
 @import './patterns/feature-list';
+@import './patterns/fixed-at-corner';
 
 // Placeholders
 @import './placeholders/circle';
diff --git a/styles/patterns/_fixed-at-corner.scss b/styles/patterns/_fixed-at-corner.scss
new file mode 100644
index 0000000..2e18fd3
--- /dev/null
+++ b/styles/patterns/_fixed-at-corner.scss
@@ -0,0 +1,32 @@
+.fixed-at-corner {
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgba(0, 0, 0, .3);
+    border-radius: 0.25rem;
+
+    position: relative;
+}
+
+.fixed-at-corner__corner {
+    position: absolute;
+}
+
+.fixed-at-corner__corner--tl {
+    left: 0;
+    top: 0;
+}
+
+.fixed-at-corner__corner--tr {
+    top: 0;
+    right: 0;
+}
+
+.fixed-at-corner__corner--br {
+    bottom: 0;
+    right: 0;
+}
+
+.fixed-at-corner__corner--bl {
+    bottom: 0;
+    left: 0;
+}
\ No newline at end of file
diff --git a/styles/placeholders/_circle.scss b/styles/placeholders/_circle.scss
index 68392dc..e1c194b 100644
--- a/styles/placeholders/_circle.scss
+++ b/styles/placeholders/_circle.scss
@@ -1,15 +1,15 @@
 .circle {
     background: rgba(0, 0, 0, .3);
     border-radius: 9999px;
-    height: var(--var-circle-size);
-    width: var(--var-circle-size);
+    height: var(--circle-size);
+    width: var(--circle-size);
 }
 .circle--sm {
-    --var-circle-size: 0.5rem;
+    --circle-size: 0.5rem;
 }
 .circle--md {
-    --var-circle-size: 2rem;
+    --circle-size: 2rem;
 }
 .circle--lg {
-    --var-circle-size: 4rem;
+    --circle-size: 4rem;
 }
\ No newline at end of file
diff --git a/styles/placeholders/_triangle.scss b/styles/placeholders/_triangle.scss
index 78f8af6..24a7615 100644
--- a/styles/placeholders/_triangle.scss
+++ b/styles/placeholders/_triangle.scss
@@ -5,33 +5,42 @@
 }
 .triangle--t {
     border-color: transparent transparent rgba(0, 0, 0, .3) transparent;
-    border-width: 0 0.5rem 0.5rem 0.5rem;
+    border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
 }
 .triangle--r {
     border-color: transparent transparent transparent rgba(0, 0, 0, .3);
-    border-width: 0.5rem 0 0.5rem 1rem;
+    border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
 }
 .triangle--b {
     border-color: rgba(0, 0, 0, .3) transparent transparent transparent;
-    border-width: 0.5rem 0.5rem 0 0.5rem;
+    border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
 }
 .triangle--l {
     border-color: transparent rgba(0, 0, 0, .3) transparent transparent;
-    border-width: 0.5rem 1rem 0.5rem 0;
+    border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
 }
 .triangle--tr {
     border-color: transparent rgba(0, 0, 0, .3) transparent transparent;
-    border-width: 0 0.5rem 0.5rem 0;
+    border-width: 0 var(--triangle-size) var(--triangle-size) 0;
 }
 .triangle--br {
     border-color: transparent transparent rgba(0, 0, 0, .3) transparent;
-    border-width: 0 0 0.5rem 0.5rem;
+    border-width: 0 0 var(--triangle-size) var(--triangle-size);
 }
 .triangle--bl {            
     border-color: transparent transparent transparent rgba(0, 0, 0, .3);
-    border-width: 0.5rem 0 0 0.5rem;
+    border-width: var(--triangle-size) 0 0 var(--triangle-size);
 }
 .triangle--tl {
     border-color: rgba(0, 0, 0, .3) transparent transparent transparent;
-    border-width: 0.5rem 0.5rem 0 0;
+    border-width: var(--triangle-size) var(--triangle-size) 0 0;
+}
+.triangle--sm {
+    --triangle-size: 0.5rem;
+}
+.triangle--md {
+    --triangle-size: 2rem;
+}
+.triangle--lg {
+    --triangle-size: 4rem;
 }
\ No newline at end of file