@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

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

@@ -0,0 +1,872 @@
+# List blocks
+
+*Category:* Templates
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#/templates/list-blocks
+*Captured:* 2026-04-20T12:55:44.029Z
+
+## List blocks
+
+### Example: Cotidie atque vomica fugiat coma tamisium.
+
+Lorem ipsum dolor
+Cotidie atque vomica fugiat coma tamisium.
+
+Kuhic and Sons
+Accedo cuppedia cena tonsor sollicito beatus.
+
+Connect
+
+Cummings, Metz and Keeling
+Arbustum patruus verbera caritas suffoco fugit casus inflammatio.
+Aeternus alius argumentum amplus valde vere utroque recusandae custodia.
+
+Connect
+
+Glover LLC
+Solitudo depulso vallum ambulo statua thema compello solitudo caries ducimus.
+
+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">Cotidie atque vomica fugiat coma tamisium.</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">Kuhic and Sons</p>
+                        <p class="text-color-dark margin-0">Accedo cuppedia cena tonsor sollicito beatus.</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">Cummings, Metz and Keeling</p>
+                        <p class="text-color-dark margin-0">Arbustum patruus verbera caritas suffoco fugit casus inflammatio.
+                            Aeternus alius argumentum amplus valde vere utroque recusandae custodia.</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">Glover LLC</p>
+                        <p class="text-color-dark margin-0">Solitudo depulso vallum ambulo statua thema compello solitudo caries ducimus.</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
+
+#### 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: Aequitas vallum cruentus adduco vero tristis votum arca.
+
+Lorem ipsum dolor
+Aequitas vallum cruentus adduco vero tristis votum arca.
+
+Crona and Sons
+Excepturi adulatio ulterius curia vitiosus.
+
+Jacobs - Emard
+Clam argumentum amiculum laborum dolores molestias conspergo tertius crebro.
+Ipsa tres molestiae.
+
+Runolfsdottir LLC
+Victus vito audio beatus thymum audentia aveho suggero.
+Aperte allatus ea cunctatio celo enim cur.
+
+#### 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">Aequitas vallum cruentus adduco vero tristis votum arca.</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">Crona and Sons</div>
+                    <div class="text-color-dark">Excepturi adulatio ulterius curia vitiosus.</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">Jacobs - Emard</div>
+                    <div class="text-color-dark">Clam argumentum amiculum laborum dolores molestias conspergo tertius crebro.
+                        Ipsa tres molestiae.</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">Runolfsdottir LLC</div>
+                    <div class="text-color-dark">Victus vito audio beatus thymum audentia aveho suggero.
+                        Aperte allatus ea cunctatio celo enim cur.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Aliqua contra culpo triumphus velut censura. Terebro cur arguo thymbra optio aliquid uredo taedium cursus compello. Demergo confero asper aiunt sulum tredecim ceno viduo sustineo.
+
+Lorem ipsum dolor sit amet
+Ducimus adsum pel depono.
+Vesper despecto eum vulnero vis auxilium vulpes.
+
+Witting - Muller
+Aliqua contra culpo triumphus velut censura.
+Terebro cur arguo thymbra optio aliquid uredo taedium cursus compello.
+Demergo confero asper aiunt sulum tredecim ceno viduo sustineo.
+
+Raynor Group
+Assentator xiphias blandior.
+Vilicus soluta tenetur.
+Conduco natus color adsum convoco admoneo.
+
+Kovacek Group
+Dens abeo sordeo vilis ratione.
+Adulatio valeo denuo cariosus acies toties.
+Contigo ex quis tribuo comes correptius subito damno aperiam strenuus.
+
+Mertz, Hane and Daniel
+Aegrotatio amiculum adeo admoneo callide architecto bibo animus tolero calcar.
+Alo aestus terminatio sequi claro videlicet celer sapiente brevis vicissitudo.
+Angulus ipsa curatio.
+
+#### 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>Ducimus adsum pel depono.
+            Vesper despecto eum vulnero vis auxilium vulpes.</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">Witting - Muller</div>
+            <div class="text-color-dark">Aliqua contra culpo triumphus velut censura.
+                Terebro cur arguo thymbra optio aliquid uredo taedium cursus compello.
+                Demergo confero asper aiunt sulum tredecim ceno viduo sustineo.</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">Raynor Group</div>
+            <div class="text-color-dark">Assentator xiphias blandior.
+                Vilicus soluta tenetur.
+                Conduco natus color adsum convoco admoneo.</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">Kovacek Group</div>
+            <div class="text-color-dark">Dens abeo sordeo vilis ratione.
+                Adulatio valeo denuo cariosus acies toties.
+                Contigo ex quis tribuo comes correptius subito damno aperiam strenuus.</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">Mertz, Hane and Daniel</div>
+            <div class="text-color-dark">Aegrotatio amiculum adeo admoneo callide architecto bibo animus tolero calcar.
+                Alo aestus terminatio sequi claro videlicet celer sapiente brevis vicissitudo.
+                Angulus ipsa curatio.</div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Introducing the Uganda-inspired Ball, blending funny style with local craftsmanship
+
+Enhance your application with powerful add-ons!
+
+Soft Marble Keyboard
+Introducing the Uganda-inspired Ball, blending funny style with local craftsmanship
+
+€76.09
+Total per month
+
+Get Add-on
+
+Intelligent Steel Mouse
+Featuring Antimony-enhanced technology, our Bike offers unparalleled rich performance
+
+€84.28
+Per 1000 messages / month
+
+Get Add-on
+
+Frozen Silk Mouse
+Ergonomic Fish made with Bronze for all-day clumsy support
+
+€16.09
+Total per user / month
+
+Get Add-on
+
+Fantastic Marble Salad
+The black Pants combines Argentina aesthetics with Argon-based durability
+
+€52.25
+Per 1000 messages / month
+
+Get Add-on
+
+Soft Granite Pizza
+Savor the crispy essence in our Bacon, designed for both culinary adventures
+
+€41.89
+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">Soft Marble Keyboard</div>
+                <div class="text-size-14 text-color-dark">Introducing the Uganda-inspired Ball, blending funny style with local craftsmanship</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€76.09</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">Intelligent Steel Mouse</div>
+                <div class="text-size-14 text-color-dark">Featuring Antimony-enhanced technology, our Bike offers unparalleled rich performance</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€84.28</div>
+                <div class="text-size-12 text-color-gray">Per 1000 messages / 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">Frozen Silk Mouse</div>
+                <div class="text-size-14 text-color-dark">Ergonomic Fish made with Bronze for all-day clumsy support</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€16.09</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">Fantastic Marble Salad</div>
+                <div class="text-size-14 text-color-dark">The black Pants combines Argentina aesthetics with Argon-based durability</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€52.25</div>
+                <div class="text-size-12 text-color-gray">Per 1000 messages / 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 Granite Pizza</div>
+                <div class="text-size-14 text-color-dark">Savor the crispy essence in our Bacon, designed for both culinary adventures</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€41.89</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
+
+Awesome Gold Table
+Ergonomic Salad made with Steel for all-day natural support
+
+Refined Bronze Salad
+The sleek and winged Towels comes with ivory LED lighting for smart functionality
+
+Ergonomic Gold Bacon
+Introducing the United States Minor Outlying Islands-inspired Chicken, blending unlucky style with local craftsmanship
+
+Incredible Gold Computer
+The sleek and afraid Bike comes with magenta LED lighting for smart functionality
+
+Incredible Bronze Soap
+New orange Salad with ergonomic design for downright comfort
+
+Electronic Aluminum Hat
+Discover the penguin-like agility of our Sausages, perfect for homely users
+
+#### 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-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">Awesome Gold Table</div>
+                <div>Ergonomic Salad made with Steel for all-day natural support</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">Refined Bronze Salad</div>
+                <div>The sleek and winged Towels comes with ivory LED lighting for smart functionality</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">Ergonomic Gold Bacon</div>
+                <div>Introducing the United States Minor Outlying Islands-inspired Chicken, blending unlucky style with local craftsmanship</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">Incredible Gold Computer</div>
+                <div>The sleek and afraid Bike comes with magenta LED lighting for smart functionality</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">Incredible Bronze Soap</div>
+                <div>New orange Salad with ergonomic design for downright comfort</div>
+            </div>
+        </li>
+        <li class="display-flex gap-10">
+            <span class="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">Electronic Aluminum Hat</div>
+                <div>Discover the penguin-like agility of our Sausages, perfect for homely users</div>
+            </div>
+        </li>
+    </ul>
+</div>
+```