Testing dp-image System

Canvas Component Analysis: dp-image system provides figure-based image styling with rounded corners, borders, shadows, padding, and popup functionality. Multiple size and ratio variants available.

Test 1: Featured Hero Image

Large Image with Full Styling

This pattern shows how Canvas displays featured images with comprehensive styling - rounded corners, shadow, border, and padding.

Nebula in space with colorful gas clouds and bright stars — *A stellar nebula showing the birthplace of new stars. The techniques used to capture this image are the same foundational principles applied in thermal imaging for HVAC/electrical diagnostics.*

Test 2: Small Figure Gallery

Canvas uses small figures in sequences to show processes or comparisons. These have different styling - smaller radius, minimal padding.

Stage 1: Nebular cloud formation
Stage 2: Protostar formation
Stage 3: Main sequence star

Test 3: Image Styling Variants

Basic Image

Bordered Image

Full Styling

dp-image System Requirements:

✓ .dp-image-rounded-5 / .dp-image-rounded-10 - Border radius variants
✓ .dp-image-bordered - Border styling
✓ .dp-image-shadow - Box shadow effect
✓ .dp-image-padded - Padding around image
✓ .dp-full-width - Full width responsiveness
✓ .dp-ratio-1-1 / .dp-ratio-4-3 - Aspect ratio control
✓ .dp-popup-image - Click to enlarge functionality
✓ .object-fit-cover - CSS object-fit integration
✓ .dp-order-figure - Ordered list styling for image sequences

Goal: Build Canvas-accurate image styling with responsive behavior and optional popup functionality.