<template>
  <div>
    <card title="Theme example">
      <date-picker color="#5c6bc0" class="mb-4 d-block" />

      <date-picker color="#e91e63" class="mb-4 pt-1 d-block" />

      <date-picker color="#7b1fa2" class="mb-4  d-block" />

      <date-picker color="#1e88e5" class="mb-4 pt-1 d-block" />

      <date-picker color="#03a9f4" class="mb-4  d-block" />

      <date-picker color="#00acc1" class="mb-4 pt-1 d-block" />

      <date-picker color="#ff9800" class="mb-4  d-block" />

      <date-picker color="dimgray" class="mb-4 pt-1 d-block" />

      <template slot="code">
        <!-- eslint-disable -->
        <highlight-code lang="html" v-pre>
          &lt;date-picker color="#5c6bc0" /&gt;
        </highlight-code>
        <highlight-code lang="html" v-pre>
          &lt;date-picker color="#e91e63" /&gt;
        </highlight-code>
        <highlight-code lang="html" v-pre>
          &lt;date-picker color="#7b1fa2" /&gt;
        </highlight-code>
        <highlight-code lang="html" v-pre>
          &lt;date-picker color="#1e88e5" /&gt;
        </highlight-code>
        <highlight-code lang="html" v-pre>
          &lt;date-picker color="#03a9f4" /&gt;
        </highlight-code>
        <highlight-code lang="html" v-pre>
          &lt;date-picker color="#00acc1" /&gt;
        </highlight-code>
        <highlight-code lang="html" v-pre>
          &lt;date-picker color="#ff9800" /&gt;
        </highlight-code>
        <highlight-code lang="html" v-pre>
          &lt;date-picker color="dimgray" /&gt;
        </highlight-code>
        <!-- eslint-enable -->
      </template>
    </card>
  </div>
</template>
