Responsive order information blocks for product detail, shipping, returns, and checkout support content
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-20-title">
<article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
<header class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-regular fa-circle-question text-color-placeholder text-lg" aria-hidden="true"></i>
<h2 id="order-info-20-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Info</h2>
</div>
<p class="text-color-caption max-w-3xl text-sm md:text-base">Bundle order info block with local product media, partial returns, stock split, and replacement answers.</p>
</header>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-1" role="tablist" aria-label="Bundle Policy Info sections">
<button class="border-color-primary text-color-primary border-b-2 px-3 py-2 text-sm font-medium" type="button" aria-current="page">Bundle</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Returns</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Stock</button>
</div>
<plus-chip status="info" size="sm" invert>Bundle</plus-chip>
</div>
<div class="grid gap-6 lg:grid-cols-2">
<div class="border-color-default flex w-full flex-col overflow-hidden rounded border" aria-label="Bundle Policy Info questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="true" aria-controls="order-info-20-answer-0">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Can I return one bundle item?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-20-answer-0" class="px-4 pb-4 md:px-5"><p class="text-color-caption text-sm md:text-base">Partial returns are available when the bundle discount is recalculated.</p></div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Can items ship separately?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">What if one item is unavailable?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
<aside class="border-color-default bg-color-default-default flex flex-col gap-4 rounded border p-4">
<img src="https://www.plusui.com/images/blocks/order-info/order-info-6-phones.png" alt="Bundle Policy Info product preview" class="h-48 w-full rounded object-cover md:h-64" />
<p class="text-color-caption text-sm">Product context stays visible beside the support answers.</p>
</aside>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-18-title">
<article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
<header class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-regular fa-circle-question text-color-placeholder text-lg" aria-hidden="true"></i>
<h2 id="order-info-18-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Info</h2>
</div>
<p class="text-color-caption max-w-3xl text-sm md:text-base">Damage support order info block with claim evidence, replacement, and refund questions.</p>
</header>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-1" role="tablist" aria-label="Damaged Item Support sections">
<button class="border-color-primary text-color-primary border-b-2 px-3 py-2 text-sm font-medium" type="button" aria-current="page">Report</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Replace</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Refund</button>
</div>
<plus-chip status="info" size="sm" invert>Support</plus-chip>
</div>
<div class="grid gap-6">
<div class="border-color-default flex w-full flex-col overflow-hidden rounded border" aria-label="Damaged Item Support questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="true" aria-controls="order-info-18-answer-0">
<span class="text-color-default min-w-px flex-1 text-base font-medium">What if an item arrives damaged?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-18-answer-0" class="px-4 pb-4 md:px-5"><p class="text-color-caption text-sm md:text-base">Take photos of the packaging and product, then start a claim from order history.</p></div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">How fast is replacement?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Can I choose a refund?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-19-title">
<article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
<header class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-regular fa-circle-question text-color-placeholder text-lg" aria-hidden="true"></i>
<h2 id="order-info-19-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Info</h2>
</div>
<p class="text-color-caption max-w-3xl text-sm md:text-base">Digital license order info panel with license delivery, activation, and team-seat questions.</p>
</header>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-1" role="tablist" aria-label="Digital License Info sections">
<button class="border-color-primary text-color-primary border-b-2 px-3 py-2 text-sm font-medium" type="button" aria-current="page">License</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Activation</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Seats</button>
</div>
<plus-chip status="primary" size="sm" invert>Digital</plus-chip>
</div>
<div class="grid gap-6">
<div class="border-color-default flex w-full flex-col overflow-hidden rounded border" aria-label="Digital License Info questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="true" aria-controls="order-info-19-answer-0">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Where is my license delivered?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-19-answer-0" class="px-4 pb-4 md:px-5"><p class="text-color-caption text-sm md:text-base">License keys appear on the order page and are emailed after payment.</p></div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">When can I activate?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Can I assign seats later?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-11-title">
<article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
<header class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-regular fa-circle-question text-color-placeholder text-lg" aria-hidden="true"></i>
<h2 id="order-info-11-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Info</h2>
</div>
<p class="text-color-caption max-w-3xl text-sm md:text-base">Gift order information block with gift receipt, hidden price, and message-card questions.</p>
</header>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-1" role="tablist" aria-label="Gift Order Info sections">
<button class="border-color-primary text-color-primary border-b-2 px-3 py-2 text-sm font-medium" type="button" aria-current="page">Gift Receipt</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Message</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Delivery</button>
</div>
<plus-chip status="warning" size="sm" invert>Gift</plus-chip>
</div>
<div class="grid gap-6">
<div class="border-color-default flex w-full flex-col overflow-hidden rounded border" aria-label="Gift Order Info questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="true" aria-controls="order-info-11-answer-0">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Will prices be hidden?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-11-answer-0" class="px-4 pb-4 md:px-5"><p class="text-color-caption text-sm md:text-base">Gift orders ship with a gift receipt that hides item prices.</p></div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Can I update the message?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Can the recipient return it?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-16-title">
<article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
<header class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-regular fa-circle-question text-color-placeholder text-lg" aria-hidden="true"></i>
<h2 id="order-info-16-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Info</h2>
</div>
<p class="text-color-caption max-w-3xl text-sm md:text-base">Installation order info block with appointment, preparation, and reschedule support questions.</p>
</header>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-1" role="tablist" aria-label="Installation Support Info sections">
<button class="border-color-primary text-color-primary border-b-2 px-3 py-2 text-sm font-medium" type="button" aria-current="page">Install</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Prepare</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Support</button>
</div>
<plus-chip status="info" size="sm" invert>Install</plus-chip>
</div>
<div class="grid gap-6">
<div class="border-color-default flex w-full flex-col overflow-hidden rounded border" aria-label="Installation Support Info questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="true" aria-controls="order-info-16-answer-0">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Is installation included?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-16-answer-0" class="px-4 pb-4 md:px-5"><p class="text-color-caption text-sm md:text-base">Installation is included for eligible large items in selected postcodes.</p></div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">How should I prepare?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Can I reschedule?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-12-title">
<article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
<header class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-regular fa-circle-question text-color-placeholder text-lg" aria-hidden="true"></i>
<h2 id="order-info-12-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Info</h2>
</div>
<p class="text-color-caption max-w-3xl text-sm md:text-base">International order info panel explaining duties, customs contact, and carrier handoff.</p>
</header>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-1" role="tablist" aria-label="International Duties Info sections">
<button class="border-color-primary text-color-primary border-b-2 px-3 py-2 text-sm font-medium" type="button" aria-current="page">Duties</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Customs</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Carrier</button>
</div>
<plus-chip status="info" size="sm" invert>Duties</plus-chip>
</div>
<div class="grid gap-6">
<div class="border-color-default flex w-full flex-col overflow-hidden rounded border" aria-label="International Duties Info questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="true" aria-controls="order-info-12-answer-0">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Who pays import duties?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-12-answer-0" class="px-4 pb-4 md:px-5"><p class="text-color-caption text-sm md:text-base">Duties are charged by the destination country and collected by the carrier.</p></div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Why is a phone number required?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Can the carrier change?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-4-title">
<article class="border-color-default bg-color-surface flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10">
<h2 id="order-info-4-title" class="sr-only">Media order details</h2>
<div class="flex w-full flex-col" role="tablist" aria-label="Order information sections">
<div class="border-color-default flex w-full overflow-x-auto border-b">
<button class="border-color-primary text-color-primary flex shrink-0 items-center justify-center border-b-2 px-3 pb-2 text-sm font-normal md:px-4 md:pb-2.5 md:text-lg" type="button" role="tab" aria-selected="true">Details</button>
<button class="text-color-default flex shrink-0 items-center justify-center border-b-2 border-transparent px-3 pb-2 text-sm font-normal md:px-4 md:pb-2.5 md:text-lg" type="button" role="tab" aria-selected="false">Shipping</button>
<button class="text-color-default flex min-w-px flex-1 items-center justify-start border-b-2 border-transparent px-3 pb-2 text-sm font-normal md:px-4 md:pb-2.5 md:text-lg" type="button" role="tab" aria-selected="false">Returns</button>
</div>
</div>
<div class="grid w-full gap-8 lg:grid-cols-2">
<div class="flex min-w-px flex-col gap-4">
<img src="https://www.plusui.com/images/blocks/order-info/order-info-4-phones.png" alt="Colorful clay phone mockups" class="aspect-video w-full rounded object-cover" />
<p class="text-color-caption text-sm font-normal md:text-base">A thoughtfully crafted piece that emphasises simplicity, durability, and a refined look — ideal for users who value both style and performance.</p>
</div>
<div class="border-color-default bg-color-surface flex w-full min-w-64 flex-col overflow-hidden rounded border" aria-label="Details questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="true" aria-controls="order-info-4-answer-wishlist">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Can I save items for later?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-4-answer-wishlist" class="px-4 pb-4 md:px-6 md:pb-5">
<p class="text-color-placeholder text-xs font-normal md:text-base">Yes, you can add products to your wishlist and access them anytime from your account.</p>
</div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Do you provide gift packaging?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Are your products eco-friendly?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Can I receive notifications?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Is there a size or usage guide available?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-13-title">
<article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
<header class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-regular fa-circle-question text-color-placeholder text-lg" aria-hidden="true"></i>
<h2 id="order-info-13-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Info</h2>
</div>
<p class="text-color-caption max-w-3xl text-sm md:text-base">Payment security order info block with authorization, saved card, and receipt questions.</p>
</header>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-1" role="tablist" aria-label="Payment Security Info sections">
<button class="border-color-primary text-color-primary border-b-2 px-3 py-2 text-sm font-medium" type="button" aria-current="page">Security</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Receipts</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Cards</button>
</div>
<plus-chip status="info" size="sm" invert>Secure</plus-chip>
</div>
<div class="grid gap-6">
<div class="border-color-default flex w-full flex-col overflow-hidden rounded border" aria-label="Payment Security Info questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="true" aria-controls="order-info-13-answer-0">
<span class="text-color-default min-w-px flex-1 text-base font-medium">When is my card charged?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-13-answer-0" class="px-4 pb-4 md:px-5"><p class="text-color-caption text-sm md:text-base">Cards are authorized at checkout and captured when the order ships.</p></div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Are card details stored?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Where is my receipt?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-15-title">
<article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
<header class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-regular fa-circle-question text-color-placeholder text-lg" aria-hidden="true"></i>
<h2 id="order-info-15-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Info</h2>
</div>
<p class="text-color-caption max-w-3xl text-sm md:text-base">Product care order info panel pairing care copy with phone media and expandable guidance rows.</p>
</header>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-1" role="tablist" aria-label="Product Care Info sections">
<button class="border-color-primary text-color-primary border-b-2 px-3 py-2 text-sm font-medium" type="button" aria-current="page">Care</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Storage</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Cleaning</button>
</div>
<plus-chip status="info" size="sm" invert>Care</plus-chip>
</div>
<div class="grid gap-6 lg:grid-cols-2">
<div class="border-color-default flex w-full flex-col overflow-hidden rounded border" aria-label="Product Care Info questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="true" aria-controls="order-info-15-answer-0">
<span class="text-color-default min-w-px flex-1 text-base font-medium">How should I clean it?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-15-answer-0" class="px-4 pb-4 md:px-5"><p class="text-color-caption text-sm md:text-base">Use a soft dry cloth and avoid harsh cleaning liquids.</p></div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Can it be stored outside?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">What voids support?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
<aside class="border-color-default bg-color-default-default flex flex-col gap-4 rounded border p-4">
<img src="https://www.plusui.com/images/blocks/order-info/order-info-4-phones.png" alt="Product Care Info product preview" class="h-48 w-full rounded object-cover md:h-64" />
<p class="text-color-caption text-sm">Product context stays visible beside the support answers.</p>
</aside>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-8-title">
<article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
<header class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-regular fa-circle-question text-color-placeholder text-lg" aria-hidden="true"></i>
<h2 id="order-info-8-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Info</h2>
</div>
<p class="text-color-caption max-w-3xl text-sm md:text-base">Returns-focused order information panel with eligibility, refund timing, and exchange questions.</p>
</header>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-1" role="tablist" aria-label="Returns Policy Info sections">
<button class="border-color-primary text-color-primary border-b-2 px-3 py-2 text-sm font-medium" type="button" aria-current="page">Returns</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Refunds</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Exchanges</button>
</div>
<plus-chip status="info" size="sm" invert>30 Days</plus-chip>
</div>
<div class="grid gap-6">
<div class="border-color-default flex w-full flex-col overflow-hidden rounded border" aria-label="Returns Policy Info questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="true" aria-controls="order-info-8-answer-0">
<span class="text-color-default min-w-px flex-1 text-base font-medium">How long do I have to return?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-8-answer-0" class="px-4 pb-4 md:px-5"><p class="text-color-caption text-sm md:text-base">Most items can be returned within 30 days in unused condition.</p></div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">When is the refund issued?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Can I exchange an item?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-2-title">
<article class="border-color-default bg-color-surface flex w-full max-w-7xl flex-col items-start justify-center gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10">
<h2 id="order-info-2-title" class="sr-only">Segmented order details</h2>
<div class="bg-color-default-default flex items-start rounded-full p-0.5" role="tablist" aria-label="Order information sections">
<button class="bg-color-surface text-color-default flex h-8 min-w-9 items-center justify-center rounded-full px-2 text-sm font-medium shadow-sm md:h-10 md:px-4 md:text-lg" type="button" role="tab" aria-selected="true">Details</button>
<button class="text-color-placeholder flex h-8 min-w-9 items-center justify-center rounded-full px-2 text-sm font-medium md:h-10 md:px-4 md:text-lg" type="button" role="tab" aria-selected="false">Shipping</button>
<button class="text-color-placeholder flex h-8 min-w-9 items-center justify-center rounded-full px-2 text-sm font-medium md:h-10 md:px-4 md:text-lg" type="button" role="tab" aria-selected="false">Returns</button>
</div>
<p class="text-color-caption w-full text-sm font-normal md:text-base">Designed with attention to detail and a focus on everyday usability, this item blends modern aesthetics with practical functionality to suit a variety of needs and lifestyles.</p>
<div class="flex w-full flex-col items-start gap-3" aria-label="Order detail questions">
<article class="border-color-default bg-color-surface w-full min-w-64 overflow-hidden rounded border">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="true" aria-controls="order-info-2-answer-setup">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">How long does it take to set up?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-2-answer-setup" class="px-4 pb-4 md:px-6 md:pb-5">
<p class="text-color-placeholder text-xs font-normal md:text-base">Our platform is designed to streamline your daily tasks and enhance your overall experience, whether you're managing projects, learning new skills, or exploring creative ideas. It's built to be flexible, user-friendly, and adaptable to various needs across different industries.</p>
</div>
</article>
<article class="border-color-default bg-color-surface w-full min-w-64 overflow-hidden rounded border">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Can I cancel anytime?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<article class="border-color-default bg-color-surface w-full min-w-64 overflow-hidden rounded border">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Is my data secure?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<article class="border-color-default bg-color-surface w-full min-w-64 overflow-hidden rounded border">
<button class="flex w-full items-center gap-3 px-4 py-3 text-left md:gap-5 md:px-6 md:py-4" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Can I access the platform on mobile devices?</span>
<span class="text-color-default flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm md:text-lg"></i>
</span>
</button>
</article>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-7-title">
<article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
<header class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-regular fa-circle-question text-color-placeholder text-lg" aria-hidden="true"></i>
<h2 id="order-info-7-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Info</h2>
</div>
<p class="text-color-caption max-w-3xl text-sm md:text-base">Order info panel with shipping timeline tabs, expanded dispatch answer, and compact status copy.</p>
</header>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-1" role="tablist" aria-label="Shipping Timeline Info sections">
<button class="border-color-primary text-color-primary border-b-2 px-3 py-2 text-sm font-medium" type="button" aria-current="page">Timeline</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Shipping</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Returns</button>
</div>
<plus-chip status="info" size="sm" invert>Timeline</plus-chip>
</div>
<div class="grid gap-6">
<div class="border-color-default flex w-full flex-col overflow-hidden rounded border" aria-label="Shipping Timeline Info questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="true" aria-controls="order-info-7-answer-0">
<span class="text-color-default min-w-px flex-1 text-base font-medium">When will my order dispatch?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-7-answer-0" class="px-4 pb-4 md:px-5"><p class="text-color-caption text-sm md:text-base">Orders placed before 14:00 leave the warehouse the same working day.</p></div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Can I change shipping speed?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Will I get tracking?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-3-title">
<article class="border-color-default bg-color-surface flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10">
<h2 id="order-info-3-title" class="sr-only">Side navigation order details</h2>
<p class="text-color-caption w-full text-sm font-normal md:text-base">Created to deliver a balanced combination of quality, comfort, and visual appeal, offering a clean and versatile experience that fits seamlessly into daily routines.</p>
<div class="flex w-full flex-col items-start gap-10 lg:flex-row">
<nav class="flex w-full shrink-0 flex-col gap-3 overflow-hidden rounded lg:w-72" aria-label="Order information sections">
<button class="bg-color-primary-invert-default text-color-primary flex w-full min-w-48 items-center gap-2 overflow-hidden rounded px-3 py-2 text-left text-sm font-normal md:text-base" type="button" aria-current="page">
<span class="flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-list text-sm"></i>
</span>
<span class="min-w-px flex-1">Details</span>
<span class="flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-chevron-right text-xs"></i>
</span>
</button>
<button class="border-color-default bg-color-surface text-color-caption flex w-full min-w-48 items-center gap-2 overflow-hidden rounded border px-3 py-2 text-left text-sm font-normal md:text-base" type="button">
<span class="flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-regular fa-comment-dots text-sm"></i>
</span>
<span class="min-w-px flex-1">Shipping</span>
<span class="flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-chevron-right text-xs"></i>
</span>
</button>
<button class="border-color-default bg-color-surface text-color-caption flex w-full min-w-48 items-center gap-2 overflow-hidden rounded border px-3 py-2 text-left text-sm font-normal md:text-base" type="button">
<span class="flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-regular fa-credit-card text-sm"></i>
</span>
<span class="min-w-px flex-1">Returns</span>
<span class="flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-chevron-right text-xs"></i>
</span>
</button>
</nav>
<div class="border-color-default bg-color-surface flex w-full min-w-64 flex-col overflow-hidden rounded border" aria-label="Details questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="true" aria-controls="order-info-3-answer-tracking">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">How do I track my order?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-3-answer-tracking" class="px-4 pb-4 md:px-6 md:pb-5">
<p class="text-color-caption text-xs font-normal md:text-base">Once shipped, you'll receive a tracking link via email.</p>
</div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Are returns free?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Will I receive order updates?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Do you offer customer support?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-17-title">
<article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
<header class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-regular fa-circle-question text-color-placeholder text-lg" aria-hidden="true"></i>
<h2 id="order-info-17-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Info</h2>
</div>
<p class="text-color-caption max-w-3xl text-sm md:text-base">Order info panel for apparel sizing with fit notes, exchange path, and measurement support rows.</p>
</header>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-1" role="tablist" aria-label="Size and Fit Info sections">
<button class="border-color-primary text-color-primary border-b-2 px-3 py-2 text-sm font-medium" type="button" aria-current="page">Fit</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Measurements</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Exchange</button>
</div>
<plus-chip status="info" size="sm" invert>Fit Guide</plus-chip>
</div>
<div class="grid gap-6">
<div class="border-color-default flex w-full flex-col overflow-hidden rounded border" aria-label="Size and Fit Info questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="true" aria-controls="order-info-17-answer-0">
<span class="text-color-default min-w-px flex-1 text-base font-medium">How does sizing run?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-17-answer-0" class="px-4 pb-4 md:px-5"><p class="text-color-caption text-sm md:text-base">This item has a regular fit with room for light layering.</p></div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Where are measurements shown?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Can I exchange sizes?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-6-title">
<article class="border-color-default bg-color-surface flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10">
<h2 id="order-info-6-title" class="sr-only">Product support order details</h2>
<div class="bg-color-default-default flex w-full max-w-max items-center overflow-x-auto rounded-full p-0.5" role="tablist" aria-label="Order information sections">
<button class="bg-color-surface text-color-default flex h-10 shrink-0 items-center justify-center rounded-full px-4 text-sm font-medium shadow-sm md:text-lg" type="button" role="tab" aria-selected="true">Details</button>
<button class="text-color-placeholder flex h-10 shrink-0 items-center justify-center rounded-full px-4 text-sm font-medium md:text-lg" type="button" role="tab" aria-selected="false">Shipping</button>
<button class="text-color-placeholder flex h-10 shrink-0 items-center justify-center rounded-full px-4 text-sm font-medium md:text-lg" type="button" role="tab" aria-selected="false">Returns</button>
</div>
<div class="flex w-full flex-col gap-10">
<div class="border-color-default bg-color-surface flex w-full min-w-64 flex-col overflow-hidden rounded border" aria-label="Product detail questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="true" aria-controls="order-info-6-answer-warranty">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Is there a warranty included?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-6-answer-warranty" class="px-4 pb-4 md:px-6 md:pb-5">
<p class="text-color-placeholder text-xs font-normal md:text-base">All products come with a standard warranty covering manufacturing issues.</p>
</div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">How do I track my order?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Will I receive order updates?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Do you offer customer support?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">How long does delivery take?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
<div class="flex w-full flex-col gap-3">
<img src="https://www.plusui.com/images/blocks/order-info/order-info-6-phones.png" alt="Mobile commerce product preview" class="aspect-video w-full rounded object-cover" />
<p class="text-color-caption text-sm font-normal md:text-base">Built with a modern approach, prioritising clarity, ease of use, and a timeless design language that adapts to different environments.</p>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-10-title">
<article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
<header class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-regular fa-circle-question text-color-placeholder text-lg" aria-hidden="true"></i>
<h2 id="order-info-10-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Info</h2>
</div>
<p class="text-color-caption max-w-3xl text-sm md:text-base">Store pickup order information panel with readiness, identity check, and pickup window questions.</p>
</header>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-1" role="tablist" aria-label="Store Pickup Info sections">
<button class="border-color-primary text-color-primary border-b-2 px-3 py-2 text-sm font-medium" type="button" aria-current="page">Pickup</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">ID Check</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Store Hours</button>
</div>
<plus-chip status="info" size="sm" invert>Pickup</plus-chip>
</div>
<div class="grid gap-6">
<div class="border-color-default flex w-full flex-col overflow-hidden rounded border" aria-label="Store Pickup Info questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="true" aria-controls="order-info-10-answer-0">
<span class="text-color-default min-w-px flex-1 text-base font-medium">When can I collect my order?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-10-answer-0" class="px-4 pb-4 md:px-5"><p class="text-color-caption text-sm md:text-base">You will receive a ready-for-pickup email after the store prepares the items.</p></div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">What ID do I need?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">How long is the order held?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-14-title">
<article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
<header class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-regular fa-circle-question text-color-placeholder text-lg" aria-hidden="true"></i>
<h2 id="order-info-14-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Info</h2>
</div>
<p class="text-color-caption max-w-3xl text-sm md:text-base">Subscription delivery information panel with cadence, skip, billing, and shipment questions.</p>
</header>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-1" role="tablist" aria-label="Subscription Delivery Info sections">
<button class="border-color-primary text-color-primary border-b-2 px-3 py-2 text-sm font-medium" type="button" aria-current="page">Schedule</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Skip</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Billing</button>
</div>
<plus-chip status="primary" size="sm" invert>Subscription</plus-chip>
</div>
<div class="grid gap-6">
<div class="border-color-default flex w-full flex-col overflow-hidden rounded border" aria-label="Subscription Delivery Info questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="true" aria-controls="order-info-14-answer-0">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Can I skip the next delivery?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-14-answer-0" class="px-4 pb-4 md:px-5"><p class="text-color-caption text-sm md:text-base">You can skip a delivery until two days before renewal.</p></div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">When is billing processed?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Can I change the cadence?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-1-title">
<article class="border-color-default bg-color-surface flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10">
<h2 id="order-info-1-title" class="sr-only">Order Details</h2>
<div class="flex w-full flex-col" role="tablist" aria-label="Order information sections">
<div class="border-color-default flex w-full overflow-x-auto border-b">
<button class="border-color-primary text-color-primary flex shrink-0 items-center justify-center border-b-2 px-3 pb-2 text-sm font-normal md:px-4 md:pb-2.5 md:text-lg" type="button" role="tab" aria-selected="true">Details</button>
<button class="text-color-default flex shrink-0 items-center justify-center border-b-2 border-transparent px-3 pb-2 text-sm font-normal md:px-4 md:pb-2.5 md:text-lg" type="button" role="tab" aria-selected="false">Shipping</button>
<button class="text-color-default flex min-w-px flex-1 items-center justify-start border-b-2 border-transparent px-3 pb-2 text-sm font-normal md:px-4 md:pb-2.5 md:text-lg" type="button" role="tab" aria-selected="false">Returns</button>
</div>
</div>
<p class="text-color-caption w-full text-sm font-normal md:text-base">A thoughtfully crafted piece that emphasises simplicity, durability, and a refined look — ideal for users who value both style and performance.</p>
<div class="flex w-full flex-col items-start overflow-hidden" aria-label="Order details questions">
<div class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 py-6 pr-4 text-left md:gap-5 md:pr-6" type="button" aria-expanded="true" aria-controls="order-info-1-answer-delivery">
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-plus text-sm"></i>
</span>
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">How long does delivery take?</span>
</button>
<div id="order-info-1-answer-delivery" class="pr-4 pb-6 md:pr-6">
<p class="text-color-caption text-xs font-normal">Orders are usually delivered within 2-4 business days depending on your location.</p>
</div>
</div>
<plus-divider></plus-divider>
<div class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 py-6 text-left md:gap-5" type="button" aria-expanded="false">
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-plus text-sm"></i>
</span>
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Do you offer Int shipping?</span>
</button>
</div>
<plus-divider></plus-divider>
<div class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 py-6 text-left md:gap-5" type="button" aria-expanded="false">
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-plus text-sm"></i>
</span>
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">What payment methods?</span>
</button>
</div>
<plus-divider></plus-divider>
<div class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 py-6 text-left md:gap-5" type="button" aria-expanded="false">
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-plus text-sm"></i>
</span>
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Is there a warranty included?</span>
</button>
</div>
<plus-divider></plus-divider>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-9-title">
<article class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-6 md:p-8 lg:p-10">
<header class="flex flex-col gap-2">
<div class="flex flex-wrap items-center gap-2">
<i class="fa-regular fa-circle-question text-color-placeholder text-lg" aria-hidden="true"></i>
<h2 id="order-info-9-title" class="text-color-default text-xl font-semibold md:text-2xl">Order Info</h2>
</div>
<p class="text-color-caption max-w-3xl text-sm md:text-base">Warranty order info block pairing local product media with coverage questions and claim support copy.</p>
</header>
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex flex-wrap items-center gap-1" role="tablist" aria-label="Warranty Coverage Info sections">
<button class="border-color-primary text-color-primary border-b-2 px-3 py-2 text-sm font-medium" type="button" aria-current="page">Warranty</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Repairs</button>
<button class="border-color-default text-color-caption border-b-2 px-3 py-2 text-sm font-medium" type="button">Claims</button>
</div>
<plus-chip status="info" size="sm" invert>Warranty</plus-chip>
</div>
<div class="grid gap-6 lg:grid-cols-2">
<div class="border-color-default flex w-full flex-col overflow-hidden rounded border" aria-label="Warranty Coverage Info questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="true" aria-controls="order-info-9-answer-0">
<span class="text-color-default min-w-px flex-1 text-base font-medium">What does the warranty cover?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-9-answer-0" class="px-4 pb-4 md:px-5"><p class="text-color-caption text-sm md:text-base">The warranty covers manufacturing faults and battery issues for two years.</p></div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">How do repairs work?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-4 text-left md:px-5" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium">Do I need proof of purchase?</span>
<span class="text-color-placeholder flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
<aside class="border-color-default bg-color-default-default flex flex-col gap-4 rounded border p-4">
<img src="https://www.plusui.com/images/blocks/order-info/order-info-5-watches.png" alt="Warranty Coverage Info product preview" class="h-48 w-full rounded object-cover md:h-64" />
<p class="text-color-caption text-sm">Product context stays visible beside the support answers.</p>
</aside>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center" aria-labelledby="order-info-5-title">
<article class="border-color-default bg-color-surface flex w-full max-w-7xl flex-col gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10">
<h2 id="order-info-5-title" class="sr-only">Product warranty order details</h2>
<div class="flex w-full flex-col" role="tablist" aria-label="Order information sections">
<div class="border-color-default flex w-full overflow-x-auto border-b">
<button class="border-color-primary text-color-primary flex shrink-0 items-center justify-center border-b-2 px-3 pb-2 text-sm font-normal md:px-4 md:pb-2.5 md:text-lg" type="button" role="tab" aria-selected="true">Details</button>
<button class="text-color-default flex shrink-0 items-center justify-center border-b-2 border-transparent px-3 pb-2 text-sm font-normal md:px-4 md:pb-2.5 md:text-lg" type="button" role="tab" aria-selected="false">Shipping</button>
<button class="text-color-default flex min-w-px flex-1 items-center justify-start border-b-2 border-transparent px-3 pb-2 text-sm font-normal md:px-4 md:pb-2.5 md:text-lg" type="button" role="tab" aria-selected="false">Returns</button>
</div>
</div>
<div class="grid w-full gap-8 lg:grid-cols-2 lg:gap-10">
<div class="border-color-default bg-color-surface flex w-full min-w-64 flex-col overflow-hidden rounded border" aria-label="Product detail questions">
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="true" aria-controls="order-info-5-answer-warranty">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Is there a warranty included?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-up text-sm"></i>
</span>
</button>
<div id="order-info-5-answer-warranty" class="px-4 pb-4 md:px-6 md:pb-5">
<p class="text-color-placeholder text-xs font-normal md:text-base">All products come with a standard warranty covering manufacturing issues.</p>
</div>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">How do I track my order?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Will I receive order updates?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">Do you offer customer support?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
<plus-divider></plus-divider>
<article class="bg-color-surface w-full">
<button class="flex w-full items-center gap-3 px-4 py-5 text-left md:gap-5 md:px-6" type="button" aria-expanded="false">
<span class="text-color-default min-w-px flex-1 text-base font-medium md:text-xl">How long does delivery take?</span>
<span class="text-color-placeholder flex size-5 shrink-0 items-center justify-center md:size-7" aria-hidden="true">
<i class="fa-solid fa-angle-down text-sm"></i>
</span>
</button>
</article>
</div>
<div class="flex min-w-px flex-col gap-3">
<img src="https://www.plusui.com/images/blocks/order-info/order-info-5-watches.png" alt="Red watch product pattern" class="h-64 w-full rounded object-cover md:h-80" />
<p class="text-color-caption text-sm font-normal md:text-base">Built with a modern approach, prioritising clarity, ease of use, and a timeless design language that adapts to different environments.</p>
</div>
</div>
</article>
</section>
Order info blocks present product and checkout support content in compact, scannable panels. They keep details, shipping, returns, delivery timing, payment, warranty, and support answers close to the purchase flow without requiring a full help-center page.
aria-expanded states for accordion-looking rows instead of scripted behavior.plus-divider between repeated rows.What is an order info UI component? An order info UI component is a reusable e-commerce pattern for presenting product, delivery, payment, return, or warranty details near a purchase flow.
Why are order info components important in frontend development? Order info components reduce checkout uncertainty by keeping common support answers close to product and payment decisions.
Where are order info UI components commonly used? Order Info UI components are commonly used on product detail pages, cart sidebars, checkout pages, order review screens, and account order-history pages.
Can order info UI components be reused across frameworks? Yes. Static Plus UI examples are portable HTML patterns that can be adapted across React, Vue, Angular, Web Components, and other frontend stacks.
How do order info components improve UI design systems? Order Info components standardize tab states, support-question rows, dividers, and responsive behavior for commerce-focused design systems.
Join to our popular weekly newsletter Plus UI, packed with updates, tips on UX and get the latest news in your inbox.
© Plus UI 2026
Plus UI offers an integrated Design System and UI Library, featuring a versatile suite of components to elevate your development projects. We streamline the web app development process with fully customizable pre-built components, themes, and powerful integrations.
Our components are built on a centralized token architecture, ensuring consistency and efficiency across your design system and UI library. The UI Library's framework-agnostic technology allows seamless use of components across different frameworks. Optimized for speed, it offers fast loading times, high performance, and quick integration, making it the fastest component library for web applications. The token architecture ensures theming consistency, covering essential design aspects like Color, Typography, Icons, Borders, Spacing, Opacity, Shadows & Effects, and Breakpoints. Integrations with Tailwind CSS and Font Awesome enhance functionality. Ready-to-use themes include light and dark modes, with full customization to apply your branding. Plus UI is also compliant with WCAG 2.1 standards for accessible web design.
We have meticulously designed and developed a collection of 26 feature-rich core components, with over 2000 variants and more than 2000 free icons in our Freemium Plan. For more advanced needs, our Pro Plan provides access to professionally designed and developed components, blocks, and templates. Our core components include: Accordion, Alert, Avatar, Badge, Button, Button Group, Breadcrumb, Checkbox, Chip, Divider, Drawer, Dropdown, Input, Link, Modal, Progress, Popconfirm, Popover, Radio, Rating, Select, Tabs, Textarea, Toast, Toggle, and Tooltip. Advanced components feature Charts, Date & Time Pickers, Data Grids, and Tree Views. The Plus UI component library offers a robust and flexible solution for building user interfaces, with support for React, Vue.js, Angular, Svelte, Next.js, and other frameworks.
Plus UI sets itself apart from other UI libraries and design systems. While systems like IBM's Carbon Design System excel in scalability for enterprise use, Plus UI integrates a centralized token system that unifies the design system and UI library, enhancing consistency and efficiency.
Unlike the Atlassian Design System, which focuses on simplicity for enterprise solutions, Plus UI provides a rich set of customizable and accessible components powered by Tailwind CSS and Font Awesome, ensuring a lightweight and flexible design framework.
The Figma Design System is known for its powerful collaboration features. Plus UI complements these by offering a meticulously organized suite of components compatible with Figma, allowing designers to leverage advanced features alongside our extensive library.
For Salesforce developers, the Lightning Design System offers robust tools. Plus UI provides similar robustness but extends its versatility by supporting multiple frameworks like React, Angular, Vue, and Svelte, making it adaptable to a wider range of applications.
The Airbnb Design System emphasizes user-centric principles. Plus UI builds on this with a centralized token system that enhances design coherence, ensuring all components adhere to consistent standards.
Apple’s Design System is celebrated for its sleek aesthetics and high performance. Plus UI matches this standard while providing a vast array of fully customizable and accessible components, including support for dark themes.
Atomic Design focuses on breaking down UIs into smaller, reusable components. Plus UI extends this approach with over 2000 variants and a rich set of properties and tokens, enabling efficient development of complex interfaces.
The IBM Design System is known for its comprehensive guidelines and accessibility. Plus UI offers user-friendly, accessible interfaces with detailed documentation and a component library that boosts productivity and design consistency.
The Salesforce Lightning Design System is optimized for Salesforce applications. Plus UI offers broader integrations, making it suitable for various frameworks beyond Salesforce, providing greater versatility.
Google's Material Design is a cohesive framework for responsive, mobile-first interfaces. Plus UI supports these principles but distinguishes itself with a lightweight package and a powerful combination of Tailwind CSS and Font Awesome for enhanced customization.
The Google Design System pioneered modern design principles. Plus UI builds on these by offering a comprehensive and highly adaptable system that caters to a broader range of needs.
The Uber Design System focuses on accessibility for a global user base. Plus UI shares this focus and expands on it by providing fully customizable components tailored to diverse user needs.
Microsoft's Fluent Design System emphasizes light, depth, and motion. Plus UI incorporates these principles while providing an extensive library of easy-to-use components for a seamless development process.
Finally, the Ant Design System is popular for its robust components in enterprise environments. Plus UI offers similar robustness but stands out with its centralized token system, extensive component library, and multi-framework compatibility, making it ideal for a wide range of applications.
In essence, Plus UI combines the strengths of these renowned design systems while offering unique features like a centralized token system, extensive customization, and framework-agnostic components, setting it apart as a versatile and powerful solution.