@rio-cloud/uikit-mcp 1.1.7 → 1.1.9

package/dist/docs/templates/detail-views.md

@@ -1,942 +0,0 @@
-# Detail views
-
-*Category:* Templates
-*Section:* Content
-*Source:* https://uikit.developers.rio.cloud/#/templates/detail-views
-*Captured:* 2026-02-23T15:49:33.756Z
-
-## 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 kW6/6
-
-300 kW3/4
-
-#### Summary
-
-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 kW6/6
-
-300 kW3/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="0wbz7yyxbxbo" 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
-
-#### Summary
-
-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 & distanceEstimated arrival
-July 24, 2025 – 08:00
-
-Current position
-Near Munich
-
-Distance to destination
-498 km
-
-Average speed
-72 km/h
-
-Last stop
-Regensburg (Shell)
-
-#### Summary
-
-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 & distanceEstimated 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>
-```