# 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>
```