Expandable Card

Usage

PreviewCode

Explore New York City

The Big Apple awaits

Book Now

New York City, the city that never sleeps, is a vibrant metropolis filled with iconic landmarks, world-class museums, diverse neighborhoods, and a thriving food scene. From the towering skyscrapers of Manhattan to the artistic enclaves of Brooklyn, there's something for everyone in this bustling urban playground. Must-visit attractions include the Statue of Liberty, Central Park, Times Square, and the Metropolitan Museum of Art. Don't forget to catch a Broadway show and indulge in the city's famous pizza and bagels!

Discover Ancient Rome

Walk through history

Learn More

Step back in time and explore the wonders of Ancient Rome. This historic city is a living museum, showcasing the grandeur of one of the world's greatest civilizations. Marvel at the iconic Colosseum, where gladiators once battled, and wander through the Roman Forum, the heart of ancient Roman life. Visit the Pantheon, an architectural marvel that has stood for nearly two millennia, and toss a coin into the Trevi Fountain to ensure your return to the Eternal City. Don't miss the Vatican City, home to St. Peter's Basilica and the awe-inspiring Sistine Chapel.

Safari Adventure in Kenya

Witness the Great Migration

Reserve

Embark on an unforgettable safari adventure in Kenya, home to some of Africa's most spectacular wildlife and landscapes. Witness the awe-inspiring Great Migration in the Masai Mara, where millions of wildebeest and zebra traverse the savanna in search of fresh grazing lands. Spot the 'Big Five' - lion, leopard, elephant, rhino, and buffalo - in their natural habitats. Visit traditional Maasai villages to learn about local cultures and customs. From hot air balloon rides over the plains to guided bush walks, Kenya offers a truly immersive and exhilarating safari experience.

Culinary Tour of Japan

Savor authentic flavors

Taste Now

Embark on a gastronomic journey through Japan, a country renowned for its exquisite cuisine and culinary traditions. From the bustling fish markets of Tokyo to the traditional tea houses of Kyoto, immerse yourself in the diverse flavors and techniques of Japanese cooking. Sample fresh sushi and sashimi, slurp ramen in cozy neighborhood shops, and indulge in perfectly grilled Kobe beef. Learn the art of making soba noodles, participate in a traditional tea ceremony, and discover the subtle flavors of sake. This culinary adventure will tantalize your taste buds and provide insight into Japan's rich food culture.

Northern Lights in Iceland

Chase the aurora borealis

Explore

Experience the magic of the Northern Lights in Iceland, one of the best places on Earth to witness this breathtaking natural phenomenon. Watch in awe as the night sky comes alive with dancing curtains of green, pink, and purple light. Beyond the aurora, Iceland offers a landscape of otherworldly beauty, from thundering waterfalls and vast glaciers to black sand beaches and bubbling hot springs. Soak in the famous Blue Lagoon, explore the vibrant capital of Reykjavik, and embark on thrilling adventures like glacier hiking and ice cave exploration. Iceland is a land of fire and ice that promises unforgettable experiences and stunning natural wonders.

Props

Slots

Events

How it Works

1. The component renders a compact card with an image, title, description, and CTA button.
2. Clicking the card expands it into a full-screen modal with additional content.
3. The component uses GSAP and Flip for smooth animations during expansion and collapse.
4. The expanded view includes a scrollable content area and a semi-transparent overlay.

Customization

You can customize the ExpandableCard component:

• Modify the cardInfo prop to change the card's content, image, and CTA text.
• Use the buttonClass prop to add custom styling to the CTA button.
• Use the backgroundClass prop to customize the card's background appearance.
• Adjust the CSS variables and classes to change the appearance of the card and modal.
• Extend the component's functionality by listening to the handleClick event.

Note

The ExpandableCard component uses GSAP and Flip for animations. Ensure that you have these libraries installed and imported in your project for the animations to work correctly.