# Card

*Category:* Components
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/components/card
*Captured:* 2026-04-27T14:57:53.529Z

The Card is a utility component designed to simplify usage of default card styling.

## Card

### Example: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

Lorem

#### React (tsx)

```tsx
import Card from '@rio-cloud/rio-uikit/Card';

import { dummyText } from '../../../utils/data';

export default () => (
    <div className='max-width-600 padding-20'>
        <Card>{dummyText}</Card>

        <Card className='margin-top-50'>
            <div className='display-flex gap-10'>
                <div className='width-100pct'>
                    <div className='text-size-20 text-color-darkest text-medium'>Lorem ipsum</div>
                    <div className='text-color-dark'>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                    </div>
                </div>
                <div className='flex-1-1'>
                    <span className='label label-muted label-filled'>
                        <span className='text-capitalize'>Lorem</span>
                    </span>
                </div>
            </div>
        </Card>
    </div>
);
```

#### HTML (html)

```html
<div class="max-width-600 padding-20">
    <div class="bg-white rounded border shadow-default padding-15">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
    <div class="bg-white rounded border shadow-default padding-15 margin-top-50">
        <div class="display-flex gap-10">
            <div class="width-100pct">
                <div class="text-size-20 text-color-darkest text-medium">Lorem ipsum</div>
                <div class="text-color-dark">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
            </div>
            <div class="flex-1-1">
                <span class="label label-muted label-filled">
                    <span class="text-capitalize">Lorem</span>
                </span>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| shadow | 'subtle' \| 'muted' \| 'accent' \| 'default' \| 'smooth' \| 'muted-down' \| 'default-down' \| 'none' | 'default' | Shadow classes. |
| padding | 0 \| 5 \| 10 \| 15 \| 20 \| 25 \| 50 | 15 | Card padding. |
| className | string | — | Additional classes set to the outer element. |