Add stacked highlights to result and quote component

src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx

@@ -2,7 +2,6 @@ import { CustomerCaseSection as CustomerCaseSectionObject } from "studioShared/l
 
 import ImageSection from "./image/ImageSection";
 import ListBlock from "./list/ListBlock";
-import QuoteBlock from "./quote/QuoteBlock";
 import ResultsBlock from "./results/ResultsBlock";
 import SplitSection from "./splitSection/SplitSection";
 import TextSection from "./text/TextSection";
@@ -17,8 +16,6 @@ export function CustomerCaseSection({
       return <SplitSection section={section} />;
     case "textBlock":
       return <TextSection section={section} />;
-    case "quoteBlock":
-      return <QuoteBlock section={section} />;
     case "imageBlock":
       return <ImageSection section={section} />;
     case "resultsBlock":

src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx

@@ -1,4 +1,3 @@
-import StackedHighlights from "src/components/stackedHighlights/StackedHighlights";
 import Text from "src/components/text/Text";
 import { ResultsBlock as ResultsBlockObject } from "studioShared/lib/interfaces/resultsBlock";
 
@@ -12,25 +11,42 @@ export default function ResultsBlock({ section }: ResultsBlockProps) {
   return (
     section.resultsBlockTitle && (
       <div className={styles.wrapper}>
-        <div className={styles.resultblock}>
-          <Text type="h4" className={styles.blocktitle}>
-            {section.resultsBlockTitle}
-          </Text>
-          <div className={styles.resultrow}>
-            {section.resultsList?.map((result) => (
-              <div className={styles.results} key={result._key}>
-                <Text type="h2" className={styles.mainresult}>
-                  {result.result}
-                </Text>
-                <Text type="labelRegular">{result.description}</Text>
-              </div>
-            ))}
-          </div>
-        </div>
         <div>
-          <StackedHighlights></StackedHighlights>
+          <StackedHighlights section={section}></StackedHighlights>
         </div>
       </div>
     )
   );
 }
+
+function StackedHighlights({ section }: ResultsBlockProps) {
+  return (
+    <div className={styles.highlightWrapper}>
+      <div className={styles.highlightBlock}>
+        <Text type="labelRegular" className={styles.highlightOutside}>
+          {section.resultsBlockTitle}
+        </Text>
+        {section.quote?.map((quote) => (
+          <div className={styles.highlightCard} key={quote._key}>
+            <div className={styles.innerContent}>
+              <Text type="h2">{quote.quoteText}</Text>
+              <p className={styles.subtitle}>{quote.quoteAuthor}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className={styles.highlightRow}>
+        {section.resultsList?.map((result) => (
+          <div className={styles.highlightCard} key={result._key}>
+            <div className={styles.innerContent}>
+              <Text type="h2" className={styles.result}>
+                {result.result}
+              </Text>
+              <p className={styles.subtitle}>{result.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/customerCases/customerCase/sections/results/resultsBlock.module.css

@@ -4,52 +4,96 @@
   align-items: center;
 }
 
-.resultblock {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 2.25rem;
-  max-width: 960px;
-  width: 100%;
+.highlightCard {
+  border: 3px solid var(--primary-yellow-warning);
+  border-radius: 0.25rem;
+  background-color: var(--primary-yellow-warning);
+}
+
+.highlightCard .innerContent {
+  background-color: var(--primary-bg);
+  border-radius: 1.5rem;
+  padding: 1rem;
+  height: 100%;
+}
+
+.result {
+  white-space: nowrap;
 }
 
-.blocktitle {
-  font-size: 1.5rem;
-  font-style: normal;
+.subtitle {
+  color: var(--primary-grey);
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
+
+.highlightOutside {
+  background-color: var(--primary-yellow-warning);
+  color: var(--secondary-text-black-darker);
+  display: inline-block;
+  padding: 0.25rem 1.25rem;
+  z-index: 2;
+  line-height: 1.5;
+  margin-right: auto;
+  border-radius: 0.25rem 0.25rem 0rem 0rem;
+  margin-bottom: 3px;
   font-weight: 500;
-  line-height: 120%;
 }
 
-.resultrow {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  align-self: stretch;
-  text-wrap: wrap;
+.highlightBlock {
+  display: inline-flex;
+  flex-direction: column;
+  align-self: start;
+}
+
+.highlightCard:not(:first-child) {
+  margin-top: calc(3px * -1);
+}
 
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    align-items: center;
-  }
+.highlightBlock .highlightCard {
+  border-top-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-.results {
+.highlightWrapper:has(.highlightRow:empty) .highlightCard {
+  border-bottom-right-radius: 0.25rem;
+}
+
+.highlightWrapper {
+  border-radius: inherit;
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
-  max-width: 20%;
   align-items: center;
+  /*overflow: clip;*/
+}
+
+.highlightRow {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
 
-  @media (max-width: 1024px) {
-    max-width: 100%;
-  }
+.highlightRow .highlightCard {
+  margin-top: calc(3px * -1);
+  border-top-left-radius: 0;
+  height: auto;
 }
 
-.mainresult {
-  color: var(--blue-dark);
-  font-size: 3rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
+.highlightRow .highlightCard:not(:last-child) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.highlightRow .highlightCard:not(:first-child) {
+  border-bottom-left-radius: 0;
+  border-left: 1.5rem;
+}
+
+.highlightRow .highlightCard:first-child {
+  border-top-left-radius: 0;
+}
+
+.highlightRow .highlightCard {
+  width: 100%;
 }