@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

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-27T14:59:24.249Z
+
+## List blocks
+
+### Example: Talis acquiro vomica cupiditate temptatio suspendo.
+
+Lorem ipsum dolor
+Talis acquiro vomica cupiditate temptatio suspendo.
+
+Turner, Reichert and Howe
+Crinis vicinus iusto.
+
+Connect
+
+Shields - Roob
+Cauda iusto thema correptius defetiscor creptio testimonium compono inflammatio crur.
+Absque adipisci adeptio voluptatibus veritatis corpus varius amaritudo cunctatio vomito.
+
+Connect
+
+Daniel-Fadel Inc
+Arbitro cupio cerno necessitatibus contabesco demo eos totidem illum baiulus.
+
+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">Talis acquiro vomica cupiditate temptatio suspendo.</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">Turner, Reichert and Howe</p>
+                        <p class="text-color-dark margin-0">Crinis vicinus iusto.</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">Shields - Roob</p>
+                        <p class="text-color-dark margin-0">Cauda iusto thema correptius defetiscor creptio testimonium compono inflammatio crur.
+                            Absque adipisci adeptio voluptatibus veritatis corpus varius amaritudo cunctatio vomito.</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">Daniel-Fadel Inc</p>
+                        <p class="text-color-dark margin-0">Arbitro cupio cerno necessitatibus contabesco demo eos totidem illum baiulus.</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: Sint annus desidero peccatus.
+
+Lorem ipsum dolor
+Sint annus desidero peccatus.
+
+Russel - Waelchi
+Apud vae aeger summa adopto demergo porro tutis bestia caries.
+
+Stiedemann LLC
+Summa delibero sono uredo accusantium.
+Spero brevis vaco velociter cogito censura stella cicuta.
+
+Goyette, Halvorson and Jerde
+Acquiro comparo amplitudo reprehenderit capitulus ademptio.
+Molestiae qui denique conor fugiat accusantium vigilo ambulo.
+
+#### 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">Sint annus desidero peccatus.</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">Russel - Waelchi</div>
+                    <div class="text-color-dark">Apud vae aeger summa adopto demergo porro tutis bestia caries.</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">Stiedemann LLC</div>
+                    <div class="text-color-dark">Summa delibero sono uredo accusantium.
+                        Spero brevis vaco velociter cogito censura stella cicuta.</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">Goyette, Halvorson and Jerde</div>
+                    <div class="text-color-dark">Acquiro comparo amplitudo reprehenderit capitulus ademptio.
+                        Molestiae qui denique conor fugiat accusantium vigilo ambulo.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Cunctatio cogito adnuo inventore utrimque. Cedo ambitus arbustum cornu tergiversatio denuo traho apud vulgo. Depereo cohaero arx ducimus cupiditas aspicio antea.
+
+Lorem ipsum dolor sit amet
+Subseco dicta corroboro concedo.
+Pauper delinquo administratio abbas vacuus.
+
+Auer - Hodkiewicz
+Cunctatio cogito adnuo inventore utrimque.
+Cedo ambitus arbustum cornu tergiversatio denuo traho apud vulgo.
+Depereo cohaero arx ducimus cupiditas aspicio antea.
+
+Cremin, Schroeder and Yundt
+Benigne thesaurus venia articulus dolor summa quia deserunt dicta in.
+Denego denuncio ocer stella.
+Alter absorbeo in vicinus verbum sodalitas bonus vilicus unde cervus.
+
+Wolf, Klein and Welch
+Curvo clamo thorax appono aurum venia aiunt tardus vaco complectus.
+Assumenda stillicidium volva solium.
+Uter aqua correptius centum catena eveniet vorax.
+
+Kihn and Sons
+Charisma confido supra.
+Congregatio aranea supra creber ater censura sustineo inflammatio.
+Urbanus correptius in rerum velit saepe ascisco alter.
+
+#### 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>Subseco dicta corroboro concedo.
+            Pauper delinquo administratio abbas vacuus.</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">Auer - Hodkiewicz</div>
+            <div class="text-color-dark">Cunctatio cogito adnuo inventore utrimque.
+                Cedo ambitus arbustum cornu tergiversatio denuo traho apud vulgo.
+                Depereo cohaero arx ducimus cupiditas aspicio antea.</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">Cremin, Schroeder and Yundt</div>
+            <div class="text-color-dark">Benigne thesaurus venia articulus dolor summa quia deserunt dicta in.
+                Denego denuncio ocer stella.
+                Alter absorbeo in vicinus verbum sodalitas bonus vilicus unde cervus.</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">Wolf, Klein and Welch</div>
+            <div class="text-color-dark">Curvo clamo thorax appono aurum venia aiunt tardus vaco complectus.
+                Assumenda stillicidium volva solium.
+                Uter aqua correptius centum catena eveniet vorax.</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">Kihn and Sons</div>
+            <div class="text-color-dark">Charisma confido supra.
+                Congregatio aranea supra creber ater censura sustineo inflammatio.
+                Urbanus correptius in rerum velit saepe ascisco alter.</div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: The Expanded global system engine Mouse offers reliable performance and rough design
+
+Enhance your application with powerful add-ons!
+
+Refined Aluminum Table
+The Expanded global system engine Mouse offers reliable performance and rough design
+
+€43.63
+Total per month
+
+Get Add-on
+
+Luxurious Bronze Salad
+Innovative Chair featuring portly technology and Ceramic construction
+
+€51.79
+Total per month
+
+Get Add-on
+
+Electronic Silk Bike
+Our giraffe-friendly Salad ensures outlying comfort for your pets
+
+€87.19
+Total per user / month
+
+Get Add-on
+
+Electronic Silk Mouse
+Discover the fox-like agility of our Shoes, perfect for adolescent users
+
+€58.29
+Total per month
+
+Get Add-on
+
+Fantastic Steel Soap
+The Business-focused attitude-oriented array Computer offers reliable performance and bouncy design
+
+€55.29
+Total per 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">Refined Aluminum Table</div>
+                <div class="text-size-14 text-color-dark">The Expanded global system engine Mouse offers reliable performance and rough design</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€43.63</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">Luxurious Bronze Salad</div>
+                <div class="text-size-14 text-color-dark">Innovative Chair featuring portly technology and Ceramic construction</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€51.79</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">Electronic Silk Bike</div>
+                <div class="text-size-14 text-color-dark">Our giraffe-friendly Salad ensures outlying comfort for your pets</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€87.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">Electronic Silk Mouse</div>
+                <div class="text-size-14 text-color-dark">Discover the fox-like agility of our Shoes, perfect for adolescent users</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€58.29</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">Fantastic Steel Soap</div>
+                <div class="text-size-14 text-color-dark">The Business-focused attitude-oriented array Computer offers reliable performance and bouncy design</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€55.29</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>
+</div>
+```
+
+### Example: Example 6
+
+Features
+
+Tasty Rubber Hat
+Our koala-friendly Bacon ensures decisive comfort for your pets
+
+Incredible Bronze Pizza
+Savor the sweet essence in our Cheese, designed for late culinary adventures
+
+Small Marble Bacon
+Experience the turquoise brilliance of our Mouse, perfect for celebrated environments
+
+Gorgeous Cotton Towels
+Kertzmann and Sons's most advanced Salad technology increases angelic capabilities
+
+Handcrafted Wooden Bacon
+Experience the tan brilliance of our Hat, perfect for infinite environments
+
+Gorgeous Silk Salad
+The orange Towels combines Lithuania aesthetics with Rubidium-based durability
+
+#### 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">Tasty Rubber Hat</div>
+                <div>Our koala-friendly Bacon ensures decisive comfort for your pets</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 Pizza</div>
+                <div>Savor the sweet essence in our Cheese, designed for late culinary adventures</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">Small Marble Bacon</div>
+                <div>Experience the turquoise brilliance of our Mouse, perfect for celebrated environments</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">Gorgeous Cotton Towels</div>
+                <div>Kertzmann and Sons's most advanced Salad technology increases angelic capabilities</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">Handcrafted Wooden Bacon</div>
+                <div>Experience the tan brilliance of our Hat, perfect for infinite environments</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">Gorgeous Silk Salad</div>
+                <div>The orange Towels combines Lithuania aesthetics with Rubidium-based durability</div>
+            </div>
+        </li>
+    </ul>
+</div>
+```