Tailwind UI Pattern Registry for humans and agents

depth lines vertical frame structure luxury editorial parallax editorial layout structural framing hero section side decoration premium landing page depth cue content container visual hierarchy sections feel flat without structural cues need visual depth without complex backgrounds want editorial/luxury framing effect

Depth Lines

Fetch snippet JSON: curl https://webspire.de/snippets/decorative/depth-lines.json
Format
Preview
Stage Background
Customize

Quick Start

<section class="depth-lines py-24 px-16">Content</section>

Details

Tailwind
v4.x
Browser
baseline-2024
Size
1412 bytes · 57 lines
Custom Properties
--dl-color-1--dl-color-2--dl-color-3--dl-spacing--dl-inset-y
Classes
.depth-lines.depth-lines-left
depth lines vertical frame structure luxury editorial parallax

Three vertical lines per side with cascading opacity (20% → 10% → 5%) create a sense of visual depth and editorial structure. Built with a single ::before/::after pair using box-shadow to replicate additional lines — no extra HTML elements needed.

Full-width section framing

<section class="depth-lines relative py-24 px-20">
  <div class="relative z-10 mx-auto max-w-3xl text-center">
    <h2 class="text-4xl font-bold">Premium content</h2>
    <p class="mt-4 text-lg text-stone-500">Framed by structural depth lines.</p>
  </div>
</section>

Left-side only (sidebar accent)

<div class="depth-lines-left relative py-12 pl-24 pr-8">
  <h3 class="relative z-10 font-semibold">Feature highlight</h3>
  <p class="relative z-10 mt-2 text-stone-500">Left framing for editorial emphasis.</p>
</div>

Dark mode with wider spacing

<section class="depth-lines py-24 px-24 bg-stone-950"
  style="--dl-color-1: oklch(0.6 0 0 / 0.15); --dl-color-2: oklch(0.6 0 0 / 0.08); --dl-color-3: oklch(0.6 0 0 / 0.03); --dl-spacing: 2rem;">
  <div class="relative z-10 text-white">Dark editorial content</div>
</section>