vue-material/docs/src/pages/components/Whiteframe.vue

<template>
  <demo-page label="Components - Whiteframe">
    <div slot="examples" class="whiteframe-list">
      <demo-example label="Default">
        <md-whiteframe md-elevation="1">1dp</md-whiteframe>
        <md-whiteframe md-elevation="2">2dp</md-whiteframe>
        <md-whiteframe md-elevation="3">3dp</md-whiteframe>
        <md-whiteframe md-elevation="4">4dp</md-whiteframe>
        <md-whiteframe md-elevation="5">5dp</md-whiteframe>
        <md-whiteframe md-elevation="6">6dp</md-whiteframe>
        <md-whiteframe md-elevation="7">7dp</md-whiteframe>
        <md-whiteframe md-elevation="8">8dp</md-whiteframe>
        <md-whiteframe md-elevation="9">9dp</md-whiteframe>
        <md-whiteframe md-elevation="10">10dp</md-whiteframe>
        <md-whiteframe md-elevation="11">11dp</md-whiteframe>
        <md-whiteframe md-elevation="12">12dp</md-whiteframe>
        <md-whiteframe md-elevation="13">13dp</md-whiteframe>
        <md-whiteframe md-elevation="14">14dp</md-whiteframe>
        <md-whiteframe md-elevation="15">15dp</md-whiteframe>
        <md-whiteframe md-elevation="16">16dp</md-whiteframe>
        <md-whiteframe md-elevation="17">17dp</md-whiteframe>
        <md-whiteframe md-elevation="18">18dp</md-whiteframe>
        <md-whiteframe md-elevation="19">19dp</md-whiteframe>
        <md-whiteframe md-elevation="20">20dp</md-whiteframe>
        <md-whiteframe md-elevation="21">21dp</md-whiteframe>
        <md-whiteframe md-elevation="22">22dp</md-whiteframe>
        <md-whiteframe md-elevation="23">23dp</md-whiteframe>
        <md-whiteframe md-elevation="24">24dp</md-whiteframe>
      </demo-example>
    </div>

    <div slot="code">
      <demo-example label="Default">
        <code-block lang="xml">
&lt;md-whiteframe md-elevation=&quot;1&quot;&gt;1dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;2&quot;&gt;2dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;3&quot;&gt;3dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;4&quot;&gt;4dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;5&quot;&gt;5dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;6&quot;&gt;6dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;7&quot;&gt;7dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;8&quot;&gt;8dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;9&quot;&gt;9dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;10&quot;&gt;10dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;11&quot;&gt;11dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;12&quot;&gt;12dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;13&quot;&gt;13dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;14&quot;&gt;14dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;15&quot;&gt;15dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;16&quot;&gt;16dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;17&quot;&gt;17dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;18&quot;&gt;18dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;19&quot;&gt;19dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;20&quot;&gt;20dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;21&quot;&gt;21dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;22&quot;&gt;22dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;23&quot;&gt;23dp&lt;/md-whiteframe&gt;
&lt;md-whiteframe md-elevation=&quot;24&quot;&gt;24dp&lt;/md-whiteframe&gt;
        </code-block>
      </demo-example>
    </div>

    <div slot="api">

    </div>
  </demo-page>
</template>

<style lang="scss">
  .whiteframe-list .demo-example .demo-example-body {
    padding-bottom: 48px;

    .md-whiteframe {
      width: 100px;
      height: 100px;
      margin: 24px 12px 12px 24px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>