# Panel variants

*Category:* Templates
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/templates/panel-variants
*Captured:* 2026-04-27T14:59:21.972Z

## Panel variants

### Example: Example 1

Lorem ipsum
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus

Lorem ipsum
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus

Lorem ipsum
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus

Lorem ipsum
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus

Lorem ipsum
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus

Lorem ipsum
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus

Lorem ipsum
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus

#### React (tsx)

```tsx
import { colors, getColorNames } from '../../../utils/colors';

const eachColor = ['default', ...getColorNames(colors.brand, colors.status)];

export default () => (
    <div className='margin-25-md display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-md gap-20'>
        {eachColor.map(color => (
            <div
                className={`
                    panel panel-${color} panel-body panel-blank shadow-default padding-25 margin-bottom-0
                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
                    user-select-none
                `}
                key={color}
            >
                <div className={`text-size-18 text-medium text-uppercase text-color-${color} margin-bottom-5`}>
                    Lorem ipsum
                </div>
                <span className={`position-absolute left--1 top-25 height-25 width-3 bg-${color}`} />
                <div className='text-color-darker'>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
            </div>
        ))}
    </div>
);
```

#### HTML (html)

```html
<div class="margin-25-md display-grid grid-cols-1 grid-cols-2-ls grid-cols-4-md gap-20">
    <div class="
                    panel panel-default panel-body panel-blank shadow-default padding-25 margin-bottom-0
                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
                    user-select-none
                ">
        <div class="text-size-18 text-medium text-uppercase text-color-default margin-bottom-5">Lorem ipsum</div>
        <span class="position-absolute left--1 top-25 height-25 width-3 bg-default">
        </span>
        <div class="text-color-darker">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
    </div>
    <div class="
                    panel panel-primary panel-body panel-blank shadow-default padding-25 margin-bottom-0
                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
                    user-select-none
                ">
        <div class="text-size-18 text-medium text-uppercase text-color-primary margin-bottom-5">Lorem ipsum</div>
        <span class="position-absolute left--1 top-25 height-25 width-3 bg-primary">
        </span>
        <div class="text-color-darker">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
    </div>
    <div class="
                    panel panel-secondary panel-body panel-blank shadow-default padding-25 margin-bottom-0
                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
                    user-select-none
                ">
        <div class="text-size-18 text-medium text-uppercase text-color-secondary margin-bottom-5">Lorem ipsum</div>
        <span class="position-absolute left--1 top-25 height-25 width-3 bg-secondary">
        </span>
        <div class="text-color-darker">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
    </div>
    <div class="
                    panel panel-info panel-body panel-blank shadow-default padding-25 margin-bottom-0
                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
                    user-select-none
                ">
        <div class="text-size-18 text-medium text-uppercase text-color-info margin-bottom-5">Lorem ipsum</div>
        <span class="position-absolute left--1 top-25 height-25 width-3 bg-info">
        </span>
        <div class="text-color-darker">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
    </div>
    <div class="
                    panel panel-success panel-body panel-blank shadow-default padding-25 margin-bottom-0
                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
                    user-select-none
                ">
        <div class="text-size-18 text-medium text-uppercase text-color-success margin-bottom-5">Lorem ipsum</div>
        <span class="position-absolute left--1 top-25 height-25 width-3 bg-success">
        </span>
        <div class="text-color-darker">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
    </div>
    <div class="
                    panel panel-warning panel-body panel-blank shadow-default padding-25 margin-bottom-0
                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
                    user-select-none
                ">
        <div class="text-size-18 text-medium text-uppercase text-color-warning margin-bottom-5">Lorem ipsum</div>
        <span class="position-absolute left--1 top-25 height-25 width-3 bg-warning">
        </span>
        <div class="text-color-darker">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
    </div>
    <div class="
                    panel panel-danger panel-body panel-blank shadow-default padding-25 margin-bottom-0
                    position-relative hover-scale-105 transition-all transition-duration-01 transition-ease-in-out
                    user-select-none
                ">
        <div class="text-size-18 text-medium text-uppercase text-color-danger margin-bottom-5">Lorem ipsum</div>
        <span class="position-absolute left--1 top-25 height-25 width-3 bg-danger">
        </span>
        <div class="text-color-darker">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus</div>
    </div>
</div>
```