Shadows

Add depth to your elements with box shadows! Shadows make elements look like they're floating above the page.

How Shadows Work

Use sb-* (shadow bottom) classes to add elevation. Higher numbers = bigger shadow = looks more "lifted".

Also available: st-* (top), sl-* (left), sr-* (right).

Design tip

Important elements (like buttons and cards) usually have shadows to make them stand out. The shadow size shows importance!

Shadow Scale

Choose from 24 shadow levels (0 = no shadow, 24 = biggest shadow):

Class	Description
sb-0	No shadow
sb-1	Subtle shadow (buttons)
sb-2	Light shadow (cards)
sb-4	Medium shadow (dropdowns)
sb-8	Pronounced shadow (modals)
sb-12	Strong shadow (popovers)
sb-16	Heavy shadow
sb-24	Maximum shadow (dialogs)

<div class="sb-0">No shadow</div>
<div class="sb-2">Light</div>
<div class="sb-4">Medium</div>
<div class="sb-8">Strong</div>
<div class="sb-16">Heavy</div>

When to Use Each Shadow

Shadow Guide

• sb-1 to sb-2: Buttons, input fields, subtle cards
• sb-3 to sb-6: Cards, panels, raised sections
• sb-8 to sb-12: Dropdown menus, tooltips
• sb-16 to sb-24: Modals, dialogs, important overlays

Button with Shadow

Shadows make buttons look clickable:

<button class="pa-3 br-2 sb-2">Click Me</button>

Card Component

Cards often use sb-2 to sb-4:

<div class="pa-4 br-2 sb-4">
  <h3>Card Title</h3>
  <p>Some content here...</p>
</div>

Dropdown Menu

Menus use larger shadows to appear above content:

<div class="pa-2 br-2 sb-8">
  <div class="pa-2">Option 1</div>
  <div class="pa-2">Option 2</div>
  <div class="pa-2">Option 3</div>
</div>

Modal / Dialog

Modals use the largest shadows:

<div class="pa-6 br-3 sb-24">
  <h2>Modal Title</h2>
  <p>Important content here!</p>
</div>

Hover Effect Idea

A common pattern is to increase the shadow on hover to make elements feel interactive. This requires a little custom CSS:

/* In your CSS */
.card-hover {
  transition: box-shadow 0.2s ease;
}
.card-hover:hover {
  box-shadow: /* sb-8 values */;
}

<!-- In your HTML -->
<div class="card-hover sb-2">Hover over me!</div>

Pro tip

Use CSS transitions to animate shadow changes smoothly!

Customization

You can customize shadow colors using CSS variables:

<style>
  .custom-shadow {
    --shadow-color: 99, 102, 241; /* RGB values */
  }
</style>

<div class="custom-shadow sb-8">
  Purple shadow!
</div>

Quick Reference

Class	Usage
sb-0	None (remove shadow)
sb-1 to sb-4	Subtle (buttons, cards)
sb-5 to sb-8	Medium (dropdowns)
sb-9 to sb-16	Strong (menus, popovers)
sb-17 to sb-24	Maximum (modals, dialogs)
st-*, sl-*, sr-*	Top, left, right shadows