# Cards

The traditional content block for showing article excerpts, like those from a blog.

## Rounded with Shadow

<div className="example-preview">
<div className="not-prose,px-4">
<table className="w-full,sm:max-w-[400px],xl:max-w-[340px],shadow-xl,rounded,m-0">
<tbody>
  <tr>
    <td>
      <img className="rounded-tl,rounded-tr,m-0" src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&h=300&q=80" alt="" />
    </td>
  </tr>
  
  
        <tr>
    <td className="bg-white,p-6,rounded-br,rounded-bl">
      <span className="text-xs,text-slate-500">
        April 7, 2020
      </span>
      
      
                <h2 className="mt-2,mb-3,text-2xl,leading-7" id="lorem-ipsum-dolor-sit-amet-consectetur">
        <a href="https://example.com" style="color:#000;display:inline-block;position:relative;margin:0;" className="text-gradient-none,no-underline">Lorem ipsum dolor sit amet, consectetur</a>
      </h2>
      
      
                <p className="m-0,mb-4,text-base,text-slate-500">
        Anim ullamco anim ipsum Lorem id voluptate consequat excepteur proident cillum mollit.
      </p>
      
      
                <a href="https://example.com" className="text-blue-500,no-underline,hover:underline">
        Learn more →
      </a>
    </td>
  </tr>
</tbody>
</table>
</div>

```htmlexample
<table class="sm:w-full font-sans shadow-xl rounded">
  <tr>
    <td>
      <img
        class="rounded-t"
        src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&h=300&q=80"
      >
    </td>
  </tr>
  <tr>
    <td class="p-6 bg-white rounded-b">
      <span class="text-xs text-slate-500">April 7, 2020</span>
      <h2 class="m-0 mt-2 mb-3 text-2xl leading-full">
        <a href="https://example.com" class="text-black hover:text-slate-700 no-underline">
          Lorem ipsum dolor sit amet, consectetur
        </a>
      </h2>
      <p class="m-0 mb-16 text-base text-slate-500">
        Anim ullamco anim ipsum Lorem id voluptate consequat excepteur proident cillum mollit.
      </p>
      <a href="https://example.com" class="text-blue-500 no-underline hover:underline">
        Learn more &rarr;
      </a>
    </td>
  </tr>
</table>
```

</div>