# Detail views

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

## Detail views

### Example: Coordinates

VoltPoint
Isarweg 22, 81830 München
Coordinates
51.339695, 12.373075

Network operator
EnerCharge GmbH

Support contact
089 9876543

Additional information
Boost your experience
Book Lorem Ipsum to get more information, advanced settings and preferred prices.

Prices

Opening hours

Connectors
Amenities
Vehicle access

180 kW 6/6

300 kW 3/4

#### React (tsx)

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

import Divider from '@rio-cloud/rio-uikit/Divider';
import LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';
import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
import ExpanderList from '@rio-cloud/rio-uikit/ExpanderList';
import ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';
import Fade from '@rio-cloud/rio-uikit/Fade';

export default () => {
    const [currentTab, setCurrentTab] = useState(1);

    return (
        <div className='margin-auto border border-top-none border-bottom-none max-width-400'>
            {/* Actual content comes here */}
            <div className='bg-white'>
                {/* Address block */}
                <section className='padding-x-20'>
                    <div className='flex-1-1 padding-top-10'>
                        <div className='display-flex'>
                            <div className='flex-1-1 display-flex gap-10'>
                                <div>
                                    <span className='rioglyph rioglyph-filling-e-station text-size-18' />
                                </div>
                                <div>
                                    <div className='text-medium text-size-18 line-height-125rel'>VoltPoint</div>
                                    <div className='margin-left-20--'>
                                        <div>Isarweg 22, 81830 München</div>

                                        <LabeledElement label='Coordinates' className='margin-top-15' noGap>
                                            <div className='display-flex gap-3 align-items-center'>
                                                <span className='rioglyph rioglyph-map-marker text-color-dark' />
                                                <div>51.339695, 12.373075</div>
                                            </div>
                                        </LabeledElement>

                                        <div className='margin-top-15 display-flex gap-25 flex-wrap'>
                                            <LabeledElement label='Network operator' noGap>
                                                <div className='display-flex gap-3 align-items-center'>
                                                    <span className='rioglyph rioglyph-building text-color-dark' />
                                                    <div>EnerCharge GmbH</div>
                                                </div>
                                            </LabeledElement>
                                            <LabeledElement label='Support contact' noGap>
                                                <div className='display-flex gap-3 align-items-center'>
                                                    <span className='rioglyph rioglyph-earphone text-color-dark' />
                                                    <div>089 9876543</div>
                                                </div>
                                            </LabeledElement>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <ButtonDropdown
                                    title={<span className='rioglyph rioglyph-option-horizontal' aria-hidden='true' />}
                                    items={[
                                        {
                                            value: 'Edit',
                                        },
                                        {
                                            value: 'Share',
                                        },
                                        {
                                            value: 'Report issue',
                                        },
                                    ]}
                                    iconOnly
                                    pullRight
                                />
                            </div>
                        </div>
                    </div>
                </section>

                <Divider dividerColor='lighter' spacing={25} />

                {/* Additional information block */}
                <section className='padding-x-20 display-flex flex-column'>
                    <div className='text-size-14 text-medium text-color-darkest padding-bottom-10'>
                        Additional information
                    </div>
                    <div className='padding-15 bg-lightest rounded rounded-large display-flex align-items-start gap-15 text-left text-size-14 margin-bottom-15'>
                        <span className='rioglyph rioglyph-stars text-size-300pct text-color-primary' />
                        <div>
                            <div className='text-color-darker text-medium margin-bottom-3'>Boost your experience</div>
                            <div className='text-color-darker'>
                                Book{' '}
                                <a href='#' className='text-medium'>
                                    Lorem Ipsum
                                </a>{' '}
                                to get more information, advanced settings and preferred prices.
                            </div>
                        </div>
                    </div>
                    <ExpanderPanel className='margin-bottom-5' title='Prices' bsStyle='default'>
                        <div className='display-grid grid-cols-2 gap-5'>
                            <div className='text-medium'>AC Charging (Type 2):</div>
                            <div>€0.39 / kWh</div>
                            <div className='text-medium'>DC Fast Charging (CCS):</div>
                            <div>€0.49 / kWh</div>
                            <div className='text-medium'>Idle Fee:</div>
                            <div>€0.10 / minute after 30 mins</div>
                            <div className='text-medium'>Payment Methods:</div>
                            <div>RFID Card, Mobile App, Credit Card</div>
                        </div>
                    </ExpanderPanel>
                    <ExpanderPanel className='margin-bottom-0' title='Opening hours' bsStyle='default'>
                        <div className='display-grid grid-cols-2 gap-3'>
                            <div className='text-medium'>Mon – Fri:</div>
                            <div>06:00 – 22:00</div>
                            <div className='text-medium'>Saturday:</div>
                            <div>08:00 – 20:00</div>
                            <div className='text-medium'>Sunday:</div>
                            <div>08:00 – 18:00</div>
                            <div className='grid-colspan-2 margin-top-10'>
                                <b>Note:</b> Charging is available 24/7, but on-site support is limited to staffed
                                hours.
                            </div>
                        </div>
                    </ExpanderPanel>
                </section>

                <Divider dividerColor='lighter' spacing={25} />

                {/* Sub-content block */}
                <section className='padding-x-20 display-flex flex-column'>
                    <ul className='nav nav-pills nav-pills-filled- nav-justified nav-justified-word-wrap margin-bottom-15'>
                        <li className={currentTab === 1 ? 'active' : ''} onClick={() => setCurrentTab(1)}>
                            <span>Connectors</span>
                        </li>
                        <li className={currentTab === 2 ? 'active' : ''} onClick={() => setCurrentTab(2)}>
                            <span>Amenities</span>
                        </li>
                        <li className='disabled'>
                            <span>Vehicle access</span>
                        </li>
                    </ul>
                    <div>
                        <Fade initial={false} exitBeforeEnter>
                            {currentTab === 1 && (
                                <ExpanderList
                                    key='content1'
                                    className='margin-bottom-20'
                                    items={[
                                        {
                                            id: 1,
                                            header: (
                                                <div className='display-flex column-gap-10 justify-content-between padding-right-15 text-medium padding-y-2'>
                                                    <span>180 kW</span>
                                                    <div className='display-flex column-gap-10 align-items-center'>
                                                        <span className='text-color-info'>6/6</span>
                                                    </div>
                                                </div>
                                            ),
                                            headerClassName: 'padding-y-5',
                                            body: 'Lorem ipsum',
                                        },
                                        {
                                            id: 2,
                                            header: (
                                                <div className='display-flex column-gap-10 justify-content-between padding-right-15 text-medium padding-y-2'>
                                                    <span>300 kW</span>
                                                    <div className='display-flex column-gap-10 align-items-center'>
                                                        <span className='text-color-info'>3/4</span>
                                                    </div>
                                                </div>
                                            ),
                                            headerClassName: 'padding-y-5',
                                            body: 'Lorem ipsum',
                                        },
                                    ]}
                                />
                            )}
                            {currentTab === 2 && (
                                <div key='content2' className='display-grid grid-cols-2 gap-10 padding-bottom-15'>
                                    <div className='display-flex gap-5 padding-y-10 padding-x-15 border rounded'>
                                        <span className='rioglyph rioglyph-wifi rioglyph-align-top' />
                                        <div>Free WiFi</div>
                                    </div>
                                    <div className='display-flex gap-5 padding-y-10 padding-x-15 border rounded'>
                                        <span className='rioglyph rioglyph-car-wash rioglyph-align-top' />
                                        <div>Truck wash</div>
                                    </div>
                                    <div className='display-flex gap-5 padding-y-10 padding-x-15 border rounded'>
                                        <span className='rioglyph rioglyph-trash rioglyph-align-top' />
                                        <div>Trash disposal</div>
                                    </div>
                                    <div className='display-flex gap-5 padding-y-10 padding-x-15 border rounded'>
                                        <span className='rioglyph rioglyph-calendar-parking rioglyph-align-top' />
                                        <div>Overnight parking</div>
                                    </div>
                                </div>
                            )}
                        </Fade>
                    </div>
                </section>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="margin-auto border border-top-none border-bottom-none max-width-400">
    <div class="bg-white">
        <section class="padding-x-20">
            <div class="flex-1-1 padding-top-10">
                <div class="display-flex">
                    <div class="flex-1-1 display-flex gap-10">
                        <div>
                            <span class="rioglyph rioglyph-filling-e-station text-size-18">
                            </span>
                        </div>
                        <div>
                            <div class="text-medium text-size-18 line-height-125rel">VoltPoint</div>
                            <div class="margin-left-20--">
                                <div>Isarweg 22, 81830 München</div>
                                <div class="LabeledElement display-flex flex-column margin-top-15">
                                    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">Coordinates</div>
                                    <div class="display-flex gap-3 align-items-center">
                                        <span class="rioglyph rioglyph-map-marker text-color-dark">
                                        </span>
                                        <div>51.339695, 12.373075</div>
                                    </div>
                                </div>
                                <div class="margin-top-15 display-flex gap-25 flex-wrap">
                                    <div class="LabeledElement display-flex flex-column">
                                        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">Network operator</div>
                                        <div class="display-flex gap-3 align-items-center">
                                            <span class="rioglyph rioglyph-building text-color-dark">
                                            </span>
                                            <div>EnerCharge GmbH</div>
                                        </div>
                                    </div>
                                    <div class="LabeledElement display-flex flex-column">
                                        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">Support contact</div>
                                        <div class="display-flex gap-3 align-items-center">
                                            <span class="rioglyph rioglyph-earphone text-color-dark">
                                            </span>
                                            <div>089 9876543</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="dropdown btn-group">
                            <button type="button" id="l00z3ils1l" class="btn btn-default btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
            <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
            </div>
        </div>
        <section class="padding-x-20 display-flex flex-column">
            <div class="text-size-14 text-medium text-color-darkest padding-bottom-10">Additional information</div>
            <div class="padding-15 bg-lightest rounded rounded-large display-flex align-items-start gap-15 text-left text-size-14 margin-bottom-15">
                <span class="rioglyph rioglyph-stars text-size-300pct text-color-primary">
                </span>
                <div>
                    <div class="text-color-darker text-medium margin-bottom-3">Boost your experience</div>
                    <div class="text-color-darker">Book <a href="#" class="text-medium">Lorem Ipsum</a> to get more information, advanced settings and preferred prices.</div>
                </div>
            </div>
            <div class="expander-panel panel panel-default margin-bottom-5" aria-label="expander panel">
                <div class="panel-heading" aria-label="panel heading">
                    <span class="title">Prices</span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                </div>
            </div>
            <div class="expander-panel panel panel-default margin-bottom-0" aria-label="expander panel">
                <div class="panel-heading" aria-label="panel heading">
                    <span class="title">Opening hours</span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                </div>
            </div>
        </section>
        <div class="Divider position-relative width-100pct" style="padding-top: 25px; padding-bottom: 25px;">
            <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
            </div>
        </div>
        <section class="padding-x-20 display-flex flex-column">
            <ul class="nav nav-pills nav-pills-filled- nav-justified nav-justified-word-wrap margin-bottom-15">
                <li class="active">
                    <span>Connectors</span>
                </li>
                <li class="">
                    <span>Amenities</span>
                </li>
                <li class="disabled">
                    <span>Vehicle access</span>
                </li>
            </ul>
            <div>
                <div style="opacity: 1; transform: none;">
                    <ul class="expander-list list-group rounded border margin-bottom-20">
                        <li class="list-group-item expandable">
                            <div class="expander-list-header padding-y-5" aria-label="expander item header">
                                <span class="expander-list-header-content">
                                    <div class="display-flex column-gap-10 justify-content-between padding-right-15 text-medium padding-y-2">
                                        <span>180 kW</span>
                                        <div class="display-flex column-gap-10 align-items-center">
                                            <span class="text-color-info">6/6</span>
                                        </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 padding-y-5" aria-label="expander item header">
                                <span class="expander-list-header-content">
                                    <div class="display-flex column-gap-10 justify-content-between padding-right-15 text-medium padding-y-2">
                                        <span>300 kW</span>
                                        <div class="display-flex column-gap-10 align-items-center">
                                            <span class="text-color-info">3/4</span>
                                        </div>
                                    </div>
                                </span>
                                <span class="expander-icon rioglyph rioglyph-chevron-down">
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
</div>
```

### Example: Internal Directives Administrator

JD
John Doe
Internal Directives Administrator
Not Working

General

Graduations

Objectives

#### React (tsx)

```tsx
import { dummyTextShort } from '../../../utils/data';

import ExpanderList from '@rio-cloud/rio-uikit/ExpanderList';
import Avatar from '@rio-cloud/rio-uikit/Avatar';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

export default () => {
    return (
        <div className='margin-auto border border-top-none border-bottom-none max-width-400'>
            {/* Actual content comes here */}
            <section className='bg-white padding-bottom-20'>
                <div className='padding-x-20 display-flex padding-top-10'>
                    <div className='display-flex gap-15 padding-bottom-25'>
                        <Avatar name='John Doe' size={50} />
                        <div>
                            <div className='text-bold text-size-20'>John Doe</div>
                            <div className='text-color-dark'>Internal Directives Administrator</div>
                            <div className='margin-top-10'>
                                <span className='label label-condensed label-danger'>Not Working</span>
                            </div>
                        </div>
                    </div>
                </div>

                <ExpanderList
                    className='border border-left-none border-right-none rounded-none'
                    items={[
                        {
                            id: 1,
                            header: <div>General</div>,
                            body: (
                                <div className='divider-y-1 divider-style-solid divider-color-lighter'>
                                    <div className='display-grid grid-cols-3 gap-15 padding-x-5 padding-y-10'>
                                        <div className='text-color-dark'>Id</div>
                                        <div className='grid-colspan-2 word-break'>80</div>
                                    </div>
                                    <div className='display-grid grid-cols-3 gap-15 padding-x-5 padding-y-10'>
                                        <div className='text-color-dark'>Nickname</div>
                                        <div className='grid-colspan-2 word-break'>Adelia_Rutherford</div>
                                    </div>
                                    <div className='display-grid grid-cols-3 gap-15 padding-x-5 padding-y-10'>
                                        <div className='text-color-dark'>First name</div>
                                        <div className='grid-colspan-2 word-break'>Rolando</div>
                                    </div>
                                    <div className='display-grid grid-cols-3 gap-15 padding-x-5 padding-y-10'>
                                        <div className='text-color-dark'>Last name</div>
                                        <div className='grid-colspan-2 word-break'>Schuster</div>
                                    </div>
                                    <div className='display-grid grid-cols-3 gap-15 padding-x-5 padding-y-10'>
                                        <div className='text-color-dark'>Job</div>
                                        <div className='grid-colspan-2 word-break'>
                                            Future Applications Administrator
                                        </div>
                                    </div>
                                    <div className='display-grid grid-cols-3 gap-15 padding-x-5 padding-y-10'>
                                        <div className='text-color-dark'>Email</div>
                                        <div className='grid-colspan-2 word-break'>Bret.Block91@yahoo.com</div>
                                    </div>
                                    <div className='display-grid grid-cols-3 gap-15 padding-x-5 padding-y-10'>
                                        <div className='text-color-dark'>Phone</div>
                                        <div className='grid-colspan-2 word-break'>243-907-0058</div>
                                    </div>
                                </div>
                            ),
                            bodyClassName: 'padding-top-0',
                        },
                        {
                            id: 2,
                            header: <div>Graduations</div>,
                            body: dummyTextShort,
                            bodyClassName: 'padding-top-0 padding-bottom-20',
                        },
                        {
                            id: 3,
                            header: <div>Objectives</div>,
                            body: (
                                <div>
                                    <div className='form-group '>
                                        <FormLabel htmlFor='input1'>Subject</FormLabel>
                                        <input className='form-control' id='input1' placeholder='Subject' />
                                    </div>
                                    <div className='form-group '>
                                        <FormLabel htmlFor='input2'>Category</FormLabel>
                                        <input className='form-control' id='input2' placeholder='Enter a category' />
                                    </div>
                                    <div className='form-group '>
                                        <FormLabel htmlFor='textArea'>Textarea</FormLabel>
                                        <textarea className='form-control' rows={3} id='textArea' />
                                    </div>
                                </div>
                            ),
                            bodyClassName: 'padding-top-0',
                        },
                    ]}
                />
            </section>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="margin-auto border border-top-none border-bottom-none max-width-400">
    <section class="bg-white padding-bottom-20">
        <div class="padding-x-20 display-flex padding-top-10">
            <div class="display-flex gap-15 padding-bottom-25">
                <div class="Avatar bg-lighter" style="height: 50px;">
                    <span class="Avatar-initials">JD</span>
                </div>
                <div>
                    <div class="text-bold text-size-20">John Doe</div>
                    <div class="text-color-dark">Internal Directives Administrator</div>
                    <div class="margin-top-10">
                        <span class="label label-condensed label-danger">Not Working</span>
                    </div>
                </div>
            </div>
        </div>
        <ul class="expander-list list-group border border-left-none border-right-none rounded-none">
            <li class="list-group-item expandable">
                <div class="expander-list-header" aria-label="expander item header">
                    <span class="expander-list-header-content">
                        <div>General</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>Graduations</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>Objectives</div>
                    </span>
                    <span class="expander-icon rioglyph rioglyph-chevron-down">
                    </span>
                </div>
            </li>
        </ul>
    </section>
</div>
```

### Example: Shipment ID

Shipment details
Options
Shipment ID
982-457-ABX

Status
Out for delivery

Last update
July 23, 2025 – 10:31

Shipping type
Express

Origin
Hamburg, DE

Destination
Verona, IT

Vehicle information

Vehicle type
Truck with trailer

License plate
M-TD 3456

Driver
M. Schubert

Current load
19.4 t

Temperature
6 °C

Time & distance Estimated arrival
July 24, 2025 – 08:00

Current position
Near Munich

Distance to destination
498 km

Average speed
72 km/h

Last stop
Regensburg (Shell)

#### React (tsx)

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

export default () => {
    return (
        <div className='margin-auto border border-top-none border-bottom-none max-width-400'>
            {/* Actual content comes here */}
            <div className='padding-20 display-flex flex-column gap-25 space-y-10'>
                <section>
                    <legend className='margin-bottom-5 padding-bottom-5 display-flex align-items-center justify-content-between gap-15'>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='rioglyph rioglyph-parcel' />
                            <span>Shipment details</span>
                        </div>
                        <div>
                            <Button bsSize='sm' bsStyle='muted'>
                                Options
                            </Button>
                        </div>
                    </legend>
                    <div className='divider-y-1 divider-color-lighter divider-style-solid'>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Shipment ID</div>
                            <div className='text-right text-color-darkest'>982-457-ABX</div>
                        </div>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Status</div>
                            <div className='text-right text-color-darkest'>
                                <div className='label label-info label-condensed'>Out for delivery</div>
                            </div>
                        </div>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Last update</div>
                            <div className='text-right text-color-darkest'>July 23, 2025 – 10:31</div>
                        </div>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Shipping type</div>
                            <div className='text-right text-color-darkest'>Express</div>
                        </div>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Origin</div>
                            <div className='text-right text-color-darkest'>Hamburg, DE</div>
                        </div>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Destination</div>
                            <div className='text-right text-color-darkest'>Verona, IT</div>
                        </div>
                    </div>
                </section>

                <section>
                    <legend className='margin-bottom-5 padding-bottom-5 display-flex align-items-center justify-content-between gap-15'>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='rioglyph rioglyph-truck' />
                            <span>Vehicle information</span>
                        </div>
                        <div>
                            <Button bsSize='sm' bsStyle='muted' iconName='rioglyph-share-nodes' iconOnly />
                        </div>
                    </legend>
                    <div className='divider-y-1 divider-color-lighter divider-style-solid'>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Vehicle type</div>
                            <div className='text-right text-color-darkest'>Truck with trailer</div>
                        </div>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>License plate</div>
                            <div className='text-right text-color-darkest'>M-TD 3456</div>
                        </div>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Driver</div>
                            <div className='text-right text-color-darkest'>M. Schubert</div>
                        </div>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Current load</div>
                            <div className='text-right text-color-darkest'>19.4 t</div>
                        </div>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Temperature</div>
                            <div className='text-right text-color-darkest'>6 °C</div>
                        </div>
                    </div>
                </section>

                <section>
                    <legend className='display-flex align-items-center gap-5 margin-bottom-5'>
                        <span className='rioglyph rioglyph-time' />
                        <span>Time & distance</span>
                    </legend>
                    <div className='divider-y-1 divider-color-lighter divider-style-solid'>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Estimated arrival</div>
                            <div className='text-right text-color-darkest'>July 24, 2025 – 08:00</div>
                        </div>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Current position</div>
                            <div className='text-right text-color-darkest'>
                                <a href='#'>Near Munich</a>
                            </div>
                        </div>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Distance to destination</div>
                            <div className='text-right text-color-darkest'>498 km</div>
                        </div>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Average speed</div>
                            <div className='text-right text-color-darkest'>72 km/h</div>
                        </div>
                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>
                            <div className='min-width-40pct text-color-dark'>Last stop</div>
                            <div className='text-right text-color-darkest'>Regensburg (Shell)</div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="margin-auto border border-top-none border-bottom-none max-width-400">
    <div class="padding-20 display-flex flex-column gap-25 space-y-10">
        <section>
            <legend class="margin-bottom-5 padding-bottom-5 display-flex align-items-center justify-content-between gap-15">
                <div class="display-flex align-items-center gap-5">
                    <span class="rioglyph rioglyph-parcel">
                    </span>
                    <span>Shipment details</span>
                </div>
                <div>
                    <button type="button" class="btn btn-muted btn-sm btn-component" tabindex="0">Options</button>
                </div>
            </legend>
            <div class="divider-y-1 divider-color-lighter divider-style-solid">
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Shipment ID</div>
                    <div class="text-right text-color-darkest">982-457-ABX</div>
                </div>
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Status</div>
                    <div class="text-right text-color-darkest">
                        <div class="label label-info label-condensed">Out for delivery</div>
                    </div>
                </div>
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Last update</div>
                    <div class="text-right text-color-darkest">July 23, 2025 – 10:31</div>
                </div>
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Shipping type</div>
                    <div class="text-right text-color-darkest">Express</div>
                </div>
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Origin</div>
                    <div class="text-right text-color-darkest">Hamburg, DE</div>
                </div>
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Destination</div>
                    <div class="text-right text-color-darkest">Verona, IT</div>
                </div>
            </div>
        </section>
        <section>
            <legend class="margin-bottom-5 padding-bottom-5 display-flex align-items-center justify-content-between gap-15">
                <div class="display-flex align-items-center gap-5">
                    <span class="rioglyph rioglyph-truck">
                    </span>
                    <span>Vehicle information</span>
                </div>
                <div>
                    <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
                        <span class="rioglyph rioglyph-share-nodes">
                        </span>
                    </button>
                </div>
            </legend>
            <div class="divider-y-1 divider-color-lighter divider-style-solid">
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Vehicle type</div>
                    <div class="text-right text-color-darkest">Truck with trailer</div>
                </div>
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">License plate</div>
                    <div class="text-right text-color-darkest">M-TD 3456</div>
                </div>
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Driver</div>
                    <div class="text-right text-color-darkest">M. Schubert</div>
                </div>
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Current load</div>
                    <div class="text-right text-color-darkest">19.4 t</div>
                </div>
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Temperature</div>
                    <div class="text-right text-color-darkest">6 °C</div>
                </div>
            </div>
        </section>
        <section>
            <legend class="display-flex align-items-center gap-5 margin-bottom-5">
                <span class="rioglyph rioglyph-time">
                </span>
                <span>Time &amp; distance</span>
            </legend>
            <div class="divider-y-1 divider-color-lighter divider-style-solid">
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Estimated arrival</div>
                    <div class="text-right text-color-darkest">July 24, 2025 – 08:00</div>
                </div>
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Current position</div>
                    <div class="text-right text-color-darkest">
                        <a href="#">Near Munich</a>
                    </div>
                </div>
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Distance to destination</div>
                    <div class="text-right text-color-darkest">498 km</div>
                </div>
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Average speed</div>
                    <div class="text-right text-color-darkest">72 km/h</div>
                </div>
                <div class="display-flex justify-content-between padding-y-10 padding-x-5">
                    <div class="min-width-40pct text-color-dark">Last stop</div>
                    <div class="text-right text-color-darkest">Regensburg (Shell)</div>
                </div>
            </div>
        </section>
    </div>
</div>
```