Dismissible Alert (Intrinsic to Fixed)

This alert will smoothly collapse to zero when dismissed, using block-size: 0 after starting at auto.
Premium Product

This card demonstrates interpolate-size on a standard <article> element.

The interpolate-size property is a game-changer for UI components that need to respond to dynamic content without jumping or requiring complex resize observers.

Detailed Specs:
• 100% Organic Cotton, ethically sourced from sustainable farms.
• Eco-friendly, biodegradable packaging materials.
• Lifetime warranty against manufacturing defects.
• Free worldwide shipping on all orders over $50.
• Reinforced stitching for maximum durability.
• Breathable fabric designed for all-season comfort.
• Available in 12 vibrant, fade-resistant colors.

By using block-size: auto in the expanded state, the browser calculates the layout naturally and then transitions to that exact pixel value. This ensures that the animation is always perfectly timed to the content.

calc-size() Example

Hover or focus the badge to see it expand to its content width + 40px.

Badge