first

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

@@ -0,0 +1,57 @@
+### 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.
+
+<!--code-->
+
+```vue
+<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>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="field">
+  <div class="control">
+    <div class="l-card">
+      <VBlock title="Anna B." subtitle="UX Designer" center mResponsive>
+        <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>
+    </div>
+  </div>
+</div>
+
+<!--/example-->