diff --git a/.eleventy.js b/.eleventy.js
index ec53720..90b9e65 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -15,6 +15,33 @@ module.exports = function(eleventyConfig) {
     });
     eleventyConfig.setLibrary('md', markdownLibrary);
 
+    // Shortcodes
+
+    eleventyConfig.addShortcode('circle', function() {
+        return `<div class="circle"></div>`;
+    });
+    // `direction` can be `hor` or `ver`
+    eleventyConfig.addShortcode('line', function(dir) {
+        return `<div class="line line--${dir}"></div>`;
+    });
+    eleventyConfig.addShortcode('lines', function(dir, numLines) {
+        const content = Array(numLines).fill('').map(_ => {
+            return `<div class="line line--${dir}"></div>`
+        }).join('');
+        return `<div class="lines">${content}</div>`;
+    });
+
+    eleventyConfig.addShortcode('rectangle', function() {
+        return `<div class="rectangle"></div>`;
+    });
+    eleventyConfig.addShortcode('square', function() {
+        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>`;
+    });
+
     // Get the first `n` elements of a collection.
     eleventyConfig.addFilter("head", (array, n) => {
         if (!Array.isArray(array) || array.length === 0) {
diff --git a/placeholders/BrowserFrame.tsx b/placeholders/BrowserFrame.tsx
deleted file mode 100644
index c617eba..0000000
--- a/placeholders/BrowserFrame.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { Window } from '@1milligram/design';
-
-import { Code } from '../components/Code';
-
-interface BrowserFrameProps {
-    css: string;
-    html: string;
-}
-
-const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
-    return (
-        <Window>
-            <div className="demo__html">
-                <Code language="markup">{html}</Code>
-            </div>
-            <div className="demo__css">
-                <Code language="css">{css}</Code>
-            </div>
-            <div className="demo__live">{children}</div>
-        </Window>
-    );
-};
-
-export default BrowserFrame;
diff --git a/placeholders/Circle.tsx b/placeholders/Circle.tsx
deleted file mode 100644
index ace592e..0000000
--- a/placeholders/Circle.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-
-interface CircleProps {
-    backgroundColor?: string;
-    size?: number;
-}
-
-const Circle: React.FC<CircleProps> = ({ backgroundColor = 'rgba(0, 0, 0, .3)', size = 16 }) => {
-    return (
-        <div
-            style={{
-                backgroundColor,
-                borderRadius: '9999px',
-                height: `${size}px`,
-                width: `${size}px`,
-            }}
-        />
-    );
-};
-
-export default Circle;
diff --git a/placeholders/Line.tsx b/placeholders/Line.tsx
deleted file mode 100644
index f5c7a22..0000000
--- a/placeholders/Line.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react';
-
-interface LineProps {
-    backgroundColor?: string;
-}
-
-const Line: React.FC<LineProps> = ({ backgroundColor = 'rgba(0, 0, 0, 0.3)' }) => {
-    return (
-        <div
-            style={{
-                backgroundColor,
-                height: '1px',
-                width: '100%',
-            }}
-        />
-    );
-};
-
-export default Line;
diff --git a/placeholders/Rectangle.tsx b/placeholders/Rectangle.tsx
deleted file mode 100644
index eb73e00..0000000
--- a/placeholders/Rectangle.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-interface RectangleProps {
-    height?: number;
-}
-
-const Rectangle: React.FC<RectangleProps> = ({ height = 8 }) => {
-    return (
-        <div
-            style={{
-                backgroundColor: 'rgba(0, 0, 0, .3)',
-                borderRadius: '0.25rem',
-                height: `${height}px`,
-                width: '100%',
-            }}
-        />
-    );
-};
-
-export default Rectangle;
diff --git a/placeholders/Square.tsx b/placeholders/Square.tsx
deleted file mode 100644
index 75a8e2d..0000000
--- a/placeholders/Square.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-
-interface SquareProps {
-    backgroundColor?: string;
-    size?: string;
-}
-
-const Square: React.FC<SquareProps> = ({ backgroundColor = 'rgba(0, 0, 0, 0.3)', size = '100%' }) => {
-    return (
-        <div
-            style={{
-                backgroundColor,
-                borderRadius: '0.25rem',
-                height: size,
-                width: size,
-            }}
-        />
-    );
-};
-
-export default Square;
diff --git a/placeholders/Triangle.tsx b/placeholders/Triangle.tsx
deleted file mode 100644
index 00d83dc..0000000
--- a/placeholders/Triangle.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from 'react';
-
-interface TriangleProps {
-    backgroundColor?: string;
-    corner?: string;
-    size?: number;
-}
-
-const Triangle: React.FC<TriangleProps> = ({ backgroundColor = 'rgba(0, 0, 0, .3)', size = 16, corner = 'tl' }) => {
-    let bw = '';
-    let bc = '';
-    switch (corner) {
-        case 't':
-            bw = `0 ${size}px ${size}px ${size}px`;
-            bc = `transparent transparent ${backgroundColor} transparent`;
-            break;
-
-        case 'r':
-            bw = `${size}px 0 ${size}px ${2 * size}px`;
-            bc = `transparent transparent transparent ${backgroundColor}`;
-            break;
-
-        case 'b':
-            bw = `${size}px ${size}px 0 ${size}px`;
-            bc = `${backgroundColor} transparent transparent transparent`;
-            break;
-
-        case 'l':
-            bw = `${size}px ${2 * size}px ${size}px 0`;
-            bc = `transparent ${backgroundColor} transparent transparent`;
-            break;
-
-        case 'tr':
-            bw = `0 ${size}px ${size}px 0`;
-            bc = `transparent ${backgroundColor} transparent transparent`;
-            break;
-
-        case 'br':
-            bw = `0 0 ${size}px ${size}px`;
-            bc = `transparent transparent ${backgroundColor} transparent`;
-            break;
-
-        case 'bl':
-            bw = `${size}px 0 0 ${size}px`;
-            bc = `transparent transparent transparent ${backgroundColor}`;
-            break;
-
-        case 'tl':
-        default:
-            bw = `${size}px ${size}px 0 0`;
-            bc = `${backgroundColor} transparent transparent transparent`;
-            break;
-    }
-
-    return (
-        <div
-            style={{
-                borderColor: bc,
-                borderStyle: 'solid',
-                borderWidth: bw,
-                height: 0,
-                width: 0,
-            }}
-        />
-    );
-};
-
-export default Triangle;
diff --git a/placeholders/VerticalLine.tsx b/placeholders/VerticalLine.tsx
deleted file mode 100644
index d931e93..0000000
--- a/placeholders/VerticalLine.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-const VerticalLine: React.FC<{}> = () => {
-    return (
-        <div
-            style={{
-                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                height: '100%',
-                width: '1px',
-            }}
-        />
-    );
-};
-
-export default VerticalLine;
diff --git a/styles/blocks/_category.scss b/styles/blocks/_category.scss
index 0f52a88..b923daa 100644
--- a/styles/blocks/_category.scss
+++ b/styles/blocks/_category.scss
@@ -25,6 +25,6 @@
 @media (min-width: 768px) {
     :root {
         --category__name-font-size: 2rem;
-        --category__post-num-columns: 2;
+        --category__post-num-columns: 5;
     }
 }
diff --git a/styles/index.scss b/styles/index.scss
index ae62958..d1bb302 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -9,5 +9,15 @@
 @import './blocks/nav';
 @import './blocks/post';
 
+// Cover
+@import './covers/accordion';
+
+// Placeholders
+@import './placeholders/circle';
+@import './placeholders/line';
+@import './placeholders/rectangle';
+@import './placeholders/square';
+@import './placeholders/triangle';
+
 // Themes
 @import './themes/dracula.scss';
diff --git a/styles/placeholders/_circle.scss b/styles/placeholders/_circle.scss
new file mode 100644
index 0000000..81ac6f4
--- /dev/null
+++ b/styles/placeholders/_circle.scss
@@ -0,0 +1,6 @@
+.circle {
+    background: rgba(0, 0, 0, .3);
+    border-radius: 9999px;
+    height: 1rem;
+    width: 1rem;
+}
\ No newline at end of file
diff --git a/styles/placeholders/_line.scss b/styles/placeholders/_line.scss
new file mode 100644
index 0000000..d5430bc
--- /dev/null
+++ b/styles/placeholders/_line.scss
@@ -0,0 +1,14 @@
+.line {
+    background: rgba(0, 0, 0, 0.3);
+}
+.line--hor {
+    height: 1px;
+    width: 100%;
+}
+.line--ver {
+    height: 100%;
+    width: 1px;
+}
+.lines .line {
+    margin-bottom: 0.25rem;
+}
\ No newline at end of file
diff --git a/styles/placeholders/_rectangle.scss b/styles/placeholders/_rectangle.scss
new file mode 100644
index 0000000..2afc734
--- /dev/null
+++ b/styles/placeholders/_rectangle.scss
@@ -0,0 +1,6 @@
+.rectangle {
+    background: rgba(0, 0, 0, .3);
+    border-radius: 0.25rem;
+    height: 0.5rem;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/styles/placeholders/_square.scss b/styles/placeholders/_square.scss
new file mode 100644
index 0000000..5eb4d05
--- /dev/null
+++ b/styles/placeholders/_square.scss
@@ -0,0 +1,6 @@
+.square {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 0.25rem;
+    height: 100%;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/styles/placeholders/_triangle.scss b/styles/placeholders/_triangle.scss
new file mode 100644
index 0000000..78f8af6
--- /dev/null
+++ b/styles/placeholders/_triangle.scss
@@ -0,0 +1,37 @@
+.triangle {
+    border-style: solid;
+    height: 0;
+    width: 0;
+}
+.triangle--t {
+    border-color: transparent transparent rgba(0, 0, 0, .3) transparent;
+    border-width: 0 0.5rem 0.5rem 0.5rem;
+}
+.triangle--r {
+    border-color: transparent transparent transparent rgba(0, 0, 0, .3);
+    border-width: 0.5rem 0 0.5rem 1rem;
+}
+.triangle--b {
+    border-color: rgba(0, 0, 0, .3) transparent transparent transparent;
+    border-width: 0.5rem 0.5rem 0 0.5rem;
+}
+.triangle--l {
+    border-color: transparent rgba(0, 0, 0, .3) transparent transparent;
+    border-width: 0.5rem 1rem 0.5rem 0;
+}
+.triangle--tr {
+    border-color: transparent rgba(0, 0, 0, .3) transparent transparent;
+    border-width: 0 0.5rem 0.5rem 0;
+}
+.triangle--br {
+    border-color: transparent transparent rgba(0, 0, 0, .3) transparent;
+    border-width: 0 0 0.5rem 0.5rem;
+}
+.triangle--bl {            
+    border-color: transparent transparent transparent rgba(0, 0, 0, .3);
+    border-width: 0.5rem 0 0 0.5rem;
+}
+.triangle--tl {
+    border-color: rgba(0, 0, 0, .3) transparent transparent transparent;
+    border-width: 0.5rem 0.5rem 0 0;
+}
\ No newline at end of file