Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

Embed

Use an embed to create elements with an intrinsic aspect ratio. This is particularly useful for avoiding content shifting on your page when images load.

Basic usage

<Embed width={16} height={9}>
  <div
    style={{
      backgroundImage: `url(https://images.unsplash.com/photo-1477973770766-6228305816df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1949&q=80)`,
      backgroundSize: "cover"
    }}
  />
</Embed>

API

Embed
width*number
The relative width of the embed container
height*number
The relative height of the embed container
cssInterpolationWithTheme<any>