WidgetSteps1

The Steps 1 component is a versatile widget for presenting sequential or categorized information in a visually engaging way. It is ideal for guiding users through processes, showcasing organizational highlights, or displaying key actions.

---
import { WidgetSteps } from '@yatoday/astro-ui/astro';
---

<WidgetSteps1
  title="Our values"
  subtitle="Donec id nibh neque..."
  callToAction={{
    text: 'Join us',
    href: '/',
  }}
  items={[
    {
      title: 'Write to us',
      description: 'Maecenas eu tellus eget est scelerisque l... ',
    },
    {
      title: 'Call us',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
    },
    {
      title: 'Whatsapp',
      description: 'Morbi sagittis, quam nec venenatis lobortis...',
    },
  ]}
/>

---
import { WidgetSteps } from '@yatoday/astro-ui/astro';
---

<WidgetSteps1
    isReversed={true}
    title="Our values"
    subtitle="Donec id nibh neque. Quisque et ..."
    callToAction={{
      text: 'Join us',
      href: '/',
    }}
    items={[
      {
        title: 'Write to us',
        description: 'Maecenas eu tellus eget ... ',
        icon: 'tabler:home'
      },
      {
        title: 'Call us',
        description: 'Lorem ipsum dolor sit amet,..',
        icon: 'tabler:anchor'
      },
      {
        title: 'Whatsapp',
        description: 'Morbi sagittis, ..',
        icon: 'tabler:bell-ringing-2'
      },
    ]}
  />

---
import { WidgetSteps } from '@yatoday/astro-ui/astro';
---

<WidgetSteps1
  title="Our values"
  subtitle="Donec id nibh neque. .."
  items={[
    {
      title: 'Write to us',
      description: 'example@example.com',
      icon: 'tabler:mail',
      href: 'mailto:example@example.com'
    },
    {
      title: 'Text us',
      description: '+1 000 000000',
      icon: 'tabler:brand-whatsapp',
      href: 'https://wa.me/+10000000000'
    },
    {
      title: 'Call us',
      description: '+1 000 000000',
      icon: 'tabler:phone',
      href: 'tel:+1000000000'
    },
  ]}
/>

Props