# Feature cards

*Category:* Templates
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/templates/feature-cards
*Captured:* 2026-04-27T14:59:18.605Z

## Feature cards

### Example: Example 1

Lorem ipsum dolor sit amet
Advoco aestus capio omnis ratione solio adversus.
Aveho thesis modi curia viridis sit.
Theca abscido tamdiu alius conicio.
Vobis temeritas qui audentia demoror tempus.
Get started

#### React (tsx)

```tsx
import { faker } from '@faker-js/faker';

import Button from '@rio-cloud/rio-uikit/Button';
import Card from '@rio-cloud/rio-uikit/Card';
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';

export default () => (
    <div className='margin-25-md max-width-800 margin-auto'>
        <Card padding={25} className=''>
            <div className='text-size-h3 line-height-125rel text-color-darkest text-medium margin-bottom-15'>
                Lorem ipsum dolor sit amet
            </div>
            <div className='display-flex gap-25 flex-wrap justify-content-between'>
                <div className='flex-1-1 max-width-600'>{faker.lorem.lines(4)}</div>
                <ButtonToolbar className='flex-0'>
                    <Button bsStyle='primary' iconName='rioglyph-sparkles'>
                        Get started
                    </Button>
                </ButtonToolbar>
            </div>
        </Card>
    </div>
);
```

#### HTML (html)

```html
<div class="margin-25-md max-width-800 margin-auto">
    <div class="bg-white rounded border shadow-default padding-25">
        <div class="text-size-h3 line-height-125rel text-color-darkest text-medium margin-bottom-15">Lorem ipsum dolor sit amet</div>
        <div class="display-flex gap-25 flex-wrap justify-content-between">
            <div class="flex-1-1 max-width-600">Advoco aestus capio omnis ratione solio adversus.
                Aveho thesis modi curia viridis sit.
                Theca abscido tamdiu alius conicio.
                Vobis temeritas qui audentia demoror tempus.</div>
            <div class="flex-0 btn-toolbar">
                <button type="button" class="btn btn-primary btn-component" tabindex="0">
                    <span class="rioglyph rioglyph-sparkles">
                    </span>Get started</button>
            </div>
        </div>
    </div>
</div>
```

### Example: Example 2

Lorem ipsum
Lorem ipsum dolor sit amet
Caput et vulgo apostolus.
Tabernus adflicto tibi quis arguo cui soluta cognomen ducimus viscus.
Vapulus terminatio desipio victoria atqui defetiscor debilito voluntarius.
Quidem acceptus advenio tres volubilis ulciscor.
Read more

#### React (tsx)

```tsx
import { faker } from '@faker-js/faker';

import Button from '@rio-cloud/rio-uikit/Button';
import Card from '@rio-cloud/rio-uikit/Card';

export default () => (
    <div className='margin-25-md max-width-800 margin-auto'>
        <Card padding={25}>
            <div className='text-color-primary text-medium'>Lorem ipsum</div>
            <div className='text-size-h3 line-height-125rel text-color-darkest text-medium'>
                Lorem ipsum dolor sit amet
            </div>
            <p className='margin-bottom-25'>{faker.lorem.lines(4)}</p>
            <div>
                <Button bsStyle='primary' iconName='rioglyph-arrow-right' iconRight>
                    Read more
                </Button>
            </div>
        </Card>
    </div>
);
```

#### HTML (html)

```html
<div class="margin-25-md max-width-800 margin-auto">
    <div class="bg-white rounded border shadow-default padding-25">
        <div class="text-color-primary text-medium">Lorem ipsum</div>
        <div class="text-size-h3 line-height-125rel text-color-darkest text-medium">Lorem ipsum dolor sit amet</div>
        <p class="margin-bottom-25">Caput et vulgo apostolus.
            Tabernus adflicto tibi quis arguo cui soluta cognomen ducimus viscus.
            Vapulus terminatio desipio victoria atqui defetiscor debilito voluntarius.
            Quidem acceptus advenio tres volubilis ulciscor.</p>
        <div>
            <button type="button" class="btn btn-primary btn-icon-right btn-component" tabindex="0">
                <span class="rioglyph rioglyph-arrow-right">
                </span>Read more</button>
        </div>
    </div>
</div>
```

### Example: Example 3

Lorem ipsum dolor sit amet
Collum dapifer adipiscor adamo compono comes utrum ratione.
Vilicus vesco usque iste asporto absque eum tergum appono cohors.
Bis architecto ventito turbo tredecim unde sit temeritas vaco amo.
Conculco ipsum hic.
Aurum caritas pecto vivo carpo taceo.
Learn more about our delivery features

#### React (tsx)

```tsx
import { faker } from '@faker-js/faker';

import Button from '@rio-cloud/rio-uikit/Button';
import Card from '@rio-cloud/rio-uikit/Card';

export default () => (
    <div className='margin-25-md max-width-800 margin-auto'>
        <Card padding={25}>
            <div className='text-size-h4 line-height-125rel text-color-darkest text-medium'>
                Lorem ipsum dolor sit amet
            </div>
            <p className='margin-bottom-15'>{faker.lorem.lines(5)}</p>
            <div>
                <Button variant='link-inline' className='text-medium' iconName='rioglyph-arrow-right' iconRight>
                    Learn more about our delivery features
                </Button>
            </div>
        </Card>
    </div>
);
```

#### HTML (html)

```html
<div class="margin-25-md max-width-800 margin-auto">
    <div class="bg-white rounded border shadow-default padding-25">
        <div class="text-size-h4 line-height-125rel text-color-darkest text-medium">Lorem ipsum dolor sit amet</div>
        <p class="margin-bottom-15">Collum dapifer adipiscor adamo compono comes utrum ratione.
            Vilicus vesco usque iste asporto absque eum tergum appono cohors.
            Bis architecto ventito turbo tredecim unde sit temeritas vaco amo.
            Conculco ipsum hic.
            Aurum caritas pecto vivo carpo taceo.</p>
        <div>
            <button type="button" class="btn btn-default btn-link btn-link-inline btn-icon-right btn-component text-medium" tabindex="0">
                <span class="rioglyph rioglyph-arrow-right">
                </span>Learn more about our delivery features</button>
        </div>
    </div>
</div>
```

### Example: Example 4

Lorem ipsum dolor sit amet
Cupiditas ipsa utrimque absens clamo quia credo suasoria.
Denuncio autem contego eum cerno administratio baiulus sapiente sperno.
Uter quasi despecto derelinquo.
Nisi concedo quasi conitor auxilium delicate theca centum.
Curso comminor agnosco.

View details Get started

#### React (tsx)

```tsx
import { faker } from '@faker-js/faker';

import Button from '@rio-cloud/rio-uikit/Button';
import Card from '@rio-cloud/rio-uikit/Card';
import SvgImage from '@rio-cloud/rio-uikit/SvgImage';
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';

export default () => (
    <div className='margin-25-md max-width-800 margin-auto'>
        <Card className='padding-x-25 padding-y-50 display-flex flex-column flex-row-sm gap-25'>
            <SvgImage name='abstract-product/product' size={100} className='flex-0' />
            <div className='display-flex flex-wrap gap-10'>
                <div className='flex-1-1'>
                    <div className='text-size-h4 line-height-125rel text-color-darkest text-medium'>
                        Lorem ipsum dolor sit amet
                    </div>
                    <p className='margin-bottom-15'>{faker.lorem.lines(5)}</p>
                </div>
                <ButtonToolbar className='flex-1-1'>
                    <Button bsStyle='default'>View details</Button>
                    <Button bsStyle='primary' iconName='rioglyph-sparkles'>
                        Get started
                    </Button>
                </ButtonToolbar>
            </div>
        </Card>
    </div>
);
```

#### HTML (html)

```html
<div class="margin-25-md max-width-800 margin-auto">
    <div class="bg-white rounded border shadow-default padding-15 padding-x-25 padding-y-50 display-flex flex-column flex-row-sm gap-25">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100" height="100" viewBox="0 0 250 250" version="1.1" xml:space="preserve" class="flex-0" style="fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-miterlimit: 2;">
            <g id="product" transform="matrix(3.65079,0,0,3.65085,5.02397,-234.3)">
                <g transform="matrix(1.14763,0,0,1.14763,-0.201218,-9.87871)">
                    <path d="M49.363,90.916C49.363,104.17 38.618,114.915 25.363,114.915C12.108,114.915 1.363,104.17 1.363,90.916C1.363,77.661 12.108,66.916 25.363,66.916C38.618,66.916 49.363,77.661 49.363,90.916Z" style="fill: var(--gray-lighter); fill-rule: nonzero;">
                    </path>
                </g>
                <path d="M18.363,104.915L18.363,120.915L37.363,129.915L56.363,120.915L56.363,104.915L18.363,104.915Z" style="fill: var(--color-highlight-lighter); fill-rule: nonzero;">
                </path>
                <path d="M56.363,107.915L56.363,120.915L37.363,129.915L18.363,120.915L18.363,107.915" style="fill: none; stroke: var(--brand-info); stroke-width: 2.3px;">
                </path>
                <path d="M37.363,105.915L37.363,129.915" style="fill: none; stroke: var(--brand-info); stroke-width: 2.3px;">
                </path>
                <path d="M10.363,103.915L29.363,112.915L37.363,105.915L37.363,104.915L18.363,95.916L10.363,102.915L10.363,103.915Z" style="fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;">
                </path>
                <path d="M10.363,103.915L29.363,112.915L37.363,105.915L37.363,104.915L18.363,95.916L10.363,102.915L10.363,103.915Z" style="fill: none; stroke: var(--brand-info); stroke-width: 2.3px;">
                </path>
                <path d="M64.363,103.915L45.363,112.915L37.363,105.915L37.363,104.915L56.363,95.916L64.363,102.915L64.363,103.915Z" style="fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;">
                </path>
                <path d="M64.363,103.915L45.363,112.915L37.363,105.915L37.363,104.915L56.363,95.916L64.363,102.915L64.363,103.915Z" style="fill: none; stroke: var(--brand-info); stroke-width: 2.3px;">
                </path>
                <path d="M10.363,87.916L29.363,78.916L37.363,85.916L37.363,86.916L18.363,95.916L10.363,88.916L10.363,87.916Z" style="fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;">
                </path>
                <path d="M10.363,87.916L29.363,78.916L37.363,85.916L37.363,86.916L18.363,95.916L10.363,88.916L10.363,87.916Z" style="fill: none; stroke: var(--brand-info); stroke-width: 2.3px;">
                </path>
                <path d="M64.363,87.916L45.363,78.916L37.363,85.916L37.363,86.916L56.363,95.916L64.363,88.916L64.363,87.916Z" style="fill: var(--color-white); fill-rule: nonzero; stroke: var(--brand-info); stroke-width: 2.3px; stroke-linecap: butt; stroke-linejoin: round;">
                </path>
                <path d="M64.363,87.916L45.363,78.916L37.363,85.916L37.363,86.916L56.363,95.916L64.363,88.916L64.363,87.916Z" style="fill: none; stroke: var(--brand-info); stroke-width: 2.3px;">
                </path>
                <path d="M37.363,73.916L35.363,75.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M42.363,68.916L40.363,70.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M40.363,73.916L42.363,75.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M35.363,68.916L37.363,70.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M20.363,72.916L20.363,74.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M20.363,76.916L20.363,78.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M19.363,75.916L17.363,75.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M23.363,75.916L21.363,75.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M10.363,111.915L10.363,113.915" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M10.363,115.915L10.363,117.915" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M9.363,114.915L7.363,114.915" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M13.363,114.915L11.363,114.915" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M51.363,66.916L51.363,68.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M51.363,70.916L51.363,72.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M50.363,69.916L48.363,69.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
                <path d="M54.363,69.916L52.363,69.916" style="fill: none; stroke: var(--gray); stroke-width: 2.3px; stroke-linecap: butt;">
                </path>
            </g>
        </svg>
        <div class="display-flex flex-wrap gap-10">
            <div class="flex-1-1">
                <div class="text-size-h4 line-height-125rel text-color-darkest text-medium">Lorem ipsum dolor sit amet</div>
                <p class="margin-bottom-15">Cupiditas ipsa utrimque absens clamo quia credo suasoria.
                    Denuncio autem contego eum cerno administratio baiulus sapiente sperno.
                    Uter quasi despecto derelinquo.
                    Nisi concedo quasi conitor auxilium delicate theca centum.
                    Curso comminor agnosco.</p>
            </div>
            <div class="flex-1-1 btn-toolbar">
                <button type="button" class="btn btn-default btn-component" tabindex="0">View details</button>
                <button type="button" class="btn btn-primary btn-component" tabindex="0">
                    <span class="rioglyph rioglyph-sparkles">
                    </span>Get started</button>
            </div>
        </div>
    </div>
</div>
```

### Example: Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.

Customize
Import your own data

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Read more

Use on mobile
Get the app

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Download now

Tips
Discover new features

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Read more

#### React (tsx)

```tsx
import Button from '@rio-cloud/rio-uikit/Button';
import Card from '@rio-cloud/rio-uikit/Card';

export default () => (
    <div className='margin-25-md margin-auto'>
        <div className='display-grid grid-cols-1 grid-cols-2-sm grid-cols-3-md grid-rowspan-3 gap-25'>
            <Card
                className='display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0'
                padding={25}
                shadow='smooth'
            >
                <div className='text-center text-color-darker margin-top-15'>
                    <div className='text-size-16'>Customize</div>
                    <div className='text-size-12'>
                        <div className='text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium'>
                            Import your own data
                        </div>
                    </div>
                </div>
                <div className='text-size-20 text-center padding-15'>
                    <span className='rioglyph rioglyph-stats text-size-300pct' />
                </div>
                <div>
                    <p className='margin-bottom-20 text-color-dark'>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
                        commodo.
                    </p>
                    <Button bsStyle='primary' bsSize='lg' block>
                        Read more
                    </Button>
                </div>
            </Card>

            <Card
                className='display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0'
                padding={25}
                shadow='smooth'
            >
                <div className='text-center text-color-darker margin-top-15'>
                    <div className='text-size-16'>Use on mobile</div>
                    <div className='text-size-12'>
                        <div className='text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium'>
                            Get the app
                        </div>
                    </div>
                </div>
                <div className='text-size-20 text-center padding-15'>
                    <span className='rioglyph rioglyph-phone text-size-300pct' />
                </div>
                <div>
                    <p className='margin-bottom-20 text-color-dark'>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
                        commodo.
                    </p>
                    <Button bsStyle='primary' bsSize='lg' block>
                        Download now
                    </Button>
                </div>
            </Card>

            <Card
                className='display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0'
                padding={25}
                shadow='smooth'
            >
                <div className='text-center text-color-darker margin-top-15'>
                    <div className='text-size-16'>Tips</div>
                    <div className='text-size-12'>
                        <div className='text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium'>
                            Discover new features
                        </div>
                    </div>
                </div>
                <div className='text-size-20 text-center padding-15'>
                    <span className='rioglyph rioglyph-cost-efficency text-size-300pct' />
                </div>
                <div>
                    <p className='margin-bottom-20 text-color-dark'>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
                        commodo.
                    </p>
                    <Button bsStyle='primary' bsSize='lg' block>
                        Read more
                    </Button>
                </div>
            </Card>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="margin-25-md margin-auto">
    <div class="display-grid grid-cols-1 grid-cols-2-sm grid-cols-3-md grid-rowspan-3 gap-25">
        <div class="bg-white rounded border shadow-smooth padding-25 display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0">
            <div class="text-center text-color-darker margin-top-15">
                <div class="text-size-16">Customize</div>
                <div class="text-size-12">
                    <div class="text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium">Import your own data</div>
                </div>
            </div>
            <div class="text-size-20 text-center padding-15">
                <span class="rioglyph rioglyph-stats text-size-300pct">
                </span>
            </div>
            <div>
                <p class="margin-bottom-20 text-color-dark">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
                <button type="button" class="btn btn-primary btn-lg btn-block btn-component" tabindex="0">Read more</button>
            </div>
        </div>
        <div class="bg-white rounded border shadow-smooth padding-25 display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0">
            <div class="text-center text-color-darker margin-top-15">
                <div class="text-size-16">Use on mobile</div>
                <div class="text-size-12">
                    <div class="text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium">Get the app</div>
                </div>
            </div>
            <div class="text-size-20 text-center padding-15">
                <span class="rioglyph rioglyph-phone text-size-300pct">
                </span>
            </div>
            <div>
                <p class="margin-bottom-20 text-color-dark">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
                <button type="button" class="btn btn-primary btn-lg btn-block btn-component" tabindex="0">Download now</button>
            </div>
        </div>
        <div class="bg-white rounded border shadow-smooth padding-25 display-grid grid-cols-subgrid grid-rowspan-3 grid-rows-subgrid row-gap-0">
            <div class="text-center text-color-darker margin-top-15">
                <div class="text-size-16">Tips</div>
                <div class="text-size-12">
                    <div class="text-wrap-pretty line-height-125rel text-size-200pct padding-bottom-10 text-capitalize text-medium">Discover new features</div>
                </div>
            </div>
            <div class="text-size-20 text-center padding-15">
                <span class="rioglyph rioglyph-cost-efficency text-size-300pct">
                </span>
            </div>
            <div>
                <p class="margin-bottom-20 text-color-dark">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
                <button type="button" class="btn btn-primary btn-lg btn-block btn-component" tabindex="0">Read more</button>
            </div>
        </div>
    </div>
</div>
```