@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

package/dist/docs/templates/feature-cards.md

@@ -0,0 +1,479 @@
+# Feature cards
+
+*Category:* Templates
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#/templates/feature-cards
+*Captured:* 2026-04-20T12:55:38.408Z
+
+## Feature cards
+
+### Example: Example 1
+
+Lorem ipsum dolor sit amet
+Tunc conicio adaugeo pel vobis suasoria sub blandior.
+Velut amplitudo caute cernuus cubicularis caritas tantum perferendis.
+Vulpes vulnero ad complectus tredecim clementia adulescens.
+Volubilis distinctio cupiditate unus theatrum carcer conspergo temporibus claro terror.
+Get started
+
+#### React (tsx)
+
+```tsx
+import { faker } from '@faker-js/faker';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import Card from '@rio-cloud/rio-uikit/Card';
+import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
+
+export default () => (
+    <div className='margin-25-md max-width-800 margin-auto'>
+        <Card padding={25} className=''>
+            <div className='text-size-h3 line-height-125rel text-color-darkest text-medium margin-bottom-15'>
+                Lorem ipsum dolor sit amet
+            </div>
+            <div className='display-flex gap-25 flex-wrap justify-content-between'>
+                <div className='flex-1-1 max-width-600'>{faker.lorem.lines(4)}</div>
+                <ButtonToolbar className='flex-0'>
+                    <Button bsStyle='primary' iconName='rioglyph-sparkles'>
+                        Get started
+                    </Button>
+                </ButtonToolbar>
+            </div>
+        </Card>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md max-width-800 margin-auto">
+    <div class="bg-white rounded border shadow-default padding-25">
+        <div class="text-size-h3 line-height-125rel text-color-darkest text-medium margin-bottom-15">Lorem ipsum dolor sit amet</div>
+        <div class="display-flex gap-25 flex-wrap justify-content-between">
+            <div class="flex-1-1 max-width-600">Tunc conicio adaugeo pel vobis suasoria sub blandior.
+                Velut amplitudo caute cernuus cubicularis caritas tantum perferendis.
+                Vulpes vulnero ad complectus tredecim clementia adulescens.
+                Volubilis distinctio cupiditate unus theatrum carcer conspergo temporibus claro terror.</div>
+            <div class="flex-0 btn-toolbar">
+                <button type="button" class="btn btn-primary btn-component" tabindex="0">
+                    <span class="rioglyph rioglyph-sparkles">
+                    </span>Get started</button>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Example 2
+
+Lorem ipsum
+Lorem ipsum dolor sit amet
+Vulnus perspiciatis depraedor villa earum pecto pecto.
+Aiunt vulgus contego comptus urbanus tamdiu voco quod.
+Sublime ultra sed.
+Coma adeptio creptio.
+Read more
+
+#### React (tsx)
+
+```tsx
+import { faker } from '@faker-js/faker';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import Card from '@rio-cloud/rio-uikit/Card';
+
+export default () => (
+    <div className='margin-25-md max-width-800 margin-auto'>
+        <Card padding={25}>
+            <div className='text-color-primary text-medium'>Lorem ipsum</div>
+            <div className='text-size-h3 line-height-125rel text-color-darkest text-medium'>
+                Lorem ipsum dolor sit amet
+            </div>
+            <p className='margin-bottom-25'>{faker.lorem.lines(4)}</p>
+            <div>
+                <Button bsStyle='primary' iconName='rioglyph-arrow-right' iconRight>
+                    Read more
+                </Button>
+            </div>
+        </Card>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md max-width-800 margin-auto">
+    <div class="bg-white rounded border shadow-default padding-25">
+        <div class="text-color-primary text-medium">Lorem ipsum</div>
+        <div class="text-size-h3 line-height-125rel text-color-darkest text-medium">Lorem ipsum dolor sit amet</div>
+        <p class="margin-bottom-25">Vulnus perspiciatis depraedor villa earum pecto pecto.
+            Aiunt vulgus contego comptus urbanus tamdiu voco quod.
+            Sublime ultra sed.
+            Coma adeptio creptio.</p>
+        <div>
+            <button type="button" class="btn btn-primary btn-icon-right btn-component" tabindex="0">
+                <span class="rioglyph rioglyph-arrow-right">
+                </span>Read more</button>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Example 3
+
+Lorem ipsum dolor sit amet
+Pecto deserunt vix tabesco.
+Trucido solus trans argumentum adsum desolo coruscus verbum.
+Contra audeo celo tristis.
+Ancilla usitas defendo.
+Numquam crepusculum atque charisma absque sonitus audax.
+Learn more about our delivery features
+
+#### React (tsx)
+
+```tsx
+import { faker } from '@faker-js/faker';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import Card from '@rio-cloud/rio-uikit/Card';
+
+export default () => (
+    <div className='margin-25-md max-width-800 margin-auto'>
+        <Card padding={25}>
+            <div className='text-size-h4 line-height-125rel text-color-darkest text-medium'>
+                Lorem ipsum dolor sit amet
+            </div>
+            <p className='margin-bottom-15'>{faker.lorem.lines(5)}</p>
+            <div>
+                <Button variant='link-inline' className='text-medium' iconName='rioglyph-arrow-right' iconRight>
+                    Learn more about our delivery features
+                </Button>
+            </div>
+        </Card>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md max-width-800 margin-auto">
+    <div class="bg-white rounded border shadow-default padding-25">
+        <div class="text-size-h4 line-height-125rel text-color-darkest text-medium">Lorem ipsum dolor sit amet</div>
+        <p class="margin-bottom-15">Pecto deserunt vix tabesco.
+            Trucido solus trans argumentum adsum desolo coruscus verbum.
+            Contra audeo celo tristis.
+            Ancilla usitas defendo.
+            Numquam crepusculum atque charisma absque sonitus audax.</p>
+        <div>
+            <button type="button" class="btn btn-default btn-link btn-link-inline btn-icon-right btn-component text-medium" tabindex="0">
+                <span class="rioglyph rioglyph-arrow-right">
+                </span>Learn more about our delivery features</button>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Example 4
+
+Lorem ipsum dolor sit amet
+Ratione caries sui textus utroque.
+Crinis vesco assumenda torqueo confugo argentum adhuc verecundia aegrotatio.
+Canis casso sordeo corrigo ver laboriosam ex cultura ambitus.
+Sed decumbo esse balbus universe studio certe patrocinor sonitus defungo.
+Amita atrox tenetur vacuus delectatio circumvenio.
+
+View details Get started
+
+#### React (tsx)
+
+```tsx
+import { faker } from '@faker-js/faker';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import Card from '@rio-cloud/rio-uikit/Card';
+import SvgImage from '@rio-cloud/rio-uikit/SvgImage';
+import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
+
+export default () => (
+    <div className='margin-25-md max-width-800 margin-auto'>
+        <Card className='padding-x-25 padding-y-50 display-flex flex-column flex-row-sm gap-25'>
+            <SvgImage name='abstract-product/product' size={100} className='flex-0' />
+            <div className='display-flex flex-wrap gap-10'>
+                <div className='flex-1-1'>
+                    <div className='text-size-h4 line-height-125rel text-color-darkest text-medium'>
+                        Lorem ipsum dolor sit amet
+                    </div>
+                    <p className='margin-bottom-15'>{faker.lorem.lines(5)}</p>
+                </div>
+                <ButtonToolbar className='flex-1-1'>
+                    <Button bsStyle='default'>View details</Button>
+                    <Button bsStyle='primary' iconName='rioglyph-sparkles'>
+                        Get started
+                    </Button>
+                </ButtonToolbar>
+            </div>
+        </Card>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md max-width-800 margin-auto">
+    <div class="bg-white rounded border shadow-default padding-15 padding-x-25 padding-y-50 display-flex flex-column flex-row-sm gap-25">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100" height="100" viewBox="0 0 250 250" version="1.1" xml:space="preserve" class="flex-0" style="fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-miterlimit: 2;">
+            <g id="product" transform="matrix(3.65079,0,0,3.65085,5.02397,-234.3)">
+                <g transform="matrix(1.14763,0,0,1.14763,-0.201218,-9.87871)">
+                    <path d="M49.363,90.916C49.363,104.17 38.618,114.915 25.363,114.915C12.108,114.915 1.363,104.17 1.363,90.916C1.363,77.661 12.108,66.916 25.363,66.916C38.618,66.916 49.363,77.661 49.363,90.916Z" style="fill: var(--gray-lighter); fill-rule: nonzero;">
+                    </path>
+                </g>
+                <path d="M18.363,104.915L18.363,120.915L37.363,129.915L56.363,120.915L56.363,104.915L18.363,104.915Z" style="fill: var(--color-highlight-lighter); fill-rule: nonzero;">
+                </path>
+                <path d="M56.363,107.915L56.363,120.915L37.363,129.915L18.363,120.915L18.363,107.915" style="fill: none; stroke: var(--brand-info); stroke-width: 2.3px;">
+                </path>
+                <path d="M37.363,105.915L37.363,129.915" style="fill: none; stroke: var(--brand-info); stroke-width: 2.3px;">
+                </path>
+                <path d="M10.363,103.915L29.363,112.915L37.363,105.915L37.363,104.915L18.363,95.916L10.363,102.915L10.363,103.915Z" style="fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;">
+                </path>
+                <path d="M10.363,103.915L29.363,112.915L37.363,105.915L37.363,104.915L18.363,95.916L10.363,102.915L10.363,103.915Z" style="fill: none; stroke: var(--brand-info); stroke-width: 2.3px;">
+                </path>
+                <path d="M64.363,103.915L45.363,112.915L37.363,105.915L37.363,104.915L56.363,95.916L64.363,102.915L64.363,103.915Z" style="fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;">
+                </path>
+                <path d="M64.363,103.915L45.363,112.915L37.363,105.915L37.363,104.915L56.363,95.916L64.363,102.915L64.363,103.915Z" style="fill: none; stroke: var(--brand-info); stroke-width: 2.3px;">
+                </path>
+                <path d="M10.363,87.916L29.363,78.916L37.363,85.916L37.363,86.916L18.363,95.916L10.363,88.916L10.363,87.916Z" style="fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;">
+                </path>
+                <path d="M10.363,87.916L29.363,78.916L37.363,85.916L37.363,86.916L18.363,95.916L10.363,88.916L10.363,87.916Z" style="fill: none; stroke: var(--brand-info); stroke-width: 2.3px;">
+                </path>
+                <path d="M64.363,87.916L45.363,78.916L37.363,85.916L37.363,86.916L56.363,95.916L64.363,88.916L64.363,87.916Z" style="fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;">
+                </path>
+                <path d="M64.363,87.916L45.363,78.916L37.363,85.916L37.363,86.916L56.363,95.916L64.363,88.916L64.363,87.916Z" style="fill: none; stroke: var(--brand-info); stroke-width: 2.3px;">
+                </path>
+                <path d="M37.363,73.916L35.363,75.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M42.363,68.916L40.363,70.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M40.363,73.916L42.363,75.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M35.363,68.916L37.363,70.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M20.363,72.916L20.363,74.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M20.363,76.916L20.363,78.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M19.363,75.916L17.363,75.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M23.363,75.916L21.363,75.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M10.363,111.915L10.363,113.915" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M10.363,115.915L10.363,117.915" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M9.363,114.915L7.363,114.915" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M13.363,114.915L11.363,114.915" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M51.363,66.916L51.363,68.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M51.363,70.916L51.363,72.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M50.363,69.916L48.363,69.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+                <path d="M54.363,69.916L52.363,69.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
+                </path>
+            </g>
+        </svg>
+        <div class="display-flex flex-wrap gap-10">
+            <div class="flex-1-1">
+                <div class="text-size-h4 line-height-125rel text-color-darkest text-medium">Lorem ipsum dolor sit amet</div>
+                <p class="margin-bottom-15">Ratione caries sui textus utroque.
+                    Crinis vesco assumenda torqueo confugo argentum adhuc verecundia aegrotatio.
+                    Canis casso sordeo corrigo ver laboriosam ex cultura ambitus.
+                    Sed decumbo esse balbus universe studio certe patrocinor sonitus defungo.
+                    Amita atrox tenetur vacuus delectatio circumvenio.</p>
+            </div>
+            <div class="flex-1-1 btn-toolbar">
+                <button type="button" class="btn btn-default btn-component" tabindex="0">View details</button>
+                <button type="button" class="btn btn-primary btn-component" tabindex="0">
+                    <span class="rioglyph rioglyph-sparkles">
+                    </span>Get started</button>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
+
+Customize
+Import your own data
+
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
+Read more
+
+Use on mobile
+Get the app
+
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
+Download now
+
+Tips
+Discover new features
+
+Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
+Read more
+
+#### React (tsx)
+
+```tsx
+import Button from '@rio-cloud/rio-uikit/Button';
+import Card from '@rio-cloud/rio-uikit/Card';
+
+export default () => (
+    <div className='margin-25-md margin-auto'>
+        <div className='display-grid grid-cols-1 grid-cols-2-sm grid-cols-3-md grid-rowspan-3 gap-25'>
+            <Card
+                className='display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0'
+                padding={25}
+                shadow='smooth'
+            >
+                <div className='text-center text-color-darker margin-top-15'>
+                    <div className='text-size-16'>Customize</div>
+                    <div className='text-size-12'>
+                        <div className='text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium'>
+                            Import your own data
+                        </div>
+                    </div>
+                </div>
+                <div className='text-size-20 text-center padding-15'>
+                    <span className='rioglyph rioglyph-stats text-size-300pct' />
+                </div>
+                <div>
+                    <p className='margin-bottom-20 text-color-dark'>
+                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
+                        commodo.
+                    </p>
+                    <Button bsStyle='primary' bsSize='lg' block>
+                        Read more
+                    </Button>
+                </div>
+            </Card>
+
+            <Card
+                className='display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0'
+                padding={25}
+                shadow='smooth'
+            >
+                <div className='text-center text-color-darker margin-top-15'>
+                    <div className='text-size-16'>Use on mobile</div>
+                    <div className='text-size-12'>
+                        <div className='text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium'>
+                            Get the app
+                        </div>
+                    </div>
+                </div>
+                <div className='text-size-20 text-center padding-15'>
+                    <span className='rioglyph rioglyph-phone text-size-300pct' />
+                </div>
+                <div>
+                    <p className='margin-bottom-20 text-color-dark'>
+                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
+                        commodo.
+                    </p>
+                    <Button bsStyle='primary' bsSize='lg' block>
+                        Download now
+                    </Button>
+                </div>
+            </Card>
+
+            <Card
+                className='display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0'
+                padding={25}
+                shadow='smooth'
+            >
+                <div className='text-center text-color-darker margin-top-15'>
+                    <div className='text-size-16'>Tips</div>
+                    <div className='text-size-12'>
+                        <div className='text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium'>
+                            Discover new features
+                        </div>
+                    </div>
+                </div>
+                <div className='text-size-20 text-center padding-15'>
+                    <span className='rioglyph rioglyph-cost-efficency text-size-300pct' />
+                </div>
+                <div>
+                    <p className='margin-bottom-20 text-color-dark'>
+                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
+                        commodo.
+                    </p>
+                    <Button bsStyle='primary' bsSize='lg' block>
+                        Read more
+                    </Button>
+                </div>
+            </Card>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md margin-auto">
+    <div class="display-grid grid-cols-1 grid-cols-2-sm grid-cols-3-md grid-rowspan-3 gap-25">
+        <div class="bg-white rounded border shadow-smooth padding-25 display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0">
+            <div class="text-center text-color-darker margin-top-15">
+                <div class="text-size-16">Customize</div>
+                <div class="text-size-12">
+                    <div class="text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium">Import your own data</div>
+                </div>
+            </div>
+            <div class="text-size-20 text-center padding-15">
+                <span class="rioglyph rioglyph-stats text-size-300pct">
+                </span>
+            </div>
+            <div>
+                <p class="margin-bottom-20 text-color-dark">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
+                <button type="button" class="btn btn-primary btn-lg btn-block btn-component" tabindex="0">Read more</button>
+            </div>
+        </div>
+        <div class="bg-white rounded border shadow-smooth padding-25 display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0">
+            <div class="text-center text-color-darker margin-top-15">
+                <div class="text-size-16">Use on mobile</div>
+                <div class="text-size-12">
+                    <div class="text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium">Get the app</div>
+                </div>
+            </div>
+            <div class="text-size-20 text-center padding-15">
+                <span class="rioglyph rioglyph-phone text-size-300pct">
+                </span>
+            </div>
+            <div>
+                <p class="margin-bottom-20 text-color-dark">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
+                <button type="button" class="btn btn-primary btn-lg btn-block btn-component" tabindex="0">Download now</button>
+            </div>
+        </div>
+        <div class="bg-white rounded border shadow-smooth padding-25 display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0">
+            <div class="text-center text-color-darker margin-top-15">
+                <div class="text-size-16">Tips</div>
+                <div class="text-size-12">
+                    <div class="text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium">Discover new features</div>
+                </div>
+            </div>
+            <div class="text-size-20 text-center padding-15">
+                <span class="rioglyph rioglyph-cost-efficency text-size-300pct">
+                </span>
+            </div>
+            <div>
+                <p class="margin-bottom-20 text-color-dark">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
+                <button type="button" class="btn btn-primary btn-lg btn-block btn-component" tabindex="0">Read more</button>
+            </div>
+        </div>
+    </div>
+</div>
+```

package/dist/docs/templates/form-summary.md

@@ -0,0 +1,179 @@
+# Form summary
+
+*Category:* Templates
+*Section:* Forms
+*Source:* https://uikit.developers.rio.cloud/#/templates/form-summary
+*Captured:* 2026-04-20T12:55:45.594Z
+
+## Form summary
+
+### Example: Request summary
+
+Request summary
+Generated client request data
+
+Contact person Lorena Hammes-Emard
+Requested role Customer Communications Director
+Contact email Leola.Denesik@gmail.com
+Annual budget €114,039.00
+Project description Tyrannus absum concedo ara suffragium vitiosus.
+Dolorem congregatio tenetur spectaculum alo conforto amet complectus.
+Torqueo vae volva causa tergo cras.
+Supporting files project-outline.pdf
+2.4MB
+Download
+
+wireframes.pdf
+3.7MB
+Download
+
+#### React (tsx)
+
+```tsx
+import { faker } from '@faker-js/faker';
+import Button from '@rio-cloud/rio-uikit/Button';
+import { FormattedNumber } from 'react-intl';
+
+export default () => {
+    const subjectInfo = {
+        fullName: faker.person.fullName(),
+        role: faker.person.jobTitle(),
+        email: faker.internet.email(),
+        budget: faker.number.int({ min: 50_000, max: 200_000 }),
+        description: faker.lorem.lines(3),
+        attachments: [
+            {
+                name: 'project-outline.pdf',
+                sizeMB: 2.4,
+            },
+            {
+                name: 'wireframes.pdf',
+                sizeMB: 3.7,
+            },
+        ],
+    };
+
+    return (
+        <div className='max-width-600 margin-auto'>
+            <div>
+                <div className='padding-x-5'>
+                    <h3 className='text-base/7 font-semibold text-text-color-darker'>Request summary</h3>
+                    <p className='mt-1 max-w-2xl text-sm/6 text-gray-500'>Generated client request data</p>
+                </div>
+                <div className='mt-6 border-t border-gray-100'>
+                    <dl className='divider-y-1 divider-color-lighter divider-style-solid'>
+                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
+                            <dt className='text-medium text-color-darkest'>Contact person</dt>
+                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.fullName}</dd>
+                        </div>
+                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
+                            <dt className='text-medium text-color-darkest'>Requested role</dt>
+                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.role}</dd>
+                        </div>
+                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
+                            <dt className='text-medium text-color-darkest'>Contact email</dt>
+                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.email}</dd>
+                        </div>
+                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
+                            <dt className='text-medium text-color-darkest'>Annual budget</dt>
+                            <dd className='grid-colspan-2 text-color-darker'>
+                                <FormattedNumber value={subjectInfo.budget} style='currency' currency='EUR' />
+                            </dd>
+                        </div>
+                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
+                            <dt className='text-medium text-color-darkest'>Project description</dt>
+                            <dd className='grid-colspan-2 text-color-darker'>{subjectInfo.description}</dd>
+                        </div>
+                        <div className='display-grid grid-cols-3 padding-x-5 padding-y-15'>
+                            <dt className='text-medium text-color-darkest'>Supporting files</dt>
+                            <dd className='grid-colspan-2'>
+                                <div className='list-group border rounded'>
+                                    {subjectInfo.attachments.map(file => (
+                                        <div
+                                            key={file.name}
+                                            className='list-group-item display-flex flex-wrap justify-content-between display-grid-sm grid-cols-7-sm align-items-center column-gap-5 padding-x-15 padding-y-5'
+                                        >
+                                            <div className='grid-colspan-4'>{file.name}</div>
+                                            <div className='text-color-dark text-size-12'>
+                                                <FormattedNumber
+                                                    value={file.sizeMB}
+                                                    style='unit'
+                                                    unit='megabyte'
+                                                    unitDisplay='narrow'
+                                                />
+                                            </div>
+                                            <div className='grid-colspan-2 text-right'>
+                                                <Button variant='link'>Download</Button>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-600 margin-auto">
+    <div>
+        <div class="padding-x-5">
+            <h3 class="text-base/7 font-semibold text-text-color-darker">Request summary</h3>
+            <p class="mt-1 max-w-2xl text-sm/6 text-gray-500">Generated client request data</p>
+        </div>
+        <div class="mt-6 border-t border-gray-100">
+            <dl class="divider-y-1 divider-color-lighter divider-style-solid">
+                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
+                    <dt class="text-medium text-color-darkest">Contact person</dt>
+                    <dd class="grid-colspan-2 text-color-darker">Lorena Hammes-Emard</dd>
+                </div>
+                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
+                    <dt class="text-medium text-color-darkest">Requested role</dt>
+                    <dd class="grid-colspan-2 text-color-darker">Customer Communications Director</dd>
+                </div>
+                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
+                    <dt class="text-medium text-color-darkest">Contact email</dt>
+                    <dd class="grid-colspan-2 text-color-darker">Leola.Denesik@gmail.com</dd>
+                </div>
+                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
+                    <dt class="text-medium text-color-darkest">Annual budget</dt>
+                    <dd class="grid-colspan-2 text-color-darker">€114,039.00</dd>
+                </div>
+                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
+                    <dt class="text-medium text-color-darkest">Project description</dt>
+                    <dd class="grid-colspan-2 text-color-darker">Tyrannus absum concedo ara suffragium vitiosus.
+                        Dolorem congregatio tenetur spectaculum alo conforto amet complectus.
+                        Torqueo vae volva causa tergo cras.</dd>
+                </div>
+                <div class="display-grid grid-cols-3 padding-x-5 padding-y-15">
+                    <dt class="text-medium text-color-darkest">Supporting files</dt>
+                    <dd class="grid-colspan-2">
+                        <div class="list-group border rounded">
+                            <div class="list-group-item display-flex flex-wrap justify-content-between display-grid-sm grid-cols-7-sm align-items-center column-gap-5 padding-x-15 padding-y-5">
+                                <div class="grid-colspan-4">project-outline.pdf</div>
+                                <div class="text-color-dark text-size-12">2.4MB</div>
+                                <div class="grid-colspan-2 text-right">
+                                    <button type="button" class="btn btn-default btn-link btn-component" tabindex="0">Download</button>
+                                </div>
+                            </div>
+                            <div class="list-group-item display-flex flex-wrap justify-content-between display-grid-sm grid-cols-7-sm align-items-center column-gap-5 padding-x-15 padding-y-5">
+                                <div class="grid-colspan-4">wireframes.pdf</div>
+                                <div class="text-color-dark text-size-12">3.7MB</div>
+                                <div class="grid-colspan-2 text-right">
+                                    <button type="button" class="btn btn-default btn-link btn-component" tabindex="0">Download</button>
+                                </div>
+                            </div>
+                        </div>
+                    </dd>
+                </div>
+            </dl>
+        </div>
+    </div>
+</div>
+```