Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
# Cards (Image Action Filled)
Category: layout
Description: Cards (Image Action Filled)
## SenangStart CSS Code
```html
<div space="max-w:[480px] w:[100%]">
<div layout="overflow:hidden flex col justify:between" visual="rounded:medium bg:gray-100 hover:shadow:big transition:all">
<div layout="flex col justify:between" space="p:medium-3x h:[100%]" visual="text:center">
<div>
<h4 space="m-b:small" visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:gray-900">
Card title here...
</h4>
<p space="m-b:medium-3x" visual="text:gray-600">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div layout="flex justify:center">
<a href="#" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="font:tw-semibold text:blue-600 tw-lg:text-size:large hover:opacity:80 transition:all">Learn More <i class="ss ss-arrow-right"></i></a>
</div>
</div>
<div>
<img src="https://dummyimage.com/600x400/2564eb/ffffff.png&text=SenangStart Image" layout="object:cover" space="w:[100%] h:vast-3x">
</div>
</div>
</div>
```
## Tailwind CSS Code
```html
<div class="max-w-md w-full">
<div class="rounded-xl overflow-hidden flex flex-col justify-between bg-gray-100 hover:shadow-lg transition-all">
<div class="p-6 text-center flex flex-col justify-between h-full">
<div>
<h4 class="text-xl lg:text-2xl mb-2 font-semibold text-gray-900">
Card title here...
</h4>
<p class="text-gray-600 mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="flex justify-center">
<a href="#" class="font-semibold text-blue-600 lg:text-lg flex items-center gap-2 pr-1 hover:gap-3 hover:pr-0 hover:opacity-80 transition-all">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div>
<img src="https://dummyimage.com/600x400/2564eb/ffffff.png&text=SenangStart Image" class="w-full h-48 object-cover">
</div>
</div>
</div>
```