oa/documentation/block/v-block-base-responsive-documentation.md

Responsive mobile

<VBlock /> can be made responsive for the mobile viewport by adding the mResponsive prop to the component. When set to responsive mode, the flex block elements stack to fit in the available space. Resize your screen to see it in action.

<template>
  <VBlock
    title="Anna B."
    subtitle="UX Designer"
    center
    m-responsive
  >
    <template #icon>
      <VAvatar
        size="medium"
        picture="https://media.cssninja.io/content/avatars/19.jpg"
        badge="/images/icons/flags/germany.svg"
      />
    </template>
    <template #action>
      <VButton color="primary" elevated>
        View
      </VButton>
    </template>
  </VBlock>
</template>

View