diff --git a/.eleventy.js b/.eleventy.js
index 30b968e..460ac73 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -3,6 +3,8 @@ const markdownIt = require('markdown-it');
 const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 const htmlmin = require('html-minifier');
 
+const randomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+
 module.exports = function(eleventyConfig) {
     // Copy the `img` and `css` folders to the output
     eleventyConfig.addPassthroughCopy('assets');
@@ -40,8 +42,9 @@ module.exports = function(eleventyConfig) {
         return `<div class="lines">${content}</div>`;
     });
 
-    eleventyConfig.addShortcode('rectangle', function() {
-        return `<div class="rectangle"></div>`;
+    eleventyConfig.addShortcode('rectangle', function(width) {
+        const w = width || randomInteger(1, 4) * 20;
+        return `<div class="rectangle rectangle--${w}"></div>`;
     });
     eleventyConfig.addShortcode('square', function() {
         return `<div class="square"></div>`;
diff --git a/styles/placeholders/_rectangle.scss b/styles/placeholders/_rectangle.scss
index 2afc734..2d0988f 100644
--- a/styles/placeholders/_rectangle.scss
+++ b/styles/placeholders/_rectangle.scss
@@ -2,5 +2,19 @@
     background: rgba(0, 0, 0, .3);
     border-radius: 0.25rem;
     height: 0.5rem;
+}
+.rectangle--20 {
+    width: 20%;
+}
+.rectangle--40 {
+    width: 40%;
+}
+.rectangle--60 {
+    width: 60%;
+}
+.rectangle--80 {
+    width: 80%;
+}
+.rectangle--100 {
     width: 100%;
 }
\ No newline at end of file