# Expandable details

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

## Expandable details

### Example: Example 1

Warehouse EU-Central
#458712839104 | eu-central-warehouse@logistics.cloud

Distribution hub west

#778944220011 | delivery-north-team@logistics.cloud

Local delivery north
#778944220011 | delivery-north-team@logistics.cloud

#### React (tsx)

```tsx
import { useState } from 'react';

import { generateDummyText } from '../../../utils/data';
import ExpanderList from '@rio-cloud/rio-uikit/ExpanderList';
import Divider from '@rio-cloud/rio-uikit/Divider';

export default () => {
    const [listItems, setListItems] = useState([
        {
            id: 1,
            header: (
                <div className='padding-y-5 display-flex gap-10'>
                    <div>
                        <span className='rioglyph rioglyph-building text-size-18 text-color-primary' />
                    </div>
                    <div>
                        <div className='text-color-primary text-medium'>Warehouse EU-Central</div>
                        <div className='text-color-gray text-size-12'>
                            #458712839104 | eu-central-warehouse@logistics.cloud
                        </div>
                    </div>
                </div>
            ),
            body: <RoleList />,
            bodyClassName: 'padding-top-0 padding-bottom-15 padding-x-25',
        },
        {
            id: 2,
            header: (
                <div className='padding-y-5 display-flex gap-10'>
                    <div>
                        <span className='rioglyph rioglyph-building text-size-18 text-color-primary' />
                    </div>
                    <div>
                        <div className='text-color-primary text-medium'>Distribution hub west</div>
                        <Divider vertical />
                        <div className='text-color-gray text-size-12'>
                            #778944220011 | delivery-north-team@logistics.cloud
                        </div>
                    </div>
                </div>
            ),
            body: <RoleList />,
            bodyClassName: 'padding-top-0 padding-bottom-15 padding-x-25',
        },
        {
            id: 3,
            header: (
                <div className='padding-y-5 display-flex gap-10'>
                    <div>
                        <span className='rioglyph rioglyph-factory text-size-18 text-color-primary' />
                    </div>
                    <div>
                        <div className='text-color-primary text-medium'>Local delivery north</div>
                        <div className='text-color-gray text-size-12'>
                            #778944220011 | delivery-north-team@logistics.cloud
                        </div>
                    </div>
                </div>
            ),
            body: <RoleList />,
            bodyClassName: 'padding-top-0 padding-bottom-15 padding-x-25',
        },
    ]);

    return (
        <div className='padding-15'>
            <ExpanderList items={listItems} />
        </div>
    );
};

type RoleItem = {
    role: string;
    dashboardUrl: string;
    apiUrl: string;
};

const roles: RoleItem[] = [
    {
        role: 'Hub Manager',
        dashboardUrl: '#',
        apiUrl: '#',
    },
    {
        role: 'Inventory Control',
        dashboardUrl: '#',
        apiUrl: '#',
    },
    {
        role: 'Shipping Operator',
        dashboardUrl: '#',
        apiUrl: '#',
    },
];

export const RoleList = () => (
    <div className='cq-container margin-top--5 padding-left-10 divider-y-1 divider-color-lighter divider-style-solid'>
        {roles.map(({ role, dashboardUrl, apiUrl }, index) => (
            <div
                key={role}
                className={`
                        display-flex flex-column cq-600:flex-row column-gap-25 row-gap-5 padding-y-10 padding-left-10 padding-right-15 hover-bg-highlight-decent
                        ${index === 0 ? 'rounded-top' : ''} ${index === (roles.length - 1) ? 'rounded-bottom' : ''}`}
            >
                <div className='flex-1-1'>
                    <div className='text-medium text-color-darker'>{role}</div>
                    <div className='text-color-dark'>{generateDummyText()}</div>
                </div>
                <div className='flex-0 display-flex align-items-center padding-y-5 cq-600:padding-y-0'>
                    <a href={dashboardUrl} className='link margin-right-5'>
                        Fleet dashboard
                    </a>
                    <Divider className='height-20' vertical />
                    <a href={apiUrl} className='link margin-left-5'>
                        API access
                    </a>
                </div>
            </div>
        ))}
    </div>
);
```

#### HTML (html)

```html
<div class="padding-15">
    <ul class="expander-list list-group rounded border">
        <li class="list-group-item expandable">
            <div class="expander-list-header" aria-label="expander item header">
                <span class="expander-list-header-content">
                    <div class="padding-y-5 display-flex gap-10">
                        <div>
                            <span class="rioglyph rioglyph-building text-size-18 text-color-primary">
                            </span>
                        </div>
                        <div>
                            <div class="text-color-primary text-medium">Warehouse EU-Central</div>
                            <div class="text-color-gray text-size-12">#458712839104 | eu-central-warehouse@logistics.cloud</div>
                        </div>
                    </div>
                </span>
                <span class="expander-icon rioglyph rioglyph-chevron-down">
                </span>
            </div>
        </li>
        <li class="list-group-item expandable">
            <div class="expander-list-header" aria-label="expander item header">
                <span class="expander-list-header-content">
                    <div class="padding-y-5 display-flex gap-10">
                        <div>
                            <span class="rioglyph rioglyph-building text-size-18 text-color-primary">
                            </span>
                        </div>
                        <div>
                            <div class="text-color-primary text-medium">Distribution hub west</div>
                            <div class="Divider position-relative" style="padding-left: 15px; padding-right: 15px;">
                                <div class="divider-line bg-light" style="width: 1px; height: 100%;">
                                </div>
                            </div>
                            <div class="text-color-gray text-size-12">#778944220011 | delivery-north-team@logistics.cloud</div>
                        </div>
                    </div>
                </span>
                <span class="expander-icon rioglyph rioglyph-chevron-down">
                </span>
            </div>
        </li>
        <li class="list-group-item expandable">
            <div class="expander-list-header" aria-label="expander item header">
                <span class="expander-list-header-content">
                    <div class="padding-y-5 display-flex gap-10">
                        <div>
                            <span class="rioglyph rioglyph-factory text-size-18 text-color-primary">
                            </span>
                        </div>
                        <div>
                            <div class="text-color-primary text-medium">Local delivery north</div>
                            <div class="text-color-gray text-size-12">#778944220011 | delivery-north-team@logistics.cloud</div>
                        </div>
                    </div>
                </span>
                <span class="expander-icon rioglyph rioglyph-chevron-down">
                </span>
            </div>
        </li>
    </ul>
</div>
```