Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
# Cards (Image Outline)
Category: layout
Description: Cards (Image Outline)
## SenangStart CSS Code
```html
<div space="max-w:[480px] w:[100%]">
<div layout="overflow:hidden" visual="border-w:thin border:neutral-200 rounded:medium hover:shadow:big transition:shadow">
<div space="p:medium-3x">
<h5 space="m-b:small" visual="text-size:large tw-lg:text-size:big font:tw-semibold text:gray-900">
Card title here...
</h5>
<p space="m-b:medium" 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>
<img src="https://dummyimage.com/600x400/2564eb/ffffff.png&text=SenangStart Image" layout="object:cover" space="w:[100%] h:vast-3x">
</div>
</div>
```
## Tailwind CSS Code
```html
<div class="max-w-md w-full">
<div class="border border-neutral-200 rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
<div class="p-6">
<h5 class="text-lg lg:text-xl font-semibold mb-2 text-gray-900">
Card title here...
</h5>
<p class="text-gray-600 mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<img src="https://dummyimage.com/600x400/2564eb/ffffff.png&text=SenangStart Image" class="w-full h-48 object-cover">
</div>
</div>
```