Financial-Times · notlee · Jan 21, 2025 · Jan 16, 2025 · Jan 16, 2025 · Jan 16, 2025
@@ -21,7 +21,7 @@ const TypeUsecaseTokensByItem = Object.groupBy(TypeUsecaseTokens, (token) => tok
             <h3>{key}</h3>
             <p>{tokens[0].description}</p>
 
-            <PreviewFrame html={`<span class="o3-typography-use-case-${key}">Make sense of all of it</span>`} mark={`class="o3-typography-use-case-${key}`} />
+            <PreviewFrame html={`<span class="o3-typography-use-case-${key}">Make sense of it all</span>`} mark={`class="o3-typography-use-case-${key}`} />
 
             <table class="color-table">
                 <thead>

@@ -8,11 +8,11 @@ const storybookId = `${brand}-o3-editorial-typography--heading`;
 ---
 
 <>
-	<h4>Headline Large</h4>
+	<h4>Display</h4>
 
 	<p>
 		Responsive headlines used for titles and headlines of Main news pages and
-		articles. Usually in the full-bleed topper component. Use in moderation.
+		articles, applying the <a href="#display">display typography use-cases</a>. Usually in the full-bleed topper component. Use in moderation.
 	</p>
 
 	<Preview component={DisplayPreview} />

@@ -1,5 +1,4 @@
 ---
-import {Headline} from '@financial-times/o3-editorial-typography';
 import Preview from '../utils/Preview.astro';
 import * as HeadlinePreview from './preview/Headline';
 import * as Chapter from './preview/Chapter';
@@ -25,7 +24,7 @@ const storybookIdLabel = `${brand}-o3-editorial-typography--label`;
 		href="https://www.ft.com/content/65593173-7f85-47f6-a253-29cc374fd3ca#:~:text=Opinion%20Corporate%20governance-,Sunak%20take%20note%3A%20diluting%20corporate%20governance%20has%20consequences,-Proposed%20reforms%20to"
 	>
 		Opinion
-	</a>
+	</a>. Applies the <a href="#headline">headline typography use-cases</a> in one responsive style.
 </p>
 
 <Preview component={HeadlinePreview} />

@@ -1,19 +1,17 @@
-import {List, Body} from '@financial-times/o3-editorial-typography/esm';
+import {List} from '@financial-times/o3-editorial-typography/esm';
 
 function ListPreview() {
 	return (
 		<>
 			<meta itemProp="@preview" />
-			<Body>
-				<List
-					type="ordered"
-					listItems={[
-						'Lorem ipsum adipiscing elit.',
-						'Sed feugiat turpis at massa tristique.',
-						'Curabitu r accumsan elit luctus.',
-					]}
-				/>
-			</Body>
+			<List
+				type="ordered"
+				listItems={[
+					'Lorem ipsum adipiscing elit.',
+					'Sed feugiat turpis at massa tristique.',
+					'Curabitu r accumsan elit luctus.',
+				]}
+			/>
 			<meta itemProp="@preview" />
 		</>
 	);

@@ -1,19 +1,17 @@
-import {List, Body} from '@financial-times/o3-editorial-typography/esm';
+import {List} from '@financial-times/o3-editorial-typography/esm';
 
 function ListPreview() {
 	return (
 		<>
 			<meta itemProp="@preview" />
-			<Body>
-				<List
-					type="unordered"
-					listItems={[
-						'Lorem ipsum adipiscing elit.',
-						'Sed feugiat turpis at massa tristique.',
-						'Curabitu r accumsan elit luctus.',
-					]}
-				/>
-			</Body>
+			<List
+				type="unordered"
+				listItems={[
+					'Lorem ipsum adipiscing elit.',
+					'Sed feugiat turpis at massa tristique.',
+					'Curabitu r accumsan elit luctus.',
+				]}
+			/>
 			<meta itemProp="@preview" />
 		</>
 	);

@@ -8,10 +8,10 @@ const {brand} = Astro.props
 <Example slot="examples" do title="Group similar inputs to ease the user">
 	<div data-o3-brand={brand}>
 		<Form>
-			<h3 class="o3-typography-h3 grouping-title">Your Details</h3>
+			<h3 class="o3-typography-use-case-title-sm">Your Details</h3>
 			<TextInput label="Email address" attributes={{defaultValue: "[email protected]" }} />
 
-			<h3 class="o3-typography-h3 grouping-title">Your address</h3>
+			<h3 class="o3-typography-use-case-title-sm">Your address</h3>
 			<TextInput label="Country" attributes={{defaultValue: "United Kingdom" }} />
 			<TextInput label="Address" attributes={{defaultValue: "1 Friday St"}} optional={true} />
 		</form>

@@ -1,17 +1,17 @@
-import {OrderedList, Body} from '@financial-times/o3-foundation/esm';
+import {OrderedList} from '@financial-times/o3-foundation/esm';
 
 function ListPreview() {
 	return (
 		<>
-			<Body>
+			<div className="o3-typography-use-case-body-base">
 				<meta itemProp="@preview" />
 				<OrderedList>
 					<li>Lorem ipsum adipiscing elit.</li>
 					<li>Sed feugiat turpis at massa tristique.</li>
 					<li>Curabitu r accumsan elit luctus.</li>
 				</OrderedList>
 				<meta itemProp="@preview" />
-			</Body>
+			</div>
 		</>
 	);
 }

@@ -1,17 +1,17 @@
-import {UnorderedList, Body} from '@financial-times/o3-foundation/esm';
+import {UnorderedList} from '@financial-times/o3-foundation/esm';
 
 function ListPreview() {
 	return (
 		<>
-			<Body>
+			<div className="o3-typography-use-case-body-base">
 				<meta itemProp="@preview" />
 				<UnorderedList>
 					<li>Lorem ipsum adipiscing elit.</li>
 					<li>Sed feugiat turpis at massa tristique.</li>
 					<li>Curabitu r accumsan elit luctus.</li>
 				</UnorderedList>
 				<meta itemProp="@preview" />
-			</Body>
+			</div>
 		</>
 	);
 }