Split Columns

A split column layout that places shipping on one side and returns on the other. Lets customers compare delivery and refund terms in one quick glance.

import {
  Truck,
  PackageOpen,
  Clock,
  CreditCard,
  RefreshCw,
  Calendar,
  ShieldCheck,
  HelpCircle,
} from "lucide-react";

export default function ShippingReturnsSplitColumns() {
  return (
    <div className="px-4 py-8 md:py-12">
      <div className="container mx-auto">
        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-12">
          {/* Shipping Information Column */}
          <div className="space-y-6">
            <h2 className="text-2xl font-bold tracking-tight md:text-3xl">
              Shipping Information
            </h2>

            <div className="flex items-start gap-3">
              <div className="bg-muted mt-1 rounded-md p-2">
                <Truck className="text-muted-foreground h-5 w-5" />
              </div>
              <div>
                <h3 className="text-lg font-medium">Delivery Options</h3>
                <p className="text-muted-foreground mt-1">
                  Standard shipping (3-5 business days), Express shipping (1-2
                  business days), and Same-day delivery available for select
                  areas.
                </p>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <div className="bg-muted mt-1 rounded-md p-2">
                <Clock className="text-muted-foreground h-5 w-5" />
              </div>
              <div>
                <h3 className="text-lg font-medium">Processing Time</h3>
                <p className="text-muted-foreground mt-1">
                  Orders are processed within 24 hours of being placed.
                  You&apos;ll receive a confirmation email with tracking
                  information once your order ships.
                </p>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <div className="bg-muted mt-1 rounded-md p-2">
                <CreditCard className="text-muted-foreground h-5 w-5" />
              </div>
              <div>
                <h3 className="text-lg font-medium">Shipping Costs</h3>
                <p className="text-muted-foreground mt-1">
                  Free standard shipping on orders over $50. Express shipping
                  and international delivery available at additional cost
                  calculated at checkout.
                </p>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <div className="bg-muted mt-1 rounded-md p-2">
                <PackageOpen className="text-muted-foreground h-5 w-5" />
              </div>
              <div>
                <h3 className="text-lg font-medium">International Shipping</h3>
                <p className="text-muted-foreground mt-1">
                  We ship to over 50 countries worldwide. International orders
                  may be subject to customs duties and taxes upon arrival.
                </p>
              </div>
            </div>
          </div>

          {/* Returns & Exchanges Column */}
          <div className="space-y-6">
            <h2 className="text-2xl font-bold tracking-tight md:text-3xl">
              Returns & Exchanges
            </h2>

            <div className="flex items-start gap-3">
              <div className="bg-muted mt-1 rounded-md p-2">
                <RefreshCw className="text-muted-foreground h-5 w-5" />
              </div>
              <div>
                <h3 className="text-lg font-medium">Return Policy</h3>
                <p className="text-muted-foreground mt-1">
                  We offer a 30-day satisfaction guarantee. If you&apos;re not
                  completely satisfied with your purchase, you can return it for
                  a full refund or exchange.
                </p>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <div className="bg-muted mt-1 rounded-md p-2">
                <Calendar className="text-muted-foreground h-5 w-5" />
              </div>
              <div>
                <h3 className="text-lg font-medium">Return Process</h3>
                <p className="text-muted-foreground mt-1">
                  To initiate a return, log into your account and follow the
                  return instructions, or contact our customer service team.
                  Return shipping labels are provided free of charge.
                </p>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <div className="bg-muted mt-1 rounded-md p-2">
                <ShieldCheck className="text-muted-foreground h-5 w-5" />
              </div>
              <div>
                <h3 className="text-lg font-medium">Condition Requirements</h3>
                <p className="text-muted-foreground mt-1">
                  Items must be returned in original condition with tags
                  attached and in original packaging. Used or damaged items may
                  not be eligible for a full refund.
                </p>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <div className="bg-muted mt-1 rounded-md p-2">
                <HelpCircle className="text-muted-foreground h-5 w-5" />
              </div>
              <div>
                <h3 className="text-lg font-medium">Exceptions</h3>
                <p className="text-muted-foreground mt-1">
                  Certain items like personalized products, intimate apparel,
                  and final sale items cannot be returned or exchanged. See our
                  full policy for details.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

About this block

Split Columns places two equal columns side by side: "Shipping Information" on the left and "Returns & Exchanges" on the right. Each column opens with a bold heading, then stacks four icon rows beneath it. Every row pairs a small muted icon badge with a subheading and a short paragraph, so Delivery Options, Processing Time, Shipping Costs, and International Shipping sit opposite Return Policy, Return Process, Condition Requirements, and Exceptions.

All eight rows are independent. You can rewrite any heading or paragraph, swap an icon for one that better fits your category, or remove a row entirely without affecting the rest of the layout. On narrow screens the two columns stack into a single vertical list, so the same content reads cleanly on mobile.

When to use

Reach for this block when you want shoppers to weigh delivery and return terms together rather than hunting through a single long column. It suits a dedicated policy page, the lower section of a course or subscription checkout page, or anywhere a buyer needs to confirm fulfillment details before committing. For an online education platform selling physical study kits or certificate bundles, the side by side comparison lets students check shipping lead times and the refund window in one glance, which reduces pre-purchase support questions. The accordion variant is better when space is tight and you want the text hidden until requested; this layout is better when you want both topics visible without any interaction.

A natural flow around it on an Ecommerce page:

Before

Product Overview to establish what is being purchased before buyers read fulfillment terms
Trust Guarantee to set confidence before the policy detail

After

Customer Reviews to close with social proof after the policy section
Footers as the natural end of a standalone policy page

What you can display

Each column accepts any pair of related policy topics, not just shipping and returns. A few ways to use the frame:

Enrollment and cancellation terms. Put enrollment steps on the left and cancellation or deferral conditions on the right so learners can review both before they pay.
Domestic and international delivery. Split by geography rather than topic when your fulfillment rules differ significantly by region.
Digital and physical fulfillment. Show instant download details on one side and physical kit dispatch timelines on the other for hybrid product bundles.

Tip: keep each paragraph to two or three sentences so both columns stay roughly the same height and the layout remains balanced.

About this block

When to use

A natural flow around it on an Ecommerce page:

Before

Product Overview to establish what is being purchased before buyers read fulfillment terms
Trust Guarantee to set confidence before the policy detail

After

Customer Reviews to close with social proof after the policy section
Footers as the natural end of a standalone policy page

What you can display

Each column accepts any pair of related policy topics, not just shipping and returns. A few ways to use the frame:

Enrollment and cancellation terms. Put enrollment steps on the left and cancellation or deferral conditions on the right so learners can review both before they pay.
Domestic and international delivery. Split by geography rather than topic when your fulfillment rules differ significantly by region.
Digital and physical fulfillment. Show instant download details on one side and physical kit dispatch timelines on the other for hybrid product bundles.

Tip: keep each paragraph to two or three sentences so both columns stay roughly the same height and the layout remains balanced.

Split Columns

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display