Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
# Callout
Category: feedback
Description: Info/Alert Box
## Small Variant
### SenangStart CSS Code
```html
<div space="p:medium m-b:medium" visual="text-size:small text:blue-800 rounded:medium bg:blue-50 border-w:thin border:blue-200" role="alert">
<span visual="font:tw-medium">Info alert!</span> Change a few things up and try submitting again.
</div>
```
### Tailwind CSS Code
```html
<div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 border border-blue-200" role="alert">
<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</div>
```
## Medium Variant
### SenangStart CSS Code
```html
<div space="p:medium-3x m-b:medium" visual="text-size:base text:blue-800 rounded:medium bg:blue-50 border-w:thin border:blue-200" role="alert">
<span visual="font:tw-medium">Info alert!</span> Change a few things up and try submitting again.
</div>
```
### Tailwind CSS Code
```html
<div class="p-6 mb-4 text-base text-blue-800 rounded-lg bg-blue-50 border border-blue-200" role="alert">
<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</div>
```
## Large Variant
### SenangStart CSS Code
```html
<div space="p:large m-b:medium" visual="text-size:large text:blue-800 rounded:medium bg:blue-50 border-w:thin border:blue-200" role="alert">
<span visual="font:tw-medium">Info alert!</span> Change a few things up and try submitting again.
</div>
```
### Tailwind CSS Code
```html
<div class="p-8 mb-4 text-lg text-blue-800 rounded-lg bg-blue-50 border border-blue-200" role="alert">
<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</div>
```