@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

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

@@ -0,0 +1,846 @@
+# Detail views
+
+*Category:* Templates
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#/templates/detail-views
+*Captured:* 2026-04-20T12:55:40.527Z
+
+## 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="i9a6ms3np1" 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>
+```