Card

Las tarjetas de Resim proporcionan un contenedor de contenido flexible y extensible con múltiples variantes y opciones.

<div class="card">

   <div class="card__item" id="card1">
      <div class="card__content">

         <div class="card__picture ripple" data-target="#card1" data-toggle="card">
            <img src="https://cdn.vuetifyjs.com/images/cards/house.jpg" alt="" class="card__img">
         </div>

         <div class="card__footer">
            <div class="card__title text-center">
               <h3>Big House</h3>
            </div>

            <div class="flex jc--end mr-2">
               <button class="btn btn--flat text-primary ripple" data-target="#card1" data-toggle="card">Ver más
               </button>
            </div>
         </div>

      </div>

      <div class="card__reveal" tabindex="-1">

         <div class="flex jc--between m-3">
            <div class="card__title p-none">
               <h3>Big House</h3>
            </div>

            <button class="btn--close btn--icon ripple" data-dismiss="card"></button>
         </div>
         <div class="flex jc--between m-3">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veritatis repudiandae blanditiis,
               corporis recusandae molestias voluptatem neque fugit officiis similique consectetur non nam aperiam
               nisi esse nostrum delectus nulla voluptates.</p>
         </div>
      </div>
   </div>

   <div class="card__item" id="card2">
      <div class="card__content">
         <div class="card__picture ripple" data-target="#card2" data-toggle="card">
            <img src="https://cdn.vuetifyjs.com/images/cards/road.jpg" alt="" class="card__img">
         </div>

         <div class="card__footer">
            <div class="card__title text-center">
               <h3>The long way</h3>
            </div>

            <div class="flex jc--end">
               <button class="btn btn--flat text-primary ripple mr-2" data-target="#card2" data-toggle="card">Ver
                  más</button>
            </div>

         </div>

      </div>

      <div class="card__reveal" tabindex="-1">

         <div class="flex jc--between m-3">
            <div class="card__title p-none">
               <h3>The long way</h3>
            </div>
            <button class="btn--close btn--icon ripple" data-dismiss="card"></button>
         </div>
         <div class="flex jc--between m-3">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veritatis repudiandae blanditiis,
               corporis recusandae molestias voluptatem neque fugit officiis similique consectetur non nam aperiam
               nisi esse nostrum delectus nulla voluptates.
            </p>
         </div>
      </div>
   </div>

   <div class="card__item" id="card3">
      <div class="card__content">
         <div class="card__picture ripple" data-target="#card3" data-toggle="card">
            <img src="https://cdn.vuetifyjs.com/images/cards/plane.jpg" alt="" class="card__img">
         </div>

         <div class="card__footer">
            <div class="card__title text-center">
               <h3>The Airplane</h3>
            </div>

            <div class="flex jc--end">
               <button class="btn btn--flat text-primary ripple mr-2" data-target="#card3" data-toggle="card">
                  Ver más
               </button>
            </div>
         </div>
      </div>

      <div class="card__reveal" tabindex="-1">
         <div class="flex jc--between m-3">
            <div class="card__title p-none">
               <h3>The Airplane</h3>
            </div>
            <button class="btn--close btn--icon ripple" data-dismiss="card"></button>
         </div>
         <div class="flex jc--between m-3">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veritatis repudiandae blanditiis,
               corporis recusandae molestias voluptatem neque fugit officiis similique consectetur non nam aperiam
               nisi esse nostrum delectus nulla voluptates.</p>
         </div>
      </div>
   </div>
   
</div>

Fondo personalizado

El color del fondo de las tarjetas tambien pueden ser personalizadas,dependiendo de los colores que tengas en la varible "$colors" de SASS

$colors:(
   primary: #1867c0,
   secondary:#51cf8e,
   third: #f56431d9,
   success: #28a745,
   dark : #343a40,
   danger: #dc3545,
   warning: #ffc107,
   info : #17a2b8,
   gray: #545b62,
);

Por ejemplo con el color:PRIMARY,DARK y DANGER.Se usa la clase bg--$clave,que sirve para el color de fondo,donde $clave es la clave del color que vas usar para el fondo.Lo puedes usar para el "card__footer" y para el "card__reveal"

<div class="card">
   
   <div class="card__item" id="card4">
      <div class="card__content">
         <div class="card__picture ripple" data-target="#card4" data-toggle="card">
            <img src="https://cdn.vuetifyjs.com/images/cards/house.jpg" alt="" class="card__img">
         </div>

         <div class="card__footer bg--primary">
            <div class="card__title text-center">
               <h3>Big House</h3>
            </div>

            <div class="flex jc--end mr-2">
               <button class="btn btn--flat ripple" data-target="#card4" data-toggle="card">Ver más
               </button>
            </div>
         </div>

      </div>

      <div class="card__reveal bg--primary" tabindex="-1">
         <div class="flex jc--between m-3">
            <div class="card__title p-none">
               <h3>Big House</h3>
            </div>
            <button class="btn--close btn--icon ripple" data-dismiss="card"></button>
         </div>
         <div class="flex jc--between m-3">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veritatis repudiandae blanditiis,
               corporis recusandae molestias voluptatem neque fugit officiis similique consectetur non nam aperiam
               nisi esse nostrum delectus nulla voluptates.</p>
         </div>
      </div>
   </div>

   <div class="card__item" id="card5">
      <div class="card__content">
         <div class="card__picture ripple" data-target="#card5" data-toggle="card">
            <img src="https://cdn.vuetifyjs.com/images/cards/road.jpg" alt="" class="card__img">
         </div>

         <div class="card__footer bg--dark">
            <div class="card__title text-center">
               <h3>The long way</h3>
            </div>

            <div class="flex jc--end">
               <button class="btn btn--flat ripple mr-2" data-target="#card5" data-toggle="card">Ver más</button>
            </div>
         </div>

      </div>

      <div class="card__reveal bg--dark" tabindex="-1">
         <div class="flex jc--between m-3">
            <div class="card__title p-none">
               <h3>The long way</h3>
            </div>
            <button class="btn--close btn--icon ripple" data-dismiss="card"></button>
         </div>
         <div class="flex jc--between m-3">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veritatis repudiandae blanditiis,
               corporis recusandae molestias voluptatem neque fugit officiis similique consectetur non nam aperiam
               nisi esse nostrum delectus nulla voluptates.
            </p>
         </div>
      </div>
   </div>

   <div class="card__item" id="card6">
      <div class="card__content">
         <div class="card__picture ripple" data-target="#card6" data-toggle="card">
            <img src="https://cdn.vuetifyjs.com/images/cards/plane.jpg" alt="" class="card__img">
         </div>

         <div class="card__footer bg--danger">
            <div class="card__title text-center">
               <h3>The Airplane</h3>
            </div>

            <div class="flex jc--end">
               <button class="btn btn--flat ripple mr-2" data-target="#card6" data-toggle="card">
                  Ver más
               </button>
            </div>
         </div>

      </div>

      <div class="card__reveal bg--danger" tabindex="-1">
         <div class="flex jc--between m-3">
            <div class="card__title p-none">
               <h3>The Airplane</h3>
            </div>
            <button class="btn--close btn--icon ripple" data-dismiss="card"></button>
         </div>
         <div class="flex jc--between m-3">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veritatis repudiandae blanditiis,
               corporis recusandae molestias voluptatem neque fugit officiis similique consectetur non nam aperiam
               nisi esse nostrum delectus nulla voluptates.</p>
         </div>
      </div>
   </div>
   
</div>