Inset Card Component

Basic Inset Card

Recessed appearance for nested or secondary content

This is an inset card with a subtle background that creates a recessed appearance. It's perfect for nested content within standard cards.

<div class="elv-inset-card">
  <p>This is an inset card with a subtle background...</p>
</div>

Bordered Variant

Border-only style for even lighter appearance

This variant uses white background with just a border, creating a subtle container without visual weight.

<div class="elv-inset-card elv-inset-card--bordered">
  <p>Border-only variant...</p>
</div>

Subtle Variant

Minimal background with no border

The subtle variant has a very light background with no border, perfect for inline notes or callouts.

<div class="elv-inset-card elv-inset-card--subtle">
  <p>Subtle variant with minimal styling...</p>
</div>

Nested in Standard Card

Common pattern: inset card within a standard card

Product Overview

This is a standard card with primary content and information about the product.

Note:

This inset card contains secondary information, like a note, disclaimer, or related tip.

<div class="demo-standard-card">
  <h3>Product Overview</h3>
  <p>Primary content...</p>
  <div class="elv-inset-card">
    <p>Secondary nested content...</p>
  </div>
</div>

Size Variants

Small, default, and large padding options

Small padding (8px) - compact for dense layouts

Default padding (16px) - standard size for most uses

Large padding (24px) - generous spacing for important content

<div class="elv-inset-card elv-inset-card--sm">Small</div>
<div class="elv-inset-card">Default</div>
<div class="elv-inset-card elv-inset-card--lg">Large</div>

Common Use Cases

Practical examples of when to use inset cards

Customer Testimonial

"This product has completely transformed our workflow. The team support is excellent and the features are exactly what we needed."

— Sarah Johnson, Product Manager at TechCorp

API Integration

To integrate with our API, use the following endpoint:


            POST https://api.example.com/v1/products

Important Notice

Please review the following before proceeding:

Warning

This action cannot be undone. Make sure you have a backup before proceeding.

Account Settings

Update your profile information below:

Display Name

Usage Guidelines

Purpose: Container for secondary, nested, or supporting content
Visual Hierarchy: Inset cards are less prominent than standard cards
Nesting: Common to place inset cards inside standard cards
Background: Default uses bg-neutral-5 for subtle recessed appearance
vs Standard Card: Standard cards float on page; inset cards are embedded within
Common Uses: Quotes, code blocks, notes, warnings, nested forms
Accent Borders: Can add left border for warnings/notes (4px solid)
Size: Use small for compact info, large for emphasis

Accessibility Notes

Semantic HTML: Use appropriate semantic tags for content (blockquote, code, aside)
Color Contrast: All text meets WCAG AA standards on default backgrounds
Focus: Interactive elements inside inset cards should have visible focus
Landmarks: For important notes, consider <aside> with aria-label
Visual Only: Don't rely on background color alone to convey meaning

Design System Specs

Default Background	var(--bg-neutral-5) / #fafafa
Bordered Background	var(--bg-neutral-0) / #ffffff
Subtle Background	var(--bg-neutral-10) / #f2f2f3
Border	1px solid var(--border-light) / #dfdfe2
Border Radius	8px (radius-sm)
Small Padding	8px
Default Padding	16px
Large Padding	24px
Accent Border	4px solid (left border for notes/warnings)
Text Color	var(--text-default) / #201f23

Standard Card vs Inset Card

Understanding when to use each card type

Aspect	Standard Card	Inset Card
Background	var(--bg-neutral-0) / #ffffff (brightest)	var(--bg-neutral-5) / #fafafa (recessed)
Elevation	Floats on page	Embedded within
Shadow	Optional (floating only)	Never
Usage	Primary content containers	Secondary nested content
Border Radius	12-16px (md-lg)	8px (sm)