<main class="padding-lg bg-dark">
  <ul class="flex flex-wrap gap-md justify-center">
    <li class="shadow-ring"></li>
    <li class="shadow-xs"></li>
    <li class="shadow-sm"></li>
    <li class="shadow-md"></li>
    <li class="shadow-lg"></li>
    <li class="shadow-xl"></li>
  </ul>
</main>

<main class="padding-lg">
  <ul class="flex flex-wrap gap-md justify-center">
    <li class="shadow-ring"></li>
    <li class="shadow-ring shadow-xs"></li>
    <li class="shadow-ring shadow-sm"></li>
    <li class="shadow-ring shadow-md"></li>
    <li class="shadow-ring shadow-lg"></li>
    <li class="shadow-ring shadow-xl"></li>
  </ul>
</main>
li {
  background-color: var(--color-bg);
  height: 128px;
  width: 128px;
  border-radius: var(--radius-md);
}

External CSS

  1. https://unpkg.com/codyframe/main/css/reset.css
  2. https://unpkg.com/codyframe/main/css/typography.css
  3. https://unpkg.com/codyframe/main/css/icons.css
  4. https://unpkg.com/codyframe/main/css/util.css

External JavaScript

This Pen doesn't use any external JavaScript resources.