Getting started
UI
W.Feature
Widget
.
---
import { WidgetHero1 } from '@yatoday/astro-ui/astro';
---
<WidgetHero1
title="Work with us"
subtitle="Anim aute id magna aliqua ad ad non deserunt sunt..."
actions={[
{ variant: 'primary', href: '/', text: 'Read more' },
{ variant: 'outline', href: '/', text: 'Read more' },
]}
>
</WidgetHero1>
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat.
---
import { WidgetHero1 } from '@yatoday/astro-ui/astro';
---
<WidgetHero1
position="left"
title="Work with us"
subtitle="Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat."
classes={{
bg: 'bg-linear-65 from-pink-500 to-purple-500',
headline: {
title: 'text-4xl md:text-5xl xl:text-6xl 2xl:text-7xl font-bold tracking-tighter mb-4 font-heading text-white',
subtitle: 'text-xl text-white',
},
}}
links={[
{ href: '#', text: 'Open roles'},
{ href: '#', text: 'Internship program'},
]}
>
</WidgetHero1>
---
import { WidgetHero1 } from '@yatoday/astro-ui/astro';
---
<WidgetHero1
position="left"
title="Work with us"
subtitle="Anim aute id magna aliqua ad ad non deserunt sunt..."
image="~/assets/images/pexels-helenalopesph-1015568.jpg"
classes={{
bg: 'bg-gray-900/80',
headline: {
title: 'text-4xl md:text-5xl xl:text-6xl 2xl:text-7xl font-bold tracking-tighter mb-4 font-heading text-white',
subtitle: 'text-xl text-white',
},
}}
actions={[
{ variant: 'primary', href: '/', text: 'Read more' },
{ variant: 'outline', href: '/', text: 'Read more' },
]}
>
</WidgetHero1>
Anim aute id magna aliqua ad ad non deserunt sunt...
---
import { WidgetHero1 } from '@yatoday/astro-ui/astro';
---
<WidgetHero1
position="left"
title="Work with us"
subtitle="Anim aute id magna aliqua ad ad non deserunt sunt..."
image="~/assets/images/pexels-helenalopesph-1015568.jpg"
classes={{
bg: 'bg-gray-900/80',
headline: {
title: 'text-4xl md:text-5xl xl:text-6xl 2xl:text-7xl font-bold tracking-tighter mb-4 font-heading text-white',
subtitle: 'text-xl text-white',
},
}}
>
Content
</WidgetHero1>
Prop | Type | Default | Description |
---|---|---|---|
position | center | left | right | center | - |
image | string | Image | - | Image for the card |
title | string | - | Title in Headline component |
subtitle | string | - | Subtitle in Headline component |
tagline | string | - | Tagline in Headline component |
actions | Array | [] | Array of ToAction components |
links | Array | [] | Array of Link items |
stats | Array | [] | Array of Item for the Stats0 component |
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.container | string | - | CSS classes for the root container |
classes.headline.{...} | string | - | CSS classes for the Headline component |
classes.stats.{...} | string | - | CSS classes for the Stats0 component |