0.7.2

WidgetHero1

Source code

.

Work with us

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
  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>

Work with us

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>

Work with us

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',
    },
  }}
  actions={[
    { variant: 'primary', href: '/', text: 'Read more' },
    { variant: 'outline', href: '/', text: 'Read more' },
  ]}
>
</WidgetHero1>

Work with us

Anim aute id magna aliqua ad ad non deserunt sunt...

Content
---
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>

Props

PropTypeDefaultDescription
positioncenter | left | rightcenter-
imagestring | Image-Image for the card
titlestring-Title in Headline component
subtitlestring-Subtitle in Headline component
taglinestring-Tagline in Headline component
actionsArray[]Array of ToAction components
linksArray[]Array of Link items
statsArray[]Array of Item for the Stats0 component
idstring-Specify a unique id for the section
isDarkbooleanfalseAdds the dark CSS class to the WidgetWrapper
bgstring-Set background element
classes.containerstring-CSS classes for the root container
classes.headline.{...}string-CSS classes for the Headline component
classes.stats.{...}string-CSS classes for the Stats0 component