<div class="padding-lg flex flex-gap-md flex-wrap">
 <div class="child child--1"></div>
 <div class="child child--2"></div>
 <div class="child child--3"></div>
 <div class="child child--4"></div>
 <div class="child child--5"></div>
</div>
// box-shadow - 🐞 https://codyhouse.co/ds/get-started

.child {
 width: 200px;
 height: 200px;
 background-color: var(--color-white);
 border-radius: var(--radius);
}

.child--1 {
 box-shadow: var(--shadow-xs);
}

.child--2 {
 box-shadow: var(--shadow-sm);
}

.child--3 {
 box-shadow: var(--shadow-md);
}

.child--4 {
 box-shadow: var(--shadow-lg);
}

.child--5 {
 box-shadow: var(--shadow-xl);
}

body {
 background-color: var(--color-contrast-lower);
}

External CSS

  1. https://unpkg.com/codyhouse-framework@2.1.3/main/assets/css/base/_mixins.scss
  2. https://unpkg.com/codyhouse-framework@2.1.3/main/assets/css/base/_breakpoints.scss
  3. https://unpkg.com/codyhouse-framework@2.1.3/main/assets/css/base/_accessibility.scss
  4. https://unpkg.com/codyhouse-framework@2.1.3/main/assets/css/style.css

External JavaScript

This Pen doesn't use any external JavaScript resources.