Card

Para crear una Card siempre hay que envolverla en un div con la clase card. Dentro se coloca un div con la clase card-content.

Card con Titulo y colores

Para crear un titulo, creamos una card y le agregamos un spam con clase card-title. Y colores de fondo y texto

Card con enlaces

Para tener enlaces en nuestra card solo hay que añadir un div con clase card-action debajo del content

Imagines en Card

Para crear una card con imagen, hay que dividir la card en tres partes. Tres divs con distintas clases, card-image, card-content, card-action. El titulo se puede poner tanto dentro del content como en el div de la imagen, debajo de la misma, asi el titulo aparecerá dentro de la imagen

Titulo Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id dignissimos rerum, molestiae temporibus quo, dolor ullam repudiandae aspernatur minima, facilis facere a porro quasi ex doloribus fuga. Natus, eaque!

Enlace

<div class="col s12 m4"> <div class="card"> <div class="card-image"> <img src="images/LogoGaesga.jpg" alt=""> <span class="card-title">Titulo Card</span> </div> <div class="card-content"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id dignissimos rerum, molestiae temporibus quo, dolor ullam repudiandae aspernatur minima, facilis facere a porro quasi ex doloribus fuga. Natus, eaque! </p> </div> <div class="card-action"> <a href="#">Enlace</a> </div> </div> </div>

Card con Imagen y boton

Solo hay que añadir un enlace con un icono y varias clases debajo del titulo dentro del div card-image

Titulo Card add

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id dignissimos rerum, molestiae temporibus quo, dolor ullam repudiandae aspernatur minima, facilis facere a porro quasi ex doloribus fuga. Natus, eaque!

Enlace

<div class="col s12 m4"> <div class="card-image"> <img src="image/LogoGaesga.jpg" alt=""> <span class="card-title">Titulo Card</span> <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a> </div> <div class="card-content"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id dignissimos rerum, molestiae temporibus quo, dolor ullam repudiandae aspernatur minima, facilis facere a porro quasi ex doloribus fuga. Natus, eaque! </p> </div> <div class="card-action"> <a href="#">Enlace</a> </div> </div>

Card Horizontal

Para crear una card horizontal basta con ponerle la clase horizontal al div card

Titulo Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id dignissimos rerum, molestiae temporibus quo, dolor ullam repudiandae aspernatur minima, facilis facere a porro quasi ex doloribus fuga. Natus, eaque!

Enlace

Card Reveal

Con esta clase incluida dentro del bloque card, lo que hacemos es tener un efecto que sucedera cuando pinchemos en el titulo o en el boton
Para ello hay que añadir al titulo la clase activator, tambien se puede agregar a la imagen la misma clase

Titulo Cardmore_vert

Card Titleclose

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita deleniti natus architecto laboriosam sed explicabo at veniam quaerat! Atque eaque magnam deleniti magni voluptates sapiente doloribus nemo culpa dolorum voluptate!

<div class="card"> <div class="card-image"> <img src="images/LogoGaesga.jpg" alt="" class="activator"> </div> <div class="card-content"> <span class="card-title activator">Titulo Card<i class="material-icons right">more_vert</i></span> </div> <div class="card-reveal"> <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita deleniti natus architecto laboriosam sed explicabo at veniam quaerat! Atque eaque magnam deleniti magni voluptates sapiente doloribus nemo culpa dolorum voluptate! </p> </div> </div>