Loading...
The SideBySideCard component displays content in a large format with image and text side-by-side. Perfect for displaying artisans, experiences, or features. On mobile, automatically converts to vertical card layout.
Large format card with image and content side-by-side. On mobile, this automatically converts to a vertical card layout.
For over 30 years, Stefano Bemer has crafted bespoke leather shoes in Florence, preserving traditional Italian craftsmanship. His workshop, nestled in the Oltrarno district, continues the art of hand-stitched shoes that have been worn by discerning customers worldwide.
Same layout with image on the right side.
Learn the ancient art of pasta making from a third-generation sfoglina in her family kitchen. This hands-on experience teaches you to make fresh tagliatelle, tortellini, and other regional pasta shapes, using traditional techniques and local ingredients.
Use SideBySideCardList to automatically alternate image positions. First card has image on left, second on right, and so on.
For over 30 years, Stefano Bemer has crafted bespoke leather shoes in Florence, preserving traditional Italian craftsmanship. His workshop, nestled in the Oltrarno district, continues the art of hand-stitched shoes that have been worn by discerning customers worldwide.
Learn the ancient art of pasta making from a third-generation sfoglina in her family kitchen. This hands-on experience teaches you to make fresh tagliatelle, tortellini, and other regional pasta shapes, using traditional techniques and local ingredients.
A family-run trattoria serving authentic Tuscan cuisine in the heart of Florence. For three generations, the Bianchi family has been serving traditional recipes passed down through the years, using locally sourced ingredients from nearby farms.
Side-by-side cards support all the same features as ContentCard: icon lists, tags, metadata, highlights, ratings, and links.
A family-run trattoria serving authentic Tuscan cuisine in the heart of Florence. For three generations, the Bianchi family has been serving traditional recipes passed down through the years, using locally sourced ingredients from nearby farms.
Cards can be non-clickable by setting clickable to false.
For over 30 years, Stefano Bemer has crafted bespoke leather shoes in Florence, preserving traditional Italian craftsmanship. His workshop, nestled in the Oltrarno district, continues the art of hand-stitched shoes that have been worn by discerning customers worldwide.
import { SideBySideCard, SideBySideCardList } from '@/components/composite/SideBySideCard';
// Single card
<SideBySideCard
id="1"
title="Stefano Bemer"
description="Master shoemaker for over 30 years..."
category="Leather Craftsmanship"
image={{ src: "/artisan.jpg", alt: "Stefano Bemer" }}
href="/artisans/stefano-bemer"
imagePosition="left"
/>
// Multiple cards with auto-alternating positions
<SideBySideCardList
items={[
{ id: '1', title: 'Artisan 1', ... },
{ id: '2', title: 'Artisan 2', ... },
]}
/>
// With all features
<SideBySideCard
{...props}
iconListItems={[
{ icon: MapPin, text: "Via Roma 123" },
{ icon: Clock, text: "Open 9AM-6PM" },
]}
tags={[
{ text: "Craftsmanship", href: "/craftsmanship" },
]}
rating={{ value: 4.6, type: "star", label: "(89 reviews)" }}
/>