Vuance UI Kit

Layout

Row

Responsive grid row that coordinates columns, alignment, and gutters.

Row

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Interactive preview

Changes are reflected in the example and source.

First Second

Properties

Align

No gutters

Vue

<m-container>
  <m-row
    align="center"
    :no-gutters="false"
  >
    <m-col
      :cols="2"
    >
      <m-surface
        variant="filled"
        :style='{&quot;padding&quot;:&quot;20px&quot;}'
      >
        First
      </m-surface>
    </m-col>
    <m-col
      :cols="2"
    >
      <m-surface
        variant="tonal"
        :style='{&quot;padding&quot;:&quot;32px 20px&quot;}'
      >
        Second
      </m-surface>
    </m-col>
  </m-row>
</m-container>