Vuance UI Kit

Layout

Responsive

Aspect-ratio boundary for stable responsive media and preview geometry.

Responsive

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Interactive preview

Changes are reflected in the example and source.

Responsive media

Properties

Aspect ratio

Vue

<m-responsive
  :style='{&quot;width&quot;:&quot;min(100%, 520px)&quot;}'
  aspect-ratio="16 / 9"
>
  <m-surface
    variant="filled"
    shape="large"
    :style='{&quot;width&quot;:&quot;100%&quot;,&quot;height&quot;:&quot;100%&quot;,&quot;display&quot;:&quot;grid&quot;,&quot;placeItems&quot;:&quot;center&quot;}'
  >
    Responsive media
  </m-surface>
</m-responsive>