@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

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

@@ -0,0 +1,549 @@
+# Feature cards
+
+*Category:* Templates
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#templates/feature-cards
+*Captured:* 2025-12-12T14:21:30.681Z
+
+## Feature cards
+
+### Example: Example 1
+
+Lorem ipsum dolor sit amet
+Aiunt voveo una adnuo apto territo sub.
+Vestrum astrum truculenter adhaero tersus vinculum velum angulus adficio.
+Pecco nam aliquid compono amo tantum.
+Cultura patior aut calcar pariatur depereo sponte sed catena.
+Get started
+
+#### Summary
+
+Lorem ipsum dolor sit amet
+Aiunt voveo una adnuo apto territo sub.
+Vestrum astrum truculenter adhaero tersus vinculum velum angulus adficio.
+Pecco nam aliquid compono amo tantum.
+Cultura patior aut calcar pariatur depereo sponte sed catena.
+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">Aiunt voveo una adnuo apto territo sub.
+                Vestrum astrum truculenter adhaero tersus vinculum velum angulus adficio.
+                Pecco nam aliquid compono amo tantum.
+                Cultura patior aut calcar pariatur depereo sponte sed catena.</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
+Trado condico tui viduo defungo celo.
+Delectus sequi abeo.
+Deinde suscipit creator defessus abeo est cohors stips voluptates.
+Suspendo voluptatem acquiro voluptatibus crepusculum.
+Read more
+
+#### Summary
+
+Lorem ipsum
+Lorem ipsum dolor sit amet
+Trado condico tui viduo defungo celo.
+Delectus sequi abeo.
+Deinde suscipit creator defessus abeo est cohors stips voluptates.
+Suspendo voluptatem acquiro voluptatibus crepusculum.
+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">Trado condico tui viduo defungo celo.
+            Delectus sequi abeo.
+            Deinde suscipit creator defessus abeo est cohors stips voluptates.
+            Suspendo voluptatem acquiro voluptatibus crepusculum.</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
+Contra umbra trucido angulus ut eligendi arceo.
+Coniecto sufficio ocer.
+Delectus dolores cur.
+Vix tempus audacia similique laudantium appositus triduana debitis credo ipsum.
+Suggero thalassinus suscipit omnis.
+Learn more about our delivery features
+
+#### Summary
+
+Lorem ipsum dolor sit amet
+Contra umbra trucido angulus ut eligendi arceo.
+Coniecto sufficio ocer.
+Delectus dolores cur.
+Vix tempus audacia similique laudantium appositus triduana debitis credo ipsum.
+Suggero thalassinus suscipit omnis.
+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">Contra umbra trucido angulus ut eligendi arceo.
+            Coniecto sufficio ocer.
+            Delectus dolores cur.
+            Vix tempus audacia similique laudantium appositus triduana debitis credo ipsum.
+            Suggero thalassinus suscipit omnis.</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
+Tunc valens dolor tabesco.
+Subnecto apostolus callide colligo alter cado supplanto.
+Xiphias credo adipiscor venustas aeternus defendo conduco adflicto caries compono.
+Tabula vigilo appono comprehendo antiquus cognomen peccatus vergo.
+Beatus cras capillus conduco victus sponte vobis capitulus.
+
+View detailsGet started
+
+#### Summary
+
+Lorem ipsum dolor sit amet
+Tunc valens dolor tabesco.
+Subnecto apostolus callide colligo alter cado supplanto.
+Xiphias credo adipiscor venustas aeternus defendo conduco adflicto caries compono.
+Tabula vigilo appono comprehendo antiquus cognomen peccatus vergo.
+Beatus cras capillus conduco victus sponte vobis capitulus.
+
+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">Tunc valens dolor tabesco.
+                    Subnecto apostolus callide colligo alter cado supplanto.
+                    Xiphias credo adipiscor venustas aeternus defendo conduco adflicto caries compono.
+                    Tabula vigilo appono comprehendo antiquus cognomen peccatus vergo.
+                    Beatus cras capillus conduco victus sponte vobis capitulus.</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>
+```