feat: benefits list

guardian · Feb 2, 2025 · 1872036 · 1872036
1 parent 495bab0
commit 1872036
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/...end/assets/components/subscriptionsProductDescription/subscriptionsProductDescription.tsx b/...end/assets/components/subscriptionsProductDescription/subscriptionsProductDescription.tsx
@@ -86,11 +86,14 @@ function SubscriptionsProductBenefits({
 	benefits: ProductBenefit[];
 }): JSX.Element {
 	return (
-		<div className="subscriptions__description">
+		<ul className="subscriptions__list">
 			{benefits.map((benefit) => (
-				<section>{benefit.copy}</section>
+				<li className="subscriptions__listitem">
+					<div className="subscriptions__listitem__bullet">{`\u2022`}</div>
+					<div>{benefit.copy}</div>
+				</li>
 			))}
-		</div>
+		</ul>
 	);
 }
 

diff --git a/support-frontend/assets/pages/subscriptions-landing/subscriptionsLanding.scss b/support-frontend/assets/pages/subscriptions-landing/subscriptionsLanding.scss
@@ -164,6 +164,21 @@
 	}
 }
 
+.subscriptions__list {
+  display: block;
+  border-top: 1px solid gu-colour(neutral-86);
+  margin: 45px 20px 25px 0px;
+}
+
+.subscriptions__listitem {
+  display: flex;
+}
+
+.subscriptions__listitem__bullet {
+  vertical-align: top;
+  padding-right: 4px;
+}
+
 .subscriptions__product--reverse {
 	@include mq($until: tablet) {
 		padding-bottom: 30px;