Content With Illustration

Component 38

About

Content With Illustration This component displays a section with textual content alongside an illustration. It's built to be responsive, adapting from a stacked layout on mobile to a two-column layout on larger screens. The text highlighting and icon animation add a dynamic, polished touch.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Content With Illustration to your project and fits it to your theme.

Code

How Content With Illustration is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ContentWithIllustration } from '@/components/ui/content-with-illustration'; // Adjust path as needed

export default function ContentWithIllustrationDemo() {
  const content = {
    title: 'At Eternal, it is always Day 1',
    highlightedText: 'always Day 1',
    paragraphs: [
      'Every day, just like today, has the potential to redefine the rest of our lives as an organization.',
      "Eternal started as Zomato, on 26th January 2008 (Deepinder's 25th birthday), when one weekend, he went around town, collected all takeaway menus he could find, and put them up on a website, mostly in the spirit of service to his friends, and other people around him.",
      'At the time, he had no intention of it turning into a business. He did not think there was any money to be made out of this.',
      'Eternal is a result of tackling challenges day by day. Progress happened incrementally, and sometimes in leaps. That\'s how we got here. And that\'s how we move forward - one day at a time. One step after another.',
    ],
    // Using public domain SVGs for demonstration
    imageSrc: 'https://cdn.21st.dev/assets/mirror/09/09ba2e96609c3a0b6af8555893cc487fc713148efa29fce5292834900198f3f1.jpg',
    iconSrc: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-o53JuZpiN3JOy3N3lXQMLmskV0OslK.png&w=320&q=75',
  };

  return (
    <div className="w-full bg-background">
      <ContentWithIllustration
        title={content.title}
        highlightedText={content.highlightedText}
        paragraphs={content.paragraphs}
        imageSrc={content.imageSrc}
        imageAlt="Illustration of a person with a backpack looking towards the sun"
        iconSrc={content.iconSrc}
        iconAlt="Animated sun doodle"
      />
    </div>
  );
}