Product overviews

Product detail page layout: large image + name + price + description + actions.

Preview

Throwback Hip Bag

$90

Sturdy waxed canvas with leather pulls.

React preview

LiveView (HEEx)

alias DesignSystem.UI.ProductOverviews

<ProductOverviews.product_overview
  name={@product.name}
  price={@product.price}
  image_src={@product.image_url}
  description={@product.description}
>
  <:actions>
    <Buttons.button phx-click="add_to_bag" phx-value-id={@product.id}>Add to bag</Buttons.button>
  </:actions>
</ProductOverviews.product_overview>

React (JSX)

import { ProductOverview } from "../ui/index.mjs"

<ProductOverview
  name={product.name}
  price={product.price}
  imageSrc={product.imageUrl}
  actions={<Button onClick={onAddToBag}>Add to bag</Button>}
/>