diff --git a/browser/components/shopping/content/highlights.css b/browser/components/shopping/content/highlights.css
deleted file mode 100644
index de736556dc02b..0000000000000
--- a/browser/components/shopping/content/highlights.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
- /* Separate heading and list of highlights into rows */
- #review-highlights-wrapper {
- display: grid;
- grid-template-rows: 1rem auto;
- margin: 1em;
- row-gap: 1em;
- }
-
-#review-highlights-heading {
- font-size: 1em;
- font-weight: 600;
- margin: 0;
-}
diff --git a/browser/components/shopping/content/highlights.mjs b/browser/components/shopping/content/highlights.mjs
index c8db3411a32d6..31d3b9e0988fa 100644
--- a/browser/components/shopping/content/highlights.mjs
+++ b/browser/components/shopping/content/highlights.mjs
@@ -9,6 +9,8 @@ import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
// eslint-disable-next-line import/no-unassigned-import
import "chrome://browser/content/shopping/highlight-item.mjs";
+// eslint-disable-next-line import/no-unassigned-import
+import "chrome://browser/content/shopping/shopping-card.mjs";
const { ShoppingUtils } = ChromeUtils.importESModule(
"chrome://browser/content/shopping/ShoppingUtils.sys.mjs"
@@ -108,17 +110,14 @@ class ReviewHighlights extends MozLitElement {
highlightsTemplate.push(highlightEl);
}
return html`
-
-
-
-
${highlightsTemplate}
-
+
+
+
${highlightsTemplate}
+
+
`;
}
}
diff --git a/browser/components/shopping/content/shopping-card.css b/browser/components/shopping/content/shopping-card.css
new file mode 100644
index 0000000000000..24fabf0a5a87a
--- /dev/null
+++ b/browser/components/shopping/content/shopping-card.css
@@ -0,0 +1,80 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://global/skin/in-content/common.css");
+
+:host {
+ display: block;
+ width: 288px;
+ border: 1px solid var(--in-content-box-border-color);
+ border-radius: 8px;
+ background-color: var(--in-content-page-background);
+ box-shadow: var(--shadow-10);
+}
+
+.shopping-card {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ padding: 12px;
+}
+
+button {
+ margin: 0;
+}
+
+#shopping-details {
+ width: 100%;
+}
+
+#label-wrapper {
+ display: flex;
+ justify-content: space-between;
+ align-self: stretch;
+}
+
+:host([type="accordion"]) #label-wrapper {
+ cursor: pointer;
+}
+
+#header {
+ color: var(--in-content-text-color);
+ font-size: 1em;
+ font-weight: 600;
+}
+
+#footer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 0;
+ border-top: 1px solid var(--in-content-box-border-color);
+}
+
+details > summary {
+ list-style: none;
+}
+
+details > summary:focus-visible {
+ outline: var(--in-content-focus-outline);
+}
+
+.chevron-icon {
+ background-image: url("chrome://global/skin/icons/arrow-down.svg");
+ background-position: center;
+ background-repeat: no-repeat;
+ -moz-context-properties: fill;
+ fill: currentColor;
+ width: 24px;
+ height: 24px;
+ min-width: 24px;
+ min-height: 24px;
+ padding: 0;
+ flex-shrink: 0;
+}
+
+details[open] .chevron-icon {
+ background-image: url("chrome://global/skin/icons/arrow-up.svg");
+}
diff --git a/browser/components/shopping/content/shopping-card.mjs b/browser/components/shopping/content/shopping-card.mjs
new file mode 100644
index 0000000000000..8eb1093f1a7ca
--- /dev/null
+++ b/browser/components/shopping/content/shopping-card.mjs
@@ -0,0 +1,93 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*-
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
+import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
+
+window.MozXULElement.insertFTLIfNeeded("preview/shopping.ftl");
+
+/**
+ * A card container to be used in the shopping sidebar. There are three card types.
+ * The default type where no type attribute is required and the card will have no extra functionality.
+ * The "accordion" type will initially not show any content. The card will contain a arrow to expand the
+ * card so all of the content is visible.
+ *
+ * @property {string} label - The label text that will be used for the card header
+ * @property {string} type - (optional) The type of card. No type specified
+ * will be the default card. The other available type is "accordion".
+ */
+class ShoppingCard extends MozLitElement {
+ static properties = {
+ label: { type: String },
+ type: { type: String },
+ };
+
+ static get queries() {
+ return {
+ detailsEl: "#shopping-details",
+ };
+ }
+
+ labelTemplate() {
+ if (this.label) {
+ if (this.type === "accordion") {
+ return html`
+