@rio-cloud/uikit-mcp 1.1.7 → 1.1.9

package/dist/docs/templates/feature-cards.md

@@ -1,549 +0,0 @@
-# Feature cards
-
-*Category:* Templates
-*Section:* Content
-*Source:* https://uikit.developers.rio.cloud/#/templates/feature-cards
-*Captured:* 2026-02-23T15:49:31.437Z
-
-## Feature cards
-
-### Example: Example 1
-
-Lorem ipsum dolor sit amet
-Aro molestias suffoco templum.
-Ullus ad tolero vorax congregatio constans acidus sub.
-Sumptus clam vix ipsam placeat explicabo ancilla.
-Caute compello ullam abduco compono cariosus alter dapifer deporto umquam.
-Get started
-
-#### Summary
-
-Lorem ipsum dolor sit amet
-Aro molestias suffoco templum.
-Ullus ad tolero vorax congregatio constans acidus sub.
-Sumptus clam vix ipsam placeat explicabo ancilla.
-Caute compello ullam abduco compono cariosus alter dapifer deporto umquam.
-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 () => {
-    return (
-        <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">Aro molestias suffoco templum.
-                Ullus ad tolero vorax congregatio constans acidus sub.
-                Sumptus clam vix ipsam placeat explicabo ancilla.
-                Caute compello ullam abduco compono cariosus alter dapifer deporto umquam.</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
-Demulceo odit et deinde.
-Adsidue praesentium acies aqua asper neque caste cimentarius bonus confido.
-Desipio corpus torqueo vado suggero cornu creptio adulescens curriculum agnitio.
-Compello beneficium cogo tandem tabernus dignissimos curtus dedecor suppellex alter.
-Read more
-
-#### Summary
-
-Lorem ipsum
-Lorem ipsum dolor sit amet
-Demulceo odit et deinde.
-Adsidue praesentium acies aqua asper neque caste cimentarius bonus confido.
-Desipio corpus torqueo vado suggero cornu creptio adulescens curriculum agnitio.
-Compello beneficium cogo tandem tabernus dignissimos curtus dedecor suppellex alter.
-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 () => {
-    return (
-        <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">Demulceo odit et deinde.
-            Adsidue praesentium acies aqua asper neque caste cimentarius bonus confido.
-            Desipio corpus torqueo vado suggero cornu creptio adulescens curriculum agnitio.
-            Compello beneficium cogo tandem tabernus dignissimos curtus dedecor suppellex alter.</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
-Ullam depono creptio ascit valens.
-Sapiente admitto accusamus sodalitas omnis unus contabesco abstergo.
-Tamisium perferendis vestrum terror.
-Laudantium umbra accusantium dapifer sol summa sperno ait absque carbo.
-Suffragium sequi corporis volva caelestis dicta corroboro.
-Learn more about our delivery features
-
-#### Summary
-
-Lorem ipsum dolor sit amet
-Ullam depono creptio ascit valens.
-Sapiente admitto accusamus sodalitas omnis unus contabesco abstergo.
-Tamisium perferendis vestrum terror.
-Laudantium umbra accusantium dapifer sol summa sperno ait absque carbo.
-Suffragium sequi corporis volva caelestis dicta corroboro.
-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 () => {
-    return (
-        <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">Ullam depono creptio ascit valens.
-            Sapiente admitto accusamus sodalitas omnis unus contabesco abstergo.
-            Tamisium perferendis vestrum terror.
-            Laudantium umbra accusantium dapifer sol summa sperno ait absque carbo.
-            Suffragium sequi corporis volva caelestis dicta corroboro.</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
-Explicabo virtus calamitas turbo.
-Viduo aufero tumultus comparo maxime aqua tamen dolorem.
-Vestigium usitas spoliatio perspiciatis vita cogito assentator aeger vitae.
-Cogo canis angelus capitulus ago tempus cattus blanditiis.
-Terminatio valde absens copiose admitto socius congregatio conforto desino audio.
-
-View detailsGet started
-
-#### Summary
-
-Lorem ipsum dolor sit amet
-Explicabo virtus calamitas turbo.
-Viduo aufero tumultus comparo maxime aqua tamen dolorem.
-Vestigium usitas spoliatio perspiciatis vita cogito assentator aeger vitae.
-Cogo canis angelus capitulus ago tempus cattus blanditiis.
-Terminatio valde absens copiose admitto socius congregatio conforto desino audio.
-
-View detailsGet 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 () => {
-    return (
-        <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">Explicabo virtus calamitas turbo.
-                    Viduo aufero tumultus comparo maxime aqua tamen dolorem.
-                    Vestigium usitas spoliatio perspiciatis vita cogito assentator aeger vitae.
-                    Cogo canis angelus capitulus ago tempus cattus blanditiis.
-                    Terminatio valde absens copiose admitto socius congregatio conforto desino audio.</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
-
-#### Summary
-
-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 () => {
-    return (
-        <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>
-```