FunFacts

The FunFacts component displays a section with fun facts or statistics.

Props

The FunFacts component accepts the following props:

  • title (string, required): The main title of the fun facts section.

  • desc (string, required): The description or details about the fun facts.

  • facts (array of objects, required): An array of objects representing each fun fact. Each object should have the following properties:

    • figure (string): The figure or number associated with the fun fact.

    • text (string): The text describing the fun fact.

Usage Example

<FunFacts
  title="Fun Facts"
  desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies lacus non fermentum ultrices. Fusce consectetur le."
  facts={[
    {
      figure: '123',
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    },
    {
      figure: '456',
      text: 'Ut ultricies lacus non fermentum ultrices.',
    },
  ]}
/>

In the example above, the FunFacts component is used with sample data to render a section with fun facts. Make sure to replace the prop values with your own data and customize the component's appearance based on your project's requirements.

Styling

The FunFacts component uses Tailwind CSS utility classes for styling. You can customize the component's appearance by modifying these classes or extending them with your own styles.

For more information on Tailwind CSS, refer to the official documentation: https://tailwindcss.com/docs

Last updated

Was this helpful?