Features 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
0.10.2
WidgetFeaturesCard
.
Full of content
Features
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Features 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Param name
Param value
Param name
Param value
Param name
Param value
Features 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
---
import { WidgetFeaturesCard } from '@yatoday/astro-ui/astro';
---
<WidgetFeaturesCard
title="Lorem Ipsum"
subtitle="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
tagline="Features"
columns={3}
items={[
{
title: 'Features 1',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
image: { src: '~/assets/images/800x800.svg', alt: 'Lorem Ipsum' },
callToAction: { href: '/', text: 'Read more' },
links: [
{ href: '/', text: 'Additional link 1' },
{ href: '/', text: 'Additional link 2' },
{ href: '/', text: 'Additional link 3' },
],
},
{
title: 'Features 2',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
image: { src: '~/assets/images/800x800.svg', alt: 'Lorem Ipsum' },
callToAction: { href: '/', text: 'Read more' },
data: [
{ name: 'Param name', value: 'Param value' },
{ name: 'Param name', value: 'Param value' },
{ name: 'Param name', value: 'Param value' },
],
},
{
title: 'Features 3',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
image: { src: '~/assets/images/800x800.svg', alt: 'Lorem Ipsum' },
callToAction: { href: '/', text: 'Read more' },
links: [
{ href: '/', text: 'Additional link 1' },
{ href: '/', text: 'Additional link 2' },
{ href: '/', text: 'Additional link 3' },
],
},
]}
/>
With Image & Card4 for render
Features
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
---
import { WidgetFeaturesCard, Card4 } from '@yatoday/astro-ui/astro';
---
<WidgetFeaturesCard
via={Card4}
image="~/assets/images/pexels-helenalopesph-1015568.jpg"
title="Lorem Ipsum"
subtitle="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
tagline="Features"
columns={3}
items={[
{
title: 'Features 1',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
image: { src: '~/assets/images/800x800.svg', alt: 'Lorem Ipsum' },
callToAction: { href: '/', text: 'Read more' },
icon: "tabler:home",
},
{
title: 'Features 2',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
image: { src: '~/assets/images/800x800.svg', alt: 'Lorem Ipsum' },
callToAction: { href: '/', text: 'Read more' },
icon: "tabler:home",
},
{
title: 'Features 3',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
image: { src: '~/assets/images/800x800.svg', alt: 'Lorem Ipsum' },
callToAction: { href: '/', text: 'Read more' },
icon: "tabler:home",
},
]}
/>
With icons & Card2 for render
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
---
import { WidgetFeaturesCard, Card2 } from '@yatoday/astro-ui/astro';
---
<WidgetFeaturesCard
via={Card2}
title="Lorem Ipsum"
subtitle="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
columns={3}
items={[
{
icon: 'tabler:home',
title: 'Lorem Ipsum',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
url: '/',
},
{
icon: 'tabler:tractor',
title: 'Lorem Ipsum',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
url: '/',
},
{
icon: 'tabler:circle-chevrons-down',
title: 'Lorem Ipsum',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
url: '/',
},
]}
/>
With background
---
import { WidgetFeaturesCard } from '@yatoday/astro-ui/astro';
---
<WidgetFeaturesCard
title="Lorem Ipsum"
subtitle="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
columns={3}
items={[
{
icon: 'tabler:home',
title: 'Lorem Ipsum',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
callToAction: { href: '/', text: 'Read more' },
},
{
icon: 'tabler:tractor',
title: 'Lorem Ipsum',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
callToAction: { href: '/', text: 'Read more' },
},
{
icon: 'tabler:circle-chevrons-down',
title: 'Lorem Ipsum',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
},
]}
>
<Fragment slot="bg">
<div class="absolute inset-0 bg-primary/20"></div>
</Fragment>
</Features1Widget>
Via custom grid
Features
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
---
import { WidgetFeaturesCard, ItemGrid1, Card6 } from '@yatoday/astro-ui/astro';
---
<WidgetFeaturesCard
position="left"
via={Card6}
viaGrid={ItemGrid1}
title="Lorem Ipsum"
subtitle="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
tagline="Features"
items={[
{
title: 'Features 1',
image: { src: '~/assets/images/800x800.svg', alt: 'Lorem Ipsum' },
callToAction: { href: '/' },
classes: { aspect: 'pb-[116%]' }
},
{
title: 'Features 2',
image: { src: '~/assets/images/800x800.svg', alt: 'Lorem Ipsum' },
callToAction: { href: '/' },
},
{
title: 'Features 3',
image: { src: '~/assets/images/800x800.svg', alt: 'Lorem Ipsum' },
callToAction: { href: '/' },
classes: { aspect: 'pb-[133%]' }
},
{
title: 'Features 4',
image: { src: '~/assets/images/800x800.svg', alt: 'Lorem Ipsum' },
callToAction: { href: '/' },
classes: { aspect: 'pb-[133%]' }
},
{
title: 'Features 5',
callToAction: { href: '/' },
},
]}
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array | [] | Array of Card1 (or Card2, Card3, … etc.) components |
via | Component | Card1 | Which card component should be used for rendering |
title | string | - | Title in Headline component |
subtitle | string | - | Subtitle in Headline component |
tagline | string | - | Tagline in Headline component |
position | center | left | right | center | Header position |
image | string | Image | - | - |
columns | number | 1 | Number of columns in the grid. From 1 to 4 |
isAfterContent | boolean | false | - |
id | string | - | Specify a unique id for the section |
isDark | boolean | false | Adds the dark CSS class to the WidgetWrapper |
bg | string | - | Set background element |
classes.grid | string | - | CSS classes for the grid container |
classes.card | Object | - | CSS classes for the Card{...} component |
classes.container | string | - | CSS classes for the WidgetWrapper container |
classes.headline.{...} | string | - | CSS classes for the Headline component |