@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

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-12T12:39:30.255Z
+
+## List blocks
+
+### Example: Venia impedit arbustum cicuta nisi comes.
+
+Lorem ipsum dolor
+Venia impedit arbustum cicuta nisi comes.
+
+Rohan and Sons
+Benevolentia voluntarius vos timidus.
+
+Connect
+
+Medhurst, Morar and Jacobi
+Sumo tonsor acies verecundia sto valeo.
+Confido aspernatur coniecto.
+
+Connect
+
+Stark, Quitzon and Reichel
+Facere denique neque adsum adfectus crastinus.
+
+Connect
+
+#### Summary
+
+Lorem ipsum dolor
+Venia impedit arbustum cicuta nisi comes.
+
+Rohan and Sons
+Benevolentia voluntarius vos timidus.
+
+Connect
+
+Medhurst, Morar and Jacobi
+Sumo tonsor acies verecundia sto valeo.
+Confido aspernatur coniecto.
+
+Connect
+
+Stark, Quitzon and Reichel
+Facere denique neque adsum adfectus crastinus.
+
+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">Venia impedit arbustum cicuta nisi comes.</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">Rohan and Sons</p>
+                        <p class="text-color-dark margin-0">Benevolentia voluntarius vos timidus.</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">Medhurst, Morar and Jacobi</p>
+                        <p class="text-color-dark margin-0">Sumo tonsor acies verecundia sto valeo.
+                            Confido aspernatur coniecto.</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">Stark, Quitzon and Reichel</p>
+                        <p class="text-color-dark margin-0">Facere denique neque adsum adfectus crastinus.</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: Cultellus textilis tonsor temporibus.
+
+Lorem ipsum dolor
+Cultellus textilis tonsor temporibus.
+
+Murphy, Macejkovic and Bernier
+Turba coruscus cohors tertius occaecati.
+
+Leannon, Herman and Rosenbaum
+Textor voro avaritia brevis tamquam.
+Crinis tribuo thermae omnis una aetas tonsor.
+
+Feil, Hand and Hansen
+Deficio approbo vigilo.
+Chirographum vinculum aequus vel ceno utpote cervus concedo.
+
+#### Summary
+
+Lorem ipsum dolor
+Cultellus textilis tonsor temporibus.
+
+Murphy, Macejkovic and Bernier
+Turba coruscus cohors tertius occaecati.
+
+Leannon, Herman and Rosenbaum
+Textor voro avaritia brevis tamquam.
+Crinis tribuo thermae omnis una aetas tonsor.
+
+Feil, Hand and Hansen
+Deficio approbo vigilo.
+Chirographum vinculum aequus vel ceno utpote cervus concedo.
+
+#### 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">Cultellus textilis tonsor temporibus.</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">Murphy, Macejkovic and Bernier</div>
+                    <div class="text-color-dark">Turba coruscus cohors tertius occaecati.</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">Leannon, Herman and Rosenbaum</div>
+                    <div class="text-color-dark">Textor voro avaritia brevis tamquam.
+                        Crinis tribuo thermae omnis una aetas tonsor.</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">Feil, Hand and Hansen</div>
+                    <div class="text-color-dark">Deficio approbo vigilo.
+                        Chirographum vinculum aequus vel ceno utpote cervus concedo.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Abutor tandem sperno color via bonus. Patria undique altus eum vapulus arto cedo. Auditor atrox ara repellendus atrocitas.
+
+Lorem ipsum dolor sit amet
+Comis arto advenio defluo deleniti voluptas cura consuasor umbra.
+Ager urbanus venia venustas astrum porro terreo defungo cruentus congregatio.
+
+Borer - Mraz
+Abutor tandem sperno color via bonus.
+Patria undique altus eum vapulus arto cedo.
+Auditor atrox ara repellendus atrocitas.
+
+Parisian, Morissette and Sanford
+Sopor animus vis curo denuo timor aduro certus.
+Admiratio absque civis stillicidium necessitatibus tantum capto.
+Acquiro tollo pariatur.
+
+Becker Group
+Conspergo tonsor error creta beneficium.
+Cupiditate quisquam tumultus.
+Conforto trucido vestrum coepi.
+
+Lakin LLC
+Quos defleo conforto adopto crur.
+Solio avarus aequus.
+Sapiente patruus aeger.
+
+#### Summary
+
+Lorem ipsum dolor sit amet
+Comis arto advenio defluo deleniti voluptas cura consuasor umbra.
+Ager urbanus venia venustas astrum porro terreo defungo cruentus congregatio.
+
+Borer - Mraz
+Abutor tandem sperno color via bonus.
+Patria undique altus eum vapulus arto cedo.
+Auditor atrox ara repellendus atrocitas.
+
+Parisian, Morissette and Sanford
+Sopor animus vis curo denuo timor aduro certus.
+Admiratio absque civis stillicidium necessitatibus tantum capto.
+Acquiro tollo pariatur.
+
+Becker Group
+Conspergo tonsor error creta beneficium.
+Cupiditate quisquam tumultus.
+Conforto trucido vestrum coepi.
+
+Lakin LLC
+Quos defleo conforto adopto crur.
+Solio avarus aequus.
+Sapiente patruus aeger.
+
+#### 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>Comis arto advenio defluo deleniti voluptas cura consuasor umbra.
+            Ager urbanus venia venustas astrum porro terreo defungo cruentus congregatio.</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">Borer - Mraz</div>
+            <div class="text-color-dark">Abutor tandem sperno color via bonus.
+                Patria undique altus eum vapulus arto cedo.
+                Auditor atrox ara repellendus atrocitas.</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">Parisian, Morissette and Sanford</div>
+            <div class="text-color-dark">Sopor animus vis curo denuo timor aduro certus.
+                Admiratio absque civis stillicidium necessitatibus tantum capto.
+                Acquiro tollo pariatur.</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">Becker Group</div>
+            <div class="text-color-dark">Conspergo tonsor error creta beneficium.
+                Cupiditate quisquam tumultus.
+                Conforto trucido vestrum coepi.</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">Lakin LLC</div>
+            <div class="text-color-dark">Quos defleo conforto adopto crur.
+                Solio avarus aequus.
+                Sapiente patruus aeger.</div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Professional-grade Towels perfect for altruistic training and recreational use
+
+Enhance your application with powerful add-ons!
+
+Tasty Bronze Fish
+Professional-grade Towels perfect for altruistic training and recreational use
+
+€38.79
+Total per month
+
+Get Add-on
+
+Sleek Metal Sausages
+Introducing the Lithuania-inspired Bike, blending long style with local craftsmanship
+
+€49.69
+Total per month
+
+Get Add-on
+
+Handcrafted Silk Fish
+Oriental Salad designed with Aluminum for sturdy performance
+
+€57.05
+Per 1000 messages / month
+
+Get Add-on
+
+Small Bamboo Salad
+Experience the teal brilliance of our Pants, perfect for pricey environments
+
+€45.85
+Total per month
+
+Get Add-on
+
+Luxurious Concrete Pizza
+Our delicious-inspired Ball brings a taste of luxury to your partial lifestyle
+
+€49.49
+Total per month
+
+Get Add-on
+
+#### Summary
+
+Enhance your application with powerful add-ons!
+
+Tasty Bronze Fish
+Professional-grade Towels perfect for altruistic training and recreational use
+
+€38.79
+Total per month
+
+Get Add-on
+
+Sleek Metal Sausages
+Introducing the Lithuania-inspired Bike, blending long style with local craftsmanship
+
+€49.69
+Total per month
+
+Get Add-on
+
+Handcrafted Silk Fish
+Oriental Salad designed with Aluminum for sturdy performance
+
+€57.05
+Per 1000 messages / month
+
+Get Add-on
+
+Small Bamboo Salad
+Experience the teal brilliance of our Pants, perfect for pricey environments
+
+€45.85
+Total per month
+
+Get Add-on
+
+Luxurious Concrete Pizza
+Our delicious-inspired Ball brings a taste of luxury to your partial lifestyle
+
+€49.49
+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">Tasty Bronze Fish</div>
+                <div class="text-size-14 text-color-dark">Professional-grade Towels perfect for altruistic training and recreational use</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€38.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">Sleek Metal Sausages</div>
+                <div class="text-size-14 text-color-dark">Introducing the Lithuania-inspired Bike, blending long style with local craftsmanship</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€49.69</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">Handcrafted Silk Fish</div>
+                <div class="text-size-14 text-color-dark">Oriental Salad designed with Aluminum for sturdy performance</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€57.05</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">Small Bamboo Salad</div>
+                <div class="text-size-14 text-color-dark">Experience the teal brilliance of our Pants, perfect for pricey environments</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€45.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">Luxurious Concrete Pizza</div>
+                <div class="text-size-14 text-color-dark">Our delicious-inspired Ball brings a taste of luxury to your partial lifestyle</div>
+            </div>
+            <div class="width-100">
+                <div class="text-size-16 text-medium">€49.49</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
+
+Incredible Concrete Pants
+Modern Cheese designed with Marble for stylish performance
+
+Rustic Rubber Shirt
+Introducing the Sierra Leone-inspired Pants, blending splendid style with local craftsmanship
+
+Luxurious Granite Gloves
+The Claire Bike is the latest in a series of bowed products from Hintz - Rowe
+
+Gorgeous Plastic Computer
+Fantastic Shoes designed with Bronze for worse performance
+
+Fantastic Aluminum Sausages
+The Zora Bike is the latest in a series of productive products from Feeney, Gleason and Stoltenberg
+
+Bespoke Marble Table
+The sleek and true Fish comes with cyan LED lighting for smart functionality
+
+#### Summary
+
+Features
+
+Incredible Concrete Pants
+Modern Cheese designed with Marble for stylish performance
+
+Rustic Rubber Shirt
+Introducing the Sierra Leone-inspired Pants, blending splendid style with local craftsmanship
+
+Luxurious Granite Gloves
+The Claire Bike is the latest in a series of bowed products from Hintz - Rowe
+
+Gorgeous Plastic Computer
+Fantastic Shoes designed with Bronze for worse performance
+
+Fantastic Aluminum Sausages
+The Zora Bike is the latest in a series of productive products from Feeney, Gleason and Stoltenberg
+
+Bespoke Marble Table
+The sleek and true Fish comes with cyan LED lighting for smart functionality
+
+#### 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">Incredible Concrete Pants</div>
+                <div>Modern Cheese designed with Marble for stylish performance</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">Rustic Rubber Shirt</div>
+                <div>Introducing the Sierra Leone-inspired Pants, blending splendid 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">Luxurious Granite Gloves</div>
+                <div>The Claire Bike is the latest in a series of bowed products from Hintz - Rowe</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 Plastic Computer</div>
+                <div>Fantastic Shoes designed with Bronze for worse performance</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">Fantastic Aluminum Sausages</div>
+                <div>The Zora Bike is the latest in a series of productive products from Feeney, Gleason and Stoltenberg</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">Bespoke Marble Table</div>
+                <div>The sleek and true Fish comes with cyan LED lighting for smart functionality</div>
+            </div>
+        </li>
+    </ul>
+</div>
+```