Cards

Info cards

Basic

<div class="shadow p-4">
    <div class="text-left">
        <h3 class="mb-2 text-grey-darker">Card Title</h3>
        <p class="text-grey-dark leading-tight">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
            Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
            mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
    </div>

    <div class="mt-4">
        <a href="#" class="no-underline mr-4 text-green hover:text-green-light">Link 1</a>
        <a href="#" class="no-underline mr-4 text-green hover:text-green-light">Link 2</a>
    </div>
</div>

Image card

<div class="shadow">
    <div class=" bg-size bg-cover"
         style="background-image: url('')">
        <div class="p-4 h-32 flex items-end text-white">
            <h3 class="mb-2">Card Title</h3>
        </div>
    </div>
    <div class="p-4">
        <p class="text-grey-dark leading-tight">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
            ligula eget dolor.
            Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
            mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
        <div class="mt-4">
            <a href="#" class="no-underline mr-4 text-green hover:text-green-light">Link 1</a>
        </div>
    </div>
</div>

Image card - with button

<div class="shadow">
    <div class=" bg-size bg-cover"
         style="background-image: url('')">
        <div class="p-4 h-32 flex items-end text-white">
            <h3 class="mb-2">Card Title</h3>
        </div>
        <div class="relative">
            <button class="bg-green hover:bg-green-light absolute pin-r mr-4 -mt-8 flex justify-center items-center rounded-full h-12 w-12 p-2"><i
                    class="material-icons text-white">add_to_queue</i></button>
        </div>
    </div>
    <div class="p-4">
        <p class="text-grey-dark leading-tight">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
            ligula eget dolor.
            Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
            mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
        <div class="mt-4">
            <a href="#" class="no-underline mr-4 text-green hover:text-green-light">Link 1</a>
        </div>
    </div>
</div>

With badge

 <div class="shadow p-4">
	<div class="flex items-center justify-between">
	  <div class="text-grey-darker">
		<h2>Title</h2>
	  </div>
	  <div>
		<div><p class=" px-4 bg-blue text-white rounded text-xs">Badge</p></div>
	  </div>
	</div>
	<div class="mt-6 text-grey-darker">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
	</div>
</div>

Clean

<div class="shadow-lg rounded-lg">
  <div class="flex items-center bg-indigo rounded-t-lg text-white p-4">
    <i class="material-icons mr-2">
  	contact_support
    </i>
    <h2>Title</h2>
  </div>
  <div class="p-4 text-grey-dark">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
  </div>
</div>