feat: use typography tokens in o-topper and o-teaser (#1938)

* feat: use typography tokens in o-topper * feat: use typography tokens in o-teaser * fix: fix sass build errors, correct use case usage * fix: not sure what happened here * fix: fix topper token naming * fix: fix headings sizes * chore: Update components/o-private-foundation/src/scss/o-typography/main.scss Co-authored-by: Lee Moody <[email protected]> * fix: use correct tokens * chore: ensure headline sizes are responsive * fix: use o3 colors in if statement * fix: prevent breaking change to topper API. * fix: restore missing bar from headline * fix: remove underline from pages that don't need it * fix: correctly apply colours in branded demo * fix: reset browser default margins * fix: fix margins on headings * fix: fix headline font weight * fix: remove duplicate tag * fix: fix various discrepancies in teasers * fix: fix color discrepancies * fix: fix color discrepancies * fix: use correct font style and weighting on tags * chore: decrease headline-sm sizes to font/lineheight size 3 * chore: use all headline-sm typography tokens * fix: ensure live timestamps have highest specificity * fix: remove underline --------- Co-authored-by: Lee Moody <[email protected]>
Financial-Times · Jan 31, 2025 · 428eb8d · 428eb8d
1 parent ede0eb9
commit 428eb8d
Show file tree

Hide file tree

Showing 37 changed files with 208 additions and 98 deletions.
diff --git a/apps/dictionary/tokens/core/use-case/typography.json b/apps/dictionary/tokens/core/use-case/typography.json
@@ -56,8 +56,8 @@
           "value": {
             "fontFamily": "{o3.font.family.financier-display}",
             "fontWeight": "{o3.font.weight.light}",
-            "fontSize": "{o3.font.size.4}",
-            "lineHeight": "{o3.font.lineheight.4}"
+            "fontSize": "{o3.font.size.3}",
+            "lineHeight": "{o3.font.lineheight.3}"
           },
           "type": "typography",
           "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News)."

diff --git a/apps/dictionary/tokens/sustainable-views/use-case/typography.json b/apps/dictionary/tokens/sustainable-views/use-case/typography.json
@@ -56,8 +56,8 @@
           "value": {
             "fontFamily": "{o3.font.family.metric}",
             "fontWeight": "{o3.font.weight.regular}",
-            "fontSize": "{o3.font.size-metric2.4}",
-            "lineHeight": "{o3.font.lineheight-metric2.4}"
+            "fontSize": "{o3.font.size-metric2.3}",
+            "lineHeight": "{o3.font.lineheight-metric2.3}"
           },
           "type": "typography",
           "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News)."

diff --git a/apps/dictionary/tokens/whitelabel/use-case/typography.json b/apps/dictionary/tokens/whitelabel/use-case/typography.json
@@ -56,8 +56,8 @@
           "value": {
             "fontFamily": "{o3.font.family.financier-display}",
             "fontWeight": "{o3.font.weight.light}",
-            "fontSize": "{o3.font.size.4}",
-            "lineHeight": "{o3.font.lineheight.4}"
+            "fontSize": "{o3.font.size.3}",
+            "lineHeight": "{o3.font.lineheight.3}"
           },
           "type": "typography",
           "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News)."

diff --git a/components/o-private-foundation/src/scss/o-typography/main.scss b/components/o-private-foundation/src/scss/o-typography/main.scss
@@ -309,7 +309,10 @@
 			}
 
 			@if ($type == 'ordered') {
-				@include oPrivateTypographySans($weight: 'semibold');
+				font-family: oPrivateFoundationGet('o3-typography-use-case-body-highlight-font-family');
+				font-size: oPrivateFoundationGet('o3-typography-use-case-body-highlight-font-size');
+				font-weight: oPrivateFoundationGet('o3-typography-use-case-body-highlight-font-weight');
+				line-height: oPrivateFoundationGet('o3-typography-use-case-body-highlight-line-height');
 				content: counter(item);
 				counter-increment: item;
 				font-feature-settings: 'tnum';

diff --git a/components/o-private-foundation/src/scss/tokens/core.scss b/components/o-private-foundation/src/scss/tokens/core.scss
@@ -276,9 +276,9 @@ $tokens: (
   // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
   'o3-typography-use-case-headline-sm-font-weight': 300,
   // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
-  'o3-typography-use-case-headline-sm-font-size': 28px,
+  'o3-typography-use-case-headline-sm-font-size': 24px,
   // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
-  'o3-typography-use-case-headline-sm-line-height': 32px,
+  'o3-typography-use-case-headline-sm-line-height': 28px,
   // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
   'o3-typography-use-case-title-lg-font-family': 'metric 2 VF',
   // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.

diff --git a/components/o-private-foundation/src/scss/tokens/professional.scss b/components/o-private-foundation/src/scss/tokens/professional.scss
@@ -173,9 +173,9 @@ $tokens: (
   // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
   'o3-typography-use-case-headline-sm-font-weight': 300,
   // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
-  'o3-typography-use-case-headline-sm-font-size': 28px,
+  'o3-typography-use-case-headline-sm-font-size': 24px,
   // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
-  'o3-typography-use-case-headline-sm-line-height': 32px,
+  'o3-typography-use-case-headline-sm-line-height': 28px,
   // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
   'o3-typography-use-case-title-lg-font-family': 'metric 2 VF',
   // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.

diff --git a/components/o-private-foundation/src/scss/tokens/sustainable-views.scss b/components/o-private-foundation/src/scss/tokens/sustainable-views.scss
@@ -227,7 +227,7 @@ $tokens: (
   // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
   'o3-typography-use-case-headline-sm-font-weight': 400,
   // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
-  'o3-typography-use-case-headline-sm-font-size': 28px,
+  'o3-typography-use-case-headline-sm-font-size': 24px,
   // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
   'o3-typography-use-case-headline-sm-line-height': 32px,
   // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.

diff --git a/components/o-private-foundation/src/scss/tokens/whitelabel.scss b/components/o-private-foundation/src/scss/tokens/whitelabel.scss
@@ -242,9 +242,9 @@ $tokens: (
   // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
   'o3-typography-use-case-headline-sm-font-weight': 300,
   // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
-  'o3-typography-use-case-headline-sm-font-size': 28px,
+  'o3-typography-use-case-headline-sm-font-size': 24px,
   // Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
-  'o3-typography-use-case-headline-sm-line-height': 32px,
+  'o3-typography-use-case-headline-sm-line-height': 28px,
   // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
   'o3-typography-use-case-title-lg-font-family': 'metric 2 VF',
   // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.

diff --git a/components/o-teaser/main.scss b/components/o-teaser/main.scss
@@ -4,7 +4,6 @@
 
 @import 'src/scss/variables';
 @import 'src/scss/mixins';
-@import 'src/scss/deprecated';
 
 @import 'src/scss/elements/default';
 @import 'src/scss/elements/images';

diff --git a/components/o-teaser/src/scss/_deprecated.scss b/components/o-teaser/src/scss/_deprecated.scss
diff --git a/components/o-teaser/src/scss/_mixins.scss b/components/o-teaser/src/scss/_mixins.scss
@@ -102,7 +102,6 @@
 
 	.o-teaser--promoted-content {
 		.o-teaser__heading a {
-			@include oPrivateTypographyLink();
 			@include oPrivateTypographyLinkThemeOverride(
 				$theme: (
 					'base': $_o-teaser-base-color,

diff --git a/components/o-teaser/src/scss/elements/_default.scss b/components/o-teaser/src/scss/elements/_default.scss
@@ -3,10 +3,10 @@
 /// @access public
 @mixin oTeaserHeading {
 	@include _oTeaserLink();
-	font-family: oPrivateFoundationGet('o3-typography-use-case-body-content-base-font-family');
-	font-size: oPrivateFoundationGet('o3-typography-use-case-body-content-base-font-size');
-	font-weight: oPrivateFoundationGet('o3-typography-use-case-body-content-base-font-weight');
-	line-height: oPrivateFoundationGet('o3-typography-use-case-body-content-base-line-height');
+	font-family: oPrivateFoundationGet('o3-typography-use-case-headline-sm-font-family');
+	font-size: oPrivateFoundationGet('o3-typography-use-case-headline-sm-font-size');
+	font-weight: oPrivateFoundationGet('o3-typography-use-case-headline-sm-font-weight');
+	line-height: oPrivateFoundationGet('o3-typography-use-case-headline-sm-line-height');
 	color: $_o-teaser-base-color;
 	margin-top: 0;
 	margin-bottom: 0;
@@ -19,6 +19,7 @@
 	font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
 	font-weight: oPrivateFoundationGet('o3-typography-use-case-detail-font-weight');
 	line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');
+
 	position: relative;
 	width: 100%;
 	text-rendering: optimizeLegibility;
@@ -59,6 +60,7 @@
 	font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
 	font-weight: oPrivateFoundationGet('o3-typography-use-case-detail-font-weight');
 	line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');
+
 	color: inherit;
 	text-decoration: none;
 	border: 0;
@@ -83,7 +85,10 @@
 }
 
 @mixin _oTeaserTagSuffix {
-	@include oPrivateTypographySans(-1);
+	font-family: oPrivateFoundationGet('o3-typography-use-case-detail-font-family');
+	font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
+	font-weight: oPrivateFoundationGet('o3-typography-use-case-detail-font-weight');
+	line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');
 	color: oPrivateFoundationGet('o3-color-palette-black-60');
 }
 

diff --git a/components/o-teaser/src/scss/elements/_promoted.scss b/components/o-teaser/src/scss/elements/_promoted.scss
@@ -2,13 +2,19 @@
 	color: oPrivateFoundationGet('o3-color-palette-black');
 
 	.o-teaser__meta {
-		@include oPrivateTypographySans($scale: -1, $weight: 'semibold');
+		font-family: oPrivateFoundationGet('o3-typography-use-case-detail-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
+		font-weight: oPrivateFoundationGet('o3-font-weight-semibold');
+		line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');
 		color: $_o-teaser-muted;
 		margin-bottom: oPrivateSpacingByName('s3');
 	}
 
 	.o-teaser__promoted-prefix {
-		@include oPrivateTypographySans($scale: 0);
+		font-family: oPrivateFoundationGet('o3-typography-use-case-label-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-label-font-size');
+		font-weight: oPrivateFoundationGet('o3-font-weight-semibold');
+		line-height: oPrivateFoundationGet('o3-typography-use-case-label-line-height');
 		text-transform: uppercase;
 		color: oPrivateFoundationGet('o3-color-palette-matisse-blue');
 		display: block;

diff --git a/components/o-teaser/src/scss/elements/_related-items.scss b/components/o-teaser/src/scss/elements/_related-items.scss
@@ -12,11 +12,16 @@
 
 /// Single related content item styles
 @mixin _oTeaserRelatedItem {
-	@include oPrivateTypographySans(-1);
+	font-family: oPrivateFoundationGet('o3-typography-use-case-detail-font-family');
+	font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
+	font-weight: oPrivateFoundationGet('o3-typography-use-case-detail-font-weight');
 	line-height: 22px;
+
 	@include oPrivateGridRespondTo('L') {
-		@include oPrivateTypographySans(0);
-		line-height: 24px;
+		font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
+		font-weight: oPrivateFoundationGet('o3-typography-use-case-body-base-font-weight');
+		line-height: oPrivateFoundationGet('o3-typography-use-case-body-base-line-height');
 	}
 	color: $_o-teaser-muted;
 

diff --git a/components/o-teaser/src/scss/elements/_timestamp.scss b/components/o-teaser/src/scss/elements/_timestamp.scss
@@ -5,6 +5,7 @@
 	font-weight: oPrivateFoundationGet('o3-typography-use-case-label-font-weight');
 	line-height: oPrivateFoundationGet('o3-typography-use-case-label-line-height');
 	text-transform: oPrivateFoundationGet('o3-typography-use-case-label-text-case');
+	color: $_o-teaser-muted;
 	display: block;
 	// Moves timestamp to the bottom when stretched modifier is used
 	margin-top: auto;
@@ -32,7 +33,8 @@
 	// @deprecated - o-teaser__timestamp--inprogress has been replaced by o-teaser__timestamp--live
 	// https://github.com/Financial-Times/o-teaser/issues/173
 	.o-teaser__timestamp--inprogress,
-	.o-teaser__timestamp--live {
+	.o-teaser__timestamp--live,
+	.o-teaser__timestamp.o-teaser__timestamp--live {
 		@include oLabelsIndicatorContent($opts: ('block': true, 'modifier': 'live'));
 	}
 

diff --git a/components/o-teaser/src/scss/themes/_hero.scss b/components/o-teaser/src/scss/themes/_hero.scss
@@ -40,8 +40,8 @@
 
 /// Hero opinion theme - blue background white based text
 @mixin _oTeaserHeroOpinion {
-	$opinion-color: oPrivateFoundationGet('o3-color-palette-oxford');
 	$opinion-background: oPrivateFoundationGet('o3-color-palette-oxford');
+	$opinion-color: oPrivateColorsGetTextColor($opinion-background, 100);
 	.o-teaser__heading a:hover,
 	.o-teaser__heading a:focus,
 	.o-teaser__heading a:visited,
@@ -198,7 +198,10 @@
 /// Hero standalone theme styles
 @mixin _oTeaserHeroStandalone {
 	.o-teaser__heading {
-		@include oPrivateTypographySans(4);
+		font-family: oPrivateFoundationGet('o3-typography-use-case-headline-sm-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-headline-sm-font-size');
+		font-weight: oPrivateFoundationGet('o3-typography-use-case-headline-sm-font-weight');
+		line-height: oPrivateFoundationGet('o3-typography-use-case-headline-sm-line-height');
 	}
 
 	.o-teaser__image-container {
@@ -213,8 +216,8 @@
 
 // Hero Package theme — extra
 @mixin _oTeaserHeroExtra {
-	$hero-extra-color: oPrivateFoundationGet('o3-color-palette-slate');
 	$hero-extra-background: oPrivateFoundationGet('o3-color-palette-slate');
+	$hero-extra-color: oPrivateColorsGetTextColor($hero-extra-background, 100);
 	// highlight colours
 	$hero-extra-highlight-border: oPrivateFoundationGet('o3-color-palette-lemon');
 	$hero-extra-highlight-color: oPrivateFoundationGet('o3-color-palette-lemon');

diff --git a/components/o-teaser/src/scss/themes/_large.scss b/components/o-teaser/src/scss/themes/_large.scss
@@ -9,16 +9,23 @@
 	}
 
 	.o-teaser__heading {
-		@include oPrivateTypographyDisplay($scale: 3);
+		font-family: oPrivateFoundationGet('o3-typography-use-case-headline-sm-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-headline-sm-font-size');
+		font-weight: oPrivateFoundationGet('o3-typography-use-case-headline-sm-font-weight');
+		line-height: oPrivateFoundationGet('o3-typography-use-case-headline-sm-line-height');
 	}
 
 	.o-teaser__standfirst {
-		@include oPrivateTypographySans(1);
-		line-height: 24px;
+		font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
+		font-weight: oPrivateFoundationGet('o3-typography-use-case-body-base-font-weight');
+		line-height: oPrivateFoundationGet('o3-typography-use-case-body-base-line-height');
 
 		@include oPrivateGridRespondTo('L') {
-			@include oPrivateTypographySans(2);
-			line-height: 24px;
+			font-family: oPrivateFoundationGet('o3-typography-use-case-body-lg-font-family');
+			font-size: oPrivateFoundationGet('o3-typography-use-case-body-lg-font-size');
+			font-weight: oPrivateFoundationGet('o3-typography-use-case-body-lg-font-weight');
+			line-height: oPrivateFoundationGet('o3-typography-use-case-body-lg-line-height');
 		}
 		margin-top: oPrivateSpacingByName('s6');
 	}

diff --git a/components/o-teaser/src/scss/themes/_package.scss b/components/o-teaser/src/scss/themes/_package.scss
@@ -116,7 +116,9 @@
 
 		&__list-item,
 		&__landing-link {
-			@include oPrivateTypographySans(0);
+			font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
+			font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
+			font-weight: oPrivateFoundationGet('o3-typography-use-case-body-base-font-weight');
 			line-height: 20px;
 			padding: 12px 0;
 
@@ -165,8 +167,8 @@
 
 @mixin _oTeaserSpecialReportPackageList {
 	.package-teaser {
-		$package-special-report-color: oPrivateFoundationGet('o3-color-palette-claret-70');
 		$package-special-report-background: oPrivateFoundationGet('o3-color-palette-claret-70');
+		$package-special-report-color: oPrivateColorsGetTextColor($package-special-report-background, 100);
 
 		&__list-item a {
 			color: oPrivateFoundationGet('o3-color-palette-white');

diff --git a/components/o-teaser/src/scss/themes/_small.scss b/components/o-teaser/src/scss/themes/_small.scss
@@ -69,12 +69,18 @@
 		margin-bottom: oPrivateSpacingByName('s2');
 	}
 	.o-teaser__tag-prefix {
-		@include oPrivateTypographySans($scale: 0, $weight: 'semibold');
+		font-family: oPrivateFoundationGet('o3-typography-use-case-detail-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
+		font-weight: oPrivateFoundationGet('o3-font-weight-semibold');
+		line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');
 		color: oPrivateFoundationGet('o3-color-palette-claret-60');
 		margin-right: oPrivateSpacingByName('s1');
 	}
 	.o-teaser__tag {
-		@include oPrivateTypographySans($scale: 0, $weight: 'regular');
+		font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
+		font-weight: oPrivateFoundationGet('o3-typography-use-case-body-base-font-weight');
+		line-height: oPrivateFoundationGet('o3-typography-use-case-body-base-line-height');
 		color: oPrivateFoundationGet('o3-color-palette-claret-60');
 	}
 	.o-teaser__standfirst {

diff --git a/components/o-teaser/src/scss/themes/_standard.scss b/components/o-teaser/src/scss/themes/_standard.scss
@@ -1,7 +1,7 @@
 /// Inverse theme styles - base all text content on white
 @mixin _oTeaserInverse {
-	$inverse-color: oPrivateFoundationGet('o3-color-palette-black');
 	$inverse-background: oPrivateFoundationGet('o3-color-palette-black');
+	$inverse-color: oPrivateColorsGetTextColor($inverse-background, 100);
 
 	.o-teaser__heading a:hover,
 	.o-teaser__heading a:focus,
@@ -54,8 +54,8 @@
 
 /// Opinion background theme - colours background blue and adjust text
 @mixin _oTeaserOpinionBackground {
-	$theme-opinion-color: oPrivateFoundationGet('o3-color-palette-sky');
 	$theme-opinion-background: oPrivateFoundationGet('o3-color-palette-sky');
+	$theme-opinion-color: oPrivateColorsGetTextColor($theme-opinion-background, 100);
 	.o-teaser__standfirst,
 	.o-teaser__timestamp {
 		color: oPrivateColorsMix($theme-opinion-color, $theme-opinion-background, $percentage: 60);
@@ -82,8 +82,8 @@
 
 /// Highlight theme - colours background claret and adjust text colours
 @mixin _oTeaserHighlight {
-	$theme-highlight-color: oPrivateFoundationGet('o3-color-palette-claret');
 	$theme-highlight-background: oPrivateFoundationGet('o3-color-palette-claret');
+	$theme-highlight-color: oPrivateColorsGetTextColor($theme-highlight-background, 100);
 	.o-teaser__heading a:hover,
 	.o-teaser__heading a:focus,
 	.o-teaser__heading a:visited,

diff --git a/components/o-teaser/src/scss/themes/_top-stories.scss b/components/o-teaser/src/scss/themes/_top-stories.scss
@@ -6,15 +6,23 @@
 	}
 
 	.o-teaser__heading {
-		@include oPrivateTypographyDisplay(5);
-		line-height: 1;
+		font-family: oPrivateFoundationGet('o3-typography-use-case-headline-md-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-headline-md-font-size');
+		font-weight: oPrivateFoundationGet('o3-typography-use-case-headline-md-font-weight');
+		line-height: oPrivateFoundationGet('o3-typography-use-case-headline-md-line-height');
 		@include oPrivateGridRespondTo('L') {
-			@include oPrivateTypographyDisplay(7);
+			font-family: oPrivateFoundationGet('o3-typography-use-case-headline-lg-font-family');
+			font-size: oPrivateFoundationGet('o3-font-size-7');
+			font-weight: oPrivateFoundationGet('o3-typography-use-case-headline-lg-font-weight');
+			line-height: oPrivateFoundationGet('o3-font-lineheight-7');
 		}
 	}
 
 	.o-teaser__standfirst {
-		@include oPrivateTypographySans(2);
+		font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
+		font-weight: oPrivateFoundationGet('o3-typography-use-case-body-base-font-weight');
+		line-height: oPrivateFoundationGet('o3-typography-use-case-body-base-line-height');
 	}
 }
 

diff --git a/components/o-topper/demos/src/branded.mustache b/components/o-topper/demos/src/branded.mustache
@@ -1,4 +1,4 @@
-<div class="o-topper o-topper--branded o-topper--color-o3-colo-palette-wheat">
+<div class="o-topper o-topper--branded o-topper--color-o3-color-palette-wheat">
 	<div class="o-topper__content">
 		<div class="o-topper__tags">
 			<a href="https://www.ft.com/stream/c65ad97e-ccf0-4b6a-b34a-0e03744a9431" class="o-topper__brand">