@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/templates/list-blocks.md

@@ -0,0 +1,1021 @@
+# List blocks
+
+*Category:* Templates
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#templates/list-blocks
+*Captured:* 2025-12-12T14:21:35.307Z
+
+## List blocks
+
+### Example: Venio beatus volo deputo.
+
+Lorem ipsum dolor
+Venio beatus volo deputo.
+
+Shanahan Inc
+Adhuc tertius truculenter texo vulgus.
+
+Connect
+
+Olson Inc
+Socius ubi barba cado bestia vis.
+Vox viscus bene architecto dicta.
+
+Connect
+
+Williamson, Abshire and Parisian
+Tempore illum tonsor certe demens amplitudo.
+
+Connect
+
+#### Summary
+
+Lorem ipsum dolor
+Venio beatus volo deputo.
+
+Shanahan Inc
+Adhuc tertius truculenter texo vulgus.
+
+Connect
+
+Olson Inc
+Socius ubi barba cado bestia vis.
+Vox viscus bene architecto dicta.
+
+Connect
+
+Williamson, Abshire and Parisian
+Tempore illum tonsor certe demens amplitudo.
+
+Connect
+
+#### React (tsx)
+
+```tsx
+import { faker } from '@faker-js/faker';
+import Button from '@rio-cloud/rio-uikit/Button';
+
+export default () => {
+    const examples = [
+        {
+            name: faker.company.name(),
+            icon: 'rioglyph-academic-cap',
+            description: faker.lorem.lines(1),
+        },
+        {
+            name: faker.company.name(),
+            icon: 'rioglyph-inbox',
+            description: faker.lorem.lines(2),
+        },
+        {
+            name: faker.company.name(),
+            icon: 'rioglyph-rio',
+            description: faker.lorem.lines(1),
+        },
+    ];
+
+    return (
+        <div className='max-width-500 margin-auto padding-5'>
+            <div className='text-size-h2 font-bold'>Lorem ipsum dolor</div>
+            <p className='text-color-dark margin-top-0 margin-bottom-20'>{faker.lorem.lines(1)}</p>
+
+            <div className='space-y-15'>
+                {examples.map(item => (
+                    <div key={item.name} className='bg-white padding-15 rounded-large shadow-subtle border'>
+                        <div className='display-flex gap-15'>
+                            <div className='height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14'>
+                                <span className={`rioglyph ${item.icon} text-size-300pct`} />
+                            </div>
+                            <div className='flex-1-1 display-flex gap-15 flex-row-ls flex-column'>
+                                <div className='flex-1-1'>
+                                    <p className='text-size-18 margin-0 margin-bottom-5'>{item.name}</p>
+                                    <p className='text-color-dark margin-0'>{item.description}</p>
+                                </div>
+                                <div className='display-flex align-items-center'>
+                                    <Button>Connect</Button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-500 margin-auto padding-5">
+    <div class="text-size-h2 font-bold">Lorem ipsum dolor</div>
+    <p class="text-color-dark margin-top-0 margin-bottom-20">Venio beatus volo deputo.</p>
+    <div class="space-y-15">
+        <div class="bg-white padding-15 rounded-large shadow-subtle border">
+            <div class="display-flex gap-15">
+                <div class="height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14">
+                    <span class="rioglyph rioglyph-academic-cap text-size-300pct">
+                    </span>
+                </div>
+                <div class="flex-1-1 display-flex gap-15 flex-row-ls flex-column">
+                    <div class="flex-1-1">
+                        <p class="text-size-18 margin-0 margin-bottom-5">Shanahan Inc</p>
+                        <p class="text-color-dark margin-0">Adhuc tertius truculenter texo vulgus.</p>
+                    </div>
+                    <div class="display-flex align-items-center">
+                        <button type="button" class="btn btn-default btn-component" tabindex="0">Connect</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white padding-15 rounded-large shadow-subtle border">
+            <div class="display-flex gap-15">
+                <div class="height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14">
+                    <span class="rioglyph rioglyph-inbox text-size-300pct">
+                    </span>
+                </div>
+                <div class="flex-1-1 display-flex gap-15 flex-row-ls flex-column">
+                    <div class="flex-1-1">
+                        <p class="text-size-18 margin-0 margin-bottom-5">Olson Inc</p>
+                        <p class="text-color-dark margin-0">Socius ubi barba cado bestia vis.
+                            Vox viscus bene architecto dicta.</p>
+                    </div>
+                    <div class="display-flex align-items-center">
+                        <button type="button" class="btn btn-default btn-component" tabindex="0">Connect</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white padding-15 rounded-large shadow-subtle border">
+            <div class="display-flex gap-15">
+                <div class="height-80 aspect-ratio-1 bg-lightest rounded display-flex align-items-center justify-content-center text-size-14">
+                    <span class="rioglyph rioglyph-rio text-size-300pct">
+                    </span>
+                </div>
+                <div class="flex-1-1 display-flex gap-15 flex-row-ls flex-column">
+                    <div class="flex-1-1">
+                        <p class="text-size-18 margin-0 margin-bottom-5">Williamson, Abshire and Parisian</p>
+                        <p class="text-color-dark margin-0">Tempore illum tonsor certe demens amplitudo.</p>
+                    </div>
+                    <div class="display-flex align-items-center">
+                        <button type="button" class="btn btn-default btn-component" tabindex="0">Connect</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Choose the logistics session that fits your process
+
+Meeting type
+
+Choose the logistics session that fits your process
+Freight pickup
+Schedule cargo collection at origin
+
+30 min
+
+Route planning
+Discuss optimal route and ETA
+
+45 min
+
+Delivery coordination
+Align final drop-off and documents
+
+60 min
+
+#### Summary
+
+Meeting type
+
+Choose the logistics session that fits your process
+Freight pickup
+Schedule cargo collection at origin
+
+30 min
+
+Route planning
+Discuss optimal route and ETA
+
+45 min
+
+Delivery coordination
+Align final drop-off and documents
+
+60 min
+
+#### React (tsx)
+
+```tsx
+import Card from '@rio-cloud/rio-uikit/Card';
+
+export default () => {
+    const options = [
+        {
+            title: 'Freight pickup',
+            subtitle: 'Schedule cargo collection at origin',
+            duration: '30 min',
+        },
+        {
+            title: 'Route planning',
+            subtitle: 'Discuss optimal route and ETA',
+            duration: '45 min',
+        },
+        {
+            title: 'Delivery coordination',
+            subtitle: 'Align final drop-off and documents',
+            duration: '60 min',
+        },
+    ];
+
+    return (
+        <div className='max-width-500 margin-auto padding-5'>
+            <Card padding={25}>
+                <div className='display-flex align-items-center gap-5 margin-bottom-5'>
+                    <span className='rioglyph rioglyph-user text-size-18' />
+                    <div className='text-size-18 text-bold text-color-darkest'>Meeting type</div>
+                </div>
+                <div className='text-color-dark margin-bottom-20'>
+                    Choose the logistics session that fits your process
+                </div>
+
+                <div className='display-flex flex-column gap-10'>
+                    {options.map(({ title, subtitle, duration }) => (
+                        <div
+                            key={title}
+                            className='display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer'
+                        >
+                            <div>
+                                <div className='text-medium text-color-darkest'>{title}</div>
+                                <div className='text-color-dark text-size-14'>{subtitle}</div>
+                            </div>
+                            <div className='badge badge-muted'>{duration}</div>
+                        </div>
+                    ))}
+                </div>
+            </Card>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-500 margin-auto padding-5">
+    <div class="bg-white rounded border shadow-default padding-25">
+        <div class="display-flex align-items-center gap-5 margin-bottom-5">
+            <span class="rioglyph rioglyph-user text-size-18">
+            </span>
+            <div class="text-size-18 text-bold text-color-darkest">Meeting type</div>
+        </div>
+        <div class="text-color-dark margin-bottom-20">Choose the logistics session that fits your process</div>
+        <div class="display-flex flex-column gap-10">
+            <div class="display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer">
+                <div>
+                    <div class="text-medium text-color-darkest">Freight pickup</div>
+                    <div class="text-color-dark text-size-14">Schedule cargo collection at origin</div>
+                </div>
+                <div class="badge badge-muted">30 min</div>
+            </div>
+            <div class="display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer">
+                <div>
+                    <div class="text-medium text-color-darkest">Route planning</div>
+                    <div class="text-color-dark text-size-14">Discuss optimal route and ETA</div>
+                </div>
+                <div class="badge badge-muted">45 min</div>
+            </div>
+            <div class="display-flex justify-content-between align-items-center border border-color-light hover-border-color-highlight rounded padding-15 hover-bg-highlight-decent cursor-pointer">
+                <div>
+                    <div class="text-medium text-color-darkest">Delivery coordination</div>
+                    <div class="text-color-dark text-size-14">Align final drop-off and documents</div>
+                </div>
+                <div class="badge badge-muted">60 min</div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Curtus speciosus cauda degusto.
+
+Lorem ipsum dolor
+Curtus speciosus cauda degusto.
+
+Collier - Leannon
+Expedita vomito suppono vicissitudo cupio consectetur compello speculum dedico.
+
+Mills and Sons
+Sumptus tredecim vulgivagus sodalitas delectus annus tumultus.
+Vulgo sint crastinus carpo annus conatus valeo ex vitiosus maiores.
+
+Rodriguez - Gottlieb
+Curatio nulla adipiscor tenus terminatio sortitus numquam.
+Cupressus culpa umquam caelestis pauci nesciunt cito alter similique.
+
+#### Summary
+
+Lorem ipsum dolor
+Curtus speciosus cauda degusto.
+
+Collier - Leannon
+Expedita vomito suppono vicissitudo cupio consectetur compello speculum dedico.
+
+Mills and Sons
+Sumptus tredecim vulgivagus sodalitas delectus annus tumultus.
+Vulgo sint crastinus carpo annus conatus valeo ex vitiosus maiores.
+
+Rodriguez - Gottlieb
+Curatio nulla adipiscor tenus terminatio sortitus numquam.
+Cupressus culpa umquam caelestis pauci nesciunt cito alter similique.
+
+#### React (tsx)
+
+```tsx
+import { faker } from '@faker-js/faker';
+
+export default () => {
+    const examples = [
+        {
+            name: faker.company.name(),
+            icon: 'rioglyph-trailer',
+            description: faker.lorem.lines(1),
+        },
+        {
+            name: faker.company.name(),
+            icon: 'rioglyph-truck',
+            description: faker.lorem.lines(2),
+        },
+        {
+            name: faker.company.name(),
+            icon: 'rioglyph-van',
+            description: faker.lorem.lines(2),
+        },
+    ];
+
+    return (
+        <div className='max-width-500 margin-auto padding-5'>
+            <div className='text-center'>
+                <div className='text-size-h2 font-bold'>Lorem ipsum dolor</div>
+                <p className='text-color-dark margin-top-0 margin-bottom-20'>{faker.lorem.lines(1)}</p>
+            </div>
+
+            <div className='space-y-15 divider-y-1 divider-color-light divider-style-solid'>
+                {examples.map(item => (
+                    <div key={item.name} className='padding-15'>
+                        <div className='display-flex gap-15'>
+                            <div className='text-size-14 text-color-darkest'>
+                                <span
+                                    className={`rioglyph ${item.icon} rioglyph-filled rioglyph-align-bottom text-size-300pct`}
+                                />
+                            </div>
+                            <div className='flex-1-1'>
+                                <div className='text-size-18 margin-bottom-2'>{item.name}</div>
+                                <div className='text-color-dark'>{item.description}</div>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-500 margin-auto padding-5">
+    <div class="text-center">
+        <div class="text-size-h2 font-bold">Lorem ipsum dolor</div>
+        <p class="text-color-dark margin-top-0 margin-bottom-20">Curtus speciosus cauda degusto.</p>
+    </div>
+    <div class="space-y-15 divider-y-1 divider-color-light divider-style-solid">
+        <div class="padding-15">
+            <div class="display-flex gap-15">
+                <div class="text-size-14 text-color-darkest">
+                    <span class="rioglyph rioglyph-trailer rioglyph-filled rioglyph-align-bottom text-size-300pct">
+                    </span>
+                </div>
+                <div class="flex-1-1">
+                    <div class="text-size-18 margin-bottom-2">Collier - Leannon</div>
+                    <div class="text-color-dark">Expedita vomito suppono vicissitudo cupio consectetur compello speculum dedico.</div>
+                </div>
+            </div>
+        </div>
+        <div class="padding-15">
+            <div class="display-flex gap-15">
+                <div class="text-size-14 text-color-darkest">
+                    <span class="rioglyph rioglyph-truck rioglyph-filled rioglyph-align-bottom text-size-300pct">
+                    </span>
+                </div>
+                <div class="flex-1-1">
+                    <div class="text-size-18 margin-bottom-2">Mills and Sons</div>
+                    <div class="text-color-dark">Sumptus tredecim vulgivagus sodalitas delectus annus tumultus.
+                        Vulgo sint crastinus carpo annus conatus valeo ex vitiosus maiores.</div>
+                </div>
+            </div>
+        </div>
+        <div class="padding-15">
+            <div class="display-flex gap-15">
+                <div class="text-size-14 text-color-darkest">
+                    <span class="rioglyph rioglyph-van rioglyph-filled rioglyph-align-bottom text-size-300pct">
+                    </span>
+                </div>
+                <div class="flex-1-1">
+                    <div class="text-size-18 margin-bottom-2">Rodriguez - Gottlieb</div>
+                    <div class="text-color-dark">Curatio nulla adipiscor tenus terminatio sortitus numquam.
+                        Cupressus culpa umquam caelestis pauci nesciunt cito alter similique.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Adinventitias thorax nisi sursum labore cursus depereo verecundia. Nam curso aperte tolero. Vis sub texo vinitor tabgo.
+
+Lorem ipsum dolor sit amet
+Sit ascit calcar cupio acquiro basium deserunt.
+Vociferor voluptatum umbra claudeo est ocer adeo volubilis vergo utique.
+
+Pacocha, Roberts and Schiller
+Adinventitias thorax nisi sursum labore cursus depereo verecundia.
+Nam curso aperte tolero.
+Vis sub texo vinitor tabgo.
+
+Wunsch LLC
+Cursus aspicio defessus apud confero assumenda canis coadunatio.
+Apostolus expedita varius curo alo.
+Ater atavus quae.
+
+Hartmann - Kling
+Alias adficio bos tredecim turpis id.
+Tristis suadeo dignissimos delectus tripudio tonsor.
+Bellum agnosco ambulo umquam vindico admitto.
+
+VonRueden LLC
+Corpus sollicito tendo vomer pecto.
+Commodo sto assentator trucido tremo cumque articulus.
+Allatus sumo admoneo.
+
+#### Summary
+
+Lorem ipsum dolor sit amet
+Sit ascit calcar cupio acquiro basium deserunt.
+Vociferor voluptatum umbra claudeo est ocer adeo volubilis vergo utique.
+
+Pacocha, Roberts and Schiller
+Adinventitias thorax nisi sursum labore cursus depereo verecundia.
+Nam curso aperte tolero.
+Vis sub texo vinitor tabgo.
+
+Wunsch LLC
+Cursus aspicio defessus apud confero assumenda canis coadunatio.
+Apostolus expedita varius curo alo.
+Ater atavus quae.
+
+Hartmann - Kling
+Alias adficio bos tredecim turpis id.
+Tristis suadeo dignissimos delectus tripudio tonsor.
+Bellum agnosco ambulo umquam vindico admitto.
+
+VonRueden LLC
+Corpus sollicito tendo vomer pecto.
+Commodo sto assentator trucido tremo cumque articulus.
+Allatus sumo admoneo.
+
+#### React (tsx)
+
+```tsx
+import { faker } from '@faker-js/faker';
+
+export default () => {
+    const examples = [
+        {
+            name: faker.company.name(),
+            icon: 'rioglyph-stats',
+            description: faker.lorem.lines(3),
+        },
+        {
+            name: faker.company.name(),
+            icon: 'rioglyph-server-stack',
+            description: faker.lorem.lines(3),
+        },
+        {
+            name: faker.company.name(),
+            icon: 'rioglyph-fingerprint',
+            description: faker.lorem.lines(3),
+        },
+        {
+            name: faker.company.name(),
+            icon: 'rioglyph-code-brackets',
+            description: faker.lorem.lines(3),
+        },
+    ];
+
+    return (
+        <div>
+            <div className='margin-auto max-width-800 margin-bottom-50'>
+                <div className='text-size-h2 text-medium'>Lorem ipsum dolor sit amet</div>
+                <div>{faker.lorem.lines(2)}</div>
+            </div>
+            <div className='margin-auto max-width-800 display-grid grid-cols-1 grid-cols-2-ls row-gap-25 column-gap-50'>
+                {examples.map(item => (
+                    <div key={item.name}>
+                        <div className='text-size-14 text-color-primary margin-bottom-10'>
+                            <span className={`rioglyph ${item.icon} text-size-200pct`} />
+                        </div>
+                        <div className='text-size-18 text-color-darker text-medium margin-bottom-5'>{item.name}</div>
+                        <div className='text-color-dark'>{item.description}</div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="margin-auto max-width-800 margin-bottom-50">
+        <div class="text-size-h2 text-medium">Lorem ipsum dolor sit amet</div>
+        <div>Sit ascit calcar cupio acquiro basium deserunt.
+            Vociferor voluptatum umbra claudeo est ocer adeo volubilis vergo utique.</div>
+    </div>
+    <div class="margin-auto max-width-800 display-grid grid-cols-1 grid-cols-2-ls row-gap-25 column-gap-50">
+        <div>
+            <div class="text-size-14 text-color-primary margin-bottom-10">
+                <span class="rioglyph rioglyph-stats text-size-200pct">
+                </span>
+            </div>
+            <div class="text-size-18 text-color-darker text-medium margin-bottom-5">Pacocha, Roberts and Schiller</div>
+            <div class="text-color-dark">Adinventitias thorax nisi sursum labore cursus depereo verecundia.
+                Nam curso aperte tolero.
+                Vis sub texo vinitor tabgo.</div>
+        </div>
+        <div>
+            <div class="text-size-14 text-color-primary margin-bottom-10">
+                <span class="rioglyph rioglyph-server-stack text-size-200pct">
+                </span>
+            </div>
+            <div class="text-size-18 text-color-darker text-medium margin-bottom-5">Wunsch LLC</div>
+            <div class="text-color-dark">Cursus aspicio defessus apud confero assumenda canis coadunatio.
+                Apostolus expedita varius curo alo.
+                Ater atavus quae.</div>
+        </div>
+        <div>
+            <div class="text-size-14 text-color-primary margin-bottom-10">
+                <span class="rioglyph rioglyph-fingerprint text-size-200pct">
+                </span>
+            </div>
+            <div class="text-size-18 text-color-darker text-medium margin-bottom-5">Hartmann - Kling</div>
+            <div class="text-color-dark">Alias adficio bos tredecim turpis id.
+                Tristis suadeo dignissimos delectus tripudio tonsor.
+                Bellum agnosco ambulo umquam vindico admitto.</div>
+        </div>
+        <div>
+            <div class="text-size-14 text-color-primary margin-bottom-10">
+                <span class="rioglyph rioglyph-code-brackets text-size-200pct">
+                </span>
+            </div>
+            <div class="text-size-18 text-color-darker text-medium margin-bottom-5">VonRueden LLC</div>
+            <div class="text-color-dark">Corpus sollicito tendo vomer pecto.
+                Commodo sto assentator trucido tremo cumque articulus.
+                Allatus sumo admoneo.</div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: The sleek and grim Bacon comes with lime LED lighting for smart functionality
+
+Enhance your application with powerful add-ons!
+
+Luxurious Plastic Pants
+The sleek and grim Bacon comes with lime LED lighting for smart functionality
+
+€96.85
+Total per month
+
+Get Add-on
+
+Licensed Bamboo Salad
+Professional-grade Cheese perfect for wise training and recreational use
+
+€97.19
+Total per user / month
+
+Get Add-on
+
+Unbranded Marble Fish
+Featuring Tennessine-enhanced technology, our Shirt offers unparalleled unruly performance
+
+€57.25
+Total per month
+
+Get Add-on
+
+Soft Cotton Keyboard
+Introducing the Kyrgyz Republic-inspired Computer, blending yummy style with local craftsmanship
+
+€92.59
+Total per user / month
+
+Get Add-on
+
+Tasty Granite Hat
+Generic Towels designed with Metal for weary performance
+
+€16.49
+Total per user / month
+
+Get Add-on
+
+#### Summary
+
+Enhance your application with powerful add-ons!
+
+Luxurious Plastic Pants
+The sleek and grim Bacon comes with lime LED lighting for smart functionality
+
+€96.85
+Total per month
+
+Get Add-on
+
+Licensed Bamboo Salad
+Professional-grade Cheese perfect for wise training and recreational use
+
+€97.19
+Total per user / month
+
+Get Add-on
+
+Unbranded Marble Fish
+Featuring Tennessine-enhanced technology, our Shirt offers unparalleled unruly performance
+
+€57.25
+Total per month
+
+Get Add-on
+
+Soft Cotton Keyboard
+Introducing the Kyrgyz Republic-inspired Computer, blending yummy style with local craftsmanship
+
+€92.59
+Total per user / month
+
+Get Add-on
+
+Tasty Granite Hat
+Generic Towels designed with Metal for weary performance
+
+€16.49
+Total per user / month
+
+Get Add-on
+
+#### React (tsx)
+
+```tsx
+import { useEffect, useState } from 'react';
+import { faker } from '@faker-js/faker';
+import { FormattedNumber } from 'react-intl';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import useWindowResize from '@rio-cloud/rio-uikit/useWindowResize';
+
+const gridTemplateLargeScreen = 'auto 1fr auto auto';
+const gridTemplateSmallScreen = '1fr auto';
+
+export default () => {
+    const addons = Array.from({ length: 5 }).map(() => ({
+        id: faker.string.uuid(),
+        title: faker.commerce.productName(),
+        description: faker.commerce.productDescription(),
+        price: Number(faker.commerce.price({ min: 5, max: 99 })),
+        unit: faker.helpers.arrayElement(['Total per month', 'Total per user / month', 'Per 1000 messages / month']),
+    }));
+
+    const [gridTemplate, setGridTemplate] = useState(gridTemplateLargeScreen);
+
+    const handleResize = () => {
+        const windowWidth = window.innerWidth;
+        if (windowWidth < 600) {
+            setGridTemplate(gridTemplateSmallScreen);
+        } else {
+            setGridTemplate(gridTemplateLargeScreen);
+        }
+    };
+
+    // Handle small screens on mount
+    useEffect(() => {
+        handleResize();
+    }, []);
+
+    // Handle small screens when window resizes
+    useWindowResize(() => {
+        handleResize();
+    });
+
+    console.log({ gridTemplate });
+
+    return (
+        <div className='max-width-800 margin-auto'>
+            <h2 className='text-center text-wrap-pretty text-size-24 margin-bottom-25'>
+                Enhance your application with powerful add-ons!
+            </h2>
+
+            <div className='display-flex flex-column gap-20'>
+                {addons.map(addon => (
+                    <div
+                        key={addon.id}
+                        className='display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border'
+                        style={{
+                            gridTemplateColumns: gridTemplate,
+                        }}
+                    >
+                        <div className='align-self-start text-size-14 text-color-darker'>
+                            <span className='rioglyph rioglyph-puzzle text-size-300pct margin-top-2' />
+                        </div>
+
+                        <div className='flex-1-1'>
+                            <div className='text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word'>
+                                {addon.title}
+                            </div>
+                            <div className='text-size-14 text-color-dark'>{addon.description}</div>
+                        </div>
+
+                        <div className='width-100'>
+                            <div className='text-size-16 text-medium'>
+                                <FormattedNumber value={addon.price} style='currency' currency='EUR' />
+                            </div>
+                            <div className='text-size-12 text-color-gray'>{addon.unit}</div>
+                        </div>
+
+                        <div>
+                            <Button bsStyle='muted-filled'>Get Add-on</Button>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-800 margin-auto">
+    <h2 class="text-center text-wrap-pretty text-size-24 margin-bottom-25">Enhance your application with powerful add-ons!</h2>
+    <div class="display-flex flex-column gap-20">
+        <div class="display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border" style="grid-template-columns: auto 1fr auto auto;">
+            <div class="align-self-start text-size-14 text-color-darker">
+                <span class="rioglyph rioglyph-puzzle text-size-300pct margin-top-2">
+                </span>
+            </div>
+            <div class="flex-1-1">
+                <div class="text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word">Luxurious Plastic Pants</div>
+                <div class="text-size-14 text-color-dark">The sleek and grim Bacon comes with lime LED lighting for smart functionality</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€96.85</div>
+                <div class="text-size-12 text-color-gray">Total per month</div>
+            </div>
+            <div>
+                <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">Get Add-on</button>
+            </div>
+        </div>
+        <div class="display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border" style="grid-template-columns: auto 1fr auto auto;">
+            <div class="align-self-start text-size-14 text-color-darker">
+                <span class="rioglyph rioglyph-puzzle text-size-300pct margin-top-2">
+                </span>
+            </div>
+            <div class="flex-1-1">
+                <div class="text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word">Licensed Bamboo Salad</div>
+                <div class="text-size-14 text-color-dark">Professional-grade Cheese perfect for wise training and recreational use</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€97.19</div>
+                <div class="text-size-12 text-color-gray">Total per user / month</div>
+            </div>
+            <div>
+                <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">Get Add-on</button>
+            </div>
+        </div>
+        <div class="display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border" style="grid-template-columns: auto 1fr auto auto;">
+            <div class="align-self-start text-size-14 text-color-darker">
+                <span class="rioglyph rioglyph-puzzle text-size-300pct margin-top-2">
+                </span>
+            </div>
+            <div class="flex-1-1">
+                <div class="text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word">Unbranded Marble Fish</div>
+                <div class="text-size-14 text-color-dark">Featuring Tennessine-enhanced technology, our Shirt offers unparalleled unruly performance</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€57.25</div>
+                <div class="text-size-12 text-color-gray">Total per month</div>
+            </div>
+            <div>
+                <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">Get Add-on</button>
+            </div>
+        </div>
+        <div class="display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border" style="grid-template-columns: auto 1fr auto auto;">
+            <div class="align-self-start text-size-14 text-color-darker">
+                <span class="rioglyph rioglyph-puzzle text-size-300pct margin-top-2">
+                </span>
+            </div>
+            <div class="flex-1-1">
+                <div class="text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word">Soft Cotton Keyboard</div>
+                <div class="text-size-14 text-color-dark">Introducing the Kyrgyz Republic-inspired Computer, blending yummy style with local craftsmanship</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€92.59</div>
+                <div class="text-size-12 text-color-gray">Total per user / month</div>
+            </div>
+            <div>
+                <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">Get Add-on</button>
+            </div>
+        </div>
+        <div class="display-grid align-items-center gap-20 padding-20 bg-white rounded shadow-subtle border" style="grid-template-columns: auto 1fr auto auto;">
+            <div class="align-self-start text-size-14 text-color-darker">
+                <span class="rioglyph rioglyph-puzzle text-size-300pct margin-top-2">
+                </span>
+            </div>
+            <div class="flex-1-1">
+                <div class="text-size-16 text-medium margin-bottom-5 text-lowercase text-capitalize-first-word">Tasty Granite Hat</div>
+                <div class="text-size-14 text-color-dark">Generic Towels designed with Metal for weary performance</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€16.49</div>
+                <div class="text-size-12 text-color-gray">Total per user / month</div>
+            </div>
+            <div>
+                <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">Get Add-on</button>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Example 6
+
+Features
+
+Intelligent Silk Mouse
+Discover the lion-like agility of our Table, perfect for well-groomed users
+
+Elegant Silk Table
+The cyan Ball combines Solomon Islands aesthetics with Nitrogen-based durability
+
+Recycled Metal Cheese
+New Mouse model with 97 GB RAM, 446 GB storage, and ashamed features
+
+Licensed Steel Chicken
+Innovative Fish featuring pleased technology and Granite construction
+
+Luxurious Metal Keyboard
+Introducing the New Zealand-inspired Mouse, blending handy style with local craftsmanship
+
+Modern Aluminum Mouse
+Stylish Soap designed to make you stand out with flawless looks
+
+#### Summary
+
+Features
+
+Intelligent Silk Mouse
+Discover the lion-like agility of our Table, perfect for well-groomed users
+
+Elegant Silk Table
+The cyan Ball combines Solomon Islands aesthetics with Nitrogen-based durability
+
+Recycled Metal Cheese
+New Mouse model with 97 GB RAM, 446 GB storage, and ashamed features
+
+Licensed Steel Chicken
+Innovative Fish featuring pleased technology and Granite construction
+
+Luxurious Metal Keyboard
+Introducing the New Zealand-inspired Mouse, blending handy style with local craftsmanship
+
+Modern Aluminum Mouse
+Stylish Soap designed to make you stand out with flawless looks
+
+#### React (tsx)
+
+```tsx
+import { faker } from '@faker-js/faker';
+
+export default () => {
+    const examples = Array.from({ length: 5 }).map(() => ({
+        id: faker.string.uuid(),
+        title: faker.commerce.productName(),
+        description: faker.commerce.productDescription(),
+    }));
+
+    return (
+        <div className='max-width-600 margin-auto'>
+            <div className='lead '>
+                <div className='display-flex justify-content-between'>
+                    <div>Features</div>
+                </div>
+                <hr className='margin-top-10 border-color-light' />
+            </div>
+
+            <ul className='display-grid grid-cols-1 grid-cols-2-sm column-gap-25 row-gap-10 icon-list margin-bottom-0'>
+                {examples.map(example => (
+                    <li key={example.id} className='display-flex gap-10 '>
+                        <span className='rioglyph rioglyph-ok-sign text-color-success text-size-20' />
+                        <div>
+                            <div className='text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word'>
+                                {example.title}
+                            </div>
+                            <div>{example.description}</div>
+                        </div>
+                    </li>
+                ))}
+                <li className='display-flex gap-10'>
+                    <span className='rioglyph rioglyph rioglyph-minus-sign text-color-gray text-size-20' />
+                    <div>
+                        <div className='text-medium text-size-18 text-color-darker text-capitalize-first-word'>
+                            {faker.commerce.productName()}
+                        </div>
+                        <div>{faker.commerce.productDescription()}</div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-600 margin-auto">
+    <div class="lead ">
+        <div class="display-flex justify-content-between">
+            <div>Features</div>
+        </div>
+        <hr class="margin-top-10 border-color-light">
+    </div>
+    <ul class="display-grid grid-cols-1 grid-cols-2-sm column-gap-25 row-gap-10 icon-list margin-bottom-0">
+        <li class="display-flex gap-10 ">
+            <span class="rioglyph rioglyph-ok-sign text-color-success text-size-20">
+            </span>
+            <div>
+                <div class="text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word">Intelligent Silk Mouse</div>
+                <div>Discover the lion-like agility of our Table, perfect for well-groomed users</div>
+            </div>
+        </li>
+        <li class="display-flex gap-10 ">
+            <span class="rioglyph rioglyph-ok-sign text-color-success text-size-20">
+            </span>
+            <div>
+                <div class="text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word">Elegant Silk Table</div>
+                <div>The cyan Ball combines Solomon Islands aesthetics with Nitrogen-based durability</div>
+            </div>
+        </li>
+        <li class="display-flex gap-10 ">
+            <span class="rioglyph rioglyph-ok-sign text-color-success text-size-20">
+            </span>
+            <div>
+                <div class="text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word">Recycled Metal Cheese</div>
+                <div>New Mouse model with 97 GB RAM, 446 GB storage, and ashamed features</div>
+            </div>
+        </li>
+        <li class="display-flex gap-10 ">
+            <span class="rioglyph rioglyph-ok-sign text-color-success text-size-20">
+            </span>
+            <div>
+                <div class="text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word">Licensed Steel Chicken</div>
+                <div>Innovative Fish featuring pleased technology and Granite construction</div>
+            </div>
+        </li>
+        <li class="display-flex gap-10 ">
+            <span class="rioglyph rioglyph-ok-sign text-color-success text-size-20">
+            </span>
+            <div>
+                <div class="text-medium text-size-18 text-color-darker text-lowercase text-capitalize-first-word">Luxurious Metal Keyboard</div>
+                <div>Introducing the New Zealand-inspired Mouse, blending handy style with local craftsmanship</div>
+            </div>
+        </li>
+        <li class="display-flex gap-10">
+            <span class="rioglyph rioglyph rioglyph-minus-sign text-color-gray text-size-20">
+            </span>
+            <div>
+                <div class="text-medium text-size-18 text-color-darker text-capitalize-first-word">Modern Aluminum Mouse</div>
+                <div>Stylish Soap designed to make you stand out with flawless looks</div>
+            </div>
+        </li>
+    </ul>
+</div>
+```