# Data usage cards

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

## Data usage cards

### Example: Example 1

Data used for shipment tracking

The following data may be used to track shipments across carriers and systems:
Vehicle ID
Current location
Shipment status
Timestamps
Driver ID
Route info

Edit shipment settings

Data linked to your company profile

This information may be associated with your identity or company profile:
Customer ID
Delivery address
Shipping docs
Usage metrics
Freight costs
Other data

Edit profile settings

#### React (tsx)

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

export default () => (
    <div className='max-width-600 margin-auto'>
        <div className='display-grid gap-20 grid-cols-1 grid-cols-2-md'>
            <div className='bg-white rounded border padding-20 display-flex flex-column justify-content-between'>
                <div className='display-flex flex-column gap-5 justify-content-center text-color-darker margin-bottom-25'>
                    <span className='rioglyph rioglyph-delivery text-size-h2' />
                    <div className='text-size-18 text-bold text-center'>Data used for shipment tracking</div>
                </div>
                <div>
                    <div className='text-color-darker text-center margin-bottom-15'>
                        The following data may be used to track shipments across carriers and systems:
                    </div>
                    <div className='display-grid grid-cols-2 gap-10 text-size-14 text-color-darker'>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='rioglyph rioglyph-truck' /> Vehicle ID
                        </div>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='rioglyph rioglyph-map-marker' /> Current location
                        </div>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='rioglyph rioglyph-archive' /> Shipment status
                        </div>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='rioglyph rioglyph-time' /> Timestamps
                        </div>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='rioglyph rioglyph-user' /> Driver ID
                        </div>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='rioglyph rioglyph-route' /> Route info
                        </div>
                    </div>
                    <Button className='margin-top-25' variant='link' block>
                        Edit shipment settings
                    </Button>
                </div>
            </div>

            <div className='bg-white rounded border padding-20 display-flex flex-column justify-content-between'>
                <div className='display-flex flex-column gap-5 justify-content-center text-color-darker margin-bottom-25'>
                    <span className='rioglyph rioglyph-user-sign text-size-h2' />
                    <div className='text-size-18 text-bold text-center'>Data linked to your company profile</div>
                </div>
                <div>
                    <div className='text-color-darker text-center margin-bottom-15'>
                        This information may be associated with your identity or company profile:
                    </div>
                    <div className='display-grid grid-cols-2 gap-10 text-size-14 text-color-darker'>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='rioglyph rioglyph-user-group' /> Customer ID
                        </div>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='rioglyph rioglyph-map' /> Delivery address
                        </div>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='rioglyph rioglyph-document' /> Shipping docs
                        </div>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='rioglyph rioglyph-stats' /> Usage metrics
                        </div>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='rioglyph rioglyph-cost-efficency' /> Freight costs
                        </div>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='rioglyph rioglyph-info-sign' /> Other data
                        </div>
                    </div>
                    <Button className='margin-top-25' variant='link' block>
                        Edit profile settings
                    </Button>
                </div>
            </div>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="max-width-600 margin-auto">
    <div class="display-grid gap-20 grid-cols-1 grid-cols-2-md">
        <div class="bg-white rounded border padding-20 display-flex flex-column justify-content-between">
            <div class="display-flex flex-column gap-5 justify-content-center text-color-darker margin-bottom-25">
                <span class="rioglyph rioglyph-delivery text-size-h2">
                </span>
                <div class="text-size-18 text-bold text-center">Data used for shipment tracking</div>
            </div>
            <div>
                <div class="text-color-darker text-center margin-bottom-15">The following data may be used to track shipments across carriers and systems:</div>
                <div class="display-grid grid-cols-2 gap-10 text-size-14 text-color-darker">
                    <div class="display-flex align-items-center gap-5">
                        <span class="rioglyph rioglyph-truck">
                        </span> Vehicle ID
                    </div>
                    <div class="display-flex align-items-center gap-5">
                        <span class="rioglyph rioglyph-map-marker">
                        </span> Current location
                    </div>
                    <div class="display-flex align-items-center gap-5">
                        <span class="rioglyph rioglyph-archive">
                        </span> Shipment status
                    </div>
                    <div class="display-flex align-items-center gap-5">
                        <span class="rioglyph rioglyph-time">
                        </span> Timestamps
                    </div>
                    <div class="display-flex align-items-center gap-5">
                        <span class="rioglyph rioglyph-user">
                        </span> Driver ID
                    </div>
                    <div class="display-flex align-items-center gap-5">
                        <span class="rioglyph rioglyph-route">
                        </span> Route info
                    </div>
                </div>
                <button type="button" class="btn btn-default btn-link btn-block btn-component margin-top-25" tabindex="0">Edit shipment settings</button>
            </div>
        </div>
        <div class="bg-white rounded border padding-20 display-flex flex-column justify-content-between">
            <div class="display-flex flex-column gap-5 justify-content-center text-color-darker margin-bottom-25">
                <span class="rioglyph rioglyph-user-sign text-size-h2">
                </span>
                <div class="text-size-18 text-bold text-center">Data linked to your company profile</div>
            </div>
            <div>
                <div class="text-color-darker text-center margin-bottom-15">This information may be associated with your identity or company profile:</div>
                <div class="display-grid grid-cols-2 gap-10 text-size-14 text-color-darker">
                    <div class="display-flex align-items-center gap-5">
                        <span class="rioglyph rioglyph-user-group">
                        </span> Customer ID
                    </div>
                    <div class="display-flex align-items-center gap-5">
                        <span class="rioglyph rioglyph-map">
                        </span> Delivery address
                    </div>
                    <div class="display-flex align-items-center gap-5">
                        <span class="rioglyph rioglyph-document">
                        </span> Shipping docs
                    </div>
                    <div class="display-flex align-items-center gap-5">
                        <span class="rioglyph rioglyph-stats">
                        </span> Usage metrics
                    </div>
                    <div class="display-flex align-items-center gap-5">
                        <span class="rioglyph rioglyph-cost-efficency">
                        </span> Freight costs
                    </div>
                    <div class="display-flex align-items-center gap-5">
                        <span class="rioglyph rioglyph-info-sign">
                        </span> Other data
                    </div>
                </div>
                <button type="button" class="btn btn-default btn-link btn-block btn-component margin-top-25" tabindex="0">Edit profile settings</button>
            </div>
        </div>
    </div>
</div>
```