@financial-times/o-topper 7.1.2 → 7.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/MIGRATION.md +5 -6
  3. package/demos/src/deep-portrait.mustache +3 -3
  4. package/demos/src/full-bleed-image-center.mustache +4 -4
  5. package/demos/src/full-bleed-image-left.mustache +4 -4
  6. package/demos/src/full-bleed-offset-right-rail.mustache +4 -4
  7. package/demos/src/full-bleed-offset.mustache +4 -4
  8. package/demos/src/opinion.mustache +1 -1
  9. package/demos/src/pa11y.mustache +21 -21
  10. package/demos/src/package-extra.mustache +3 -3
  11. package/demos/src/package.mustache +3 -3
  12. package/demos/src/split-text-center.mustache +3 -3
  13. package/demos/src/split-text-left.mustache +3 -3
  14. package/package.json +1 -1
  15. package/src/scss/themes/_branded.scss +13 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # Changelog
2
2
 
3
+ ## [7.1.4](https://github.com/Financial-Times/origami/compare/o-topper-v7.1.3...o-topper-v7.1.4) (2026-02-25)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * Correct the URL scheme for one path ([917970e](https://github.com/Financial-Times/origami/commit/917970e197423c4d6bdbb3671f4f89dd3dd2ba60))
9
+ * Correct the URL scheme for one path ([82a37fd](https://github.com/Financial-Times/origami/commit/82a37fd24b19dec3652be2dca738c5a5716a7402))
10
+ * remove a space in the url ([ddf089c](https://github.com/Financial-Times/origami/commit/ddf089c7b1dc7caf93d27eee73e3f73b7c2665f7))
11
+ * remove a space in the url ([ab5584f](https://github.com/Financial-Times/origami/commit/ab5584f8fd3d3ae9fef2748bfd2019b8e6c89113))
12
+ * Update all locations of Image Service sources with a valid source ([789ca8b](https://github.com/Financial-Times/origami/commit/789ca8b29b8369698006b478e4c66ee22fb9c5c0))
13
+ * Update all locations of Image Service sources with a valid source ([0af78c9](https://github.com/Financial-Times/origami/commit/0af78c9bacf665b6ea124193593881d0bf7aa765))
14
+
15
+ ## [7.1.3](https://github.com/Financial-Times/origami/compare/o-topper-v7.1.2...o-topper-v7.1.3) (2026-01-15)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * ci-2860 add padding to avoid overlap ([3c68843](https://github.com/Financial-Times/origami/commit/3c688439c098576e397fbea656769e6fc6502381))
21
+ * ci-2860 add padding to avoid overlap ([95b72ae](https://github.com/Financial-Times/origami/commit/95b72ae1fe05e485c54b371f62ff3194e815bca7))
22
+
3
23
  ## [7.1.2](https://github.com/Financial-Times/origami/compare/o-topper-v7.1.1...o-topper-v7.1.2) (2025-10-28)
4
24
 
5
25
 
package/MIGRATION.md CHANGED
@@ -21,13 +21,12 @@ To upgrade, replace the following "o2" components with their "o3" equivalent:
21
21
 
22
22
  `o-topper` no longer includes JavaScript to select the correct topper for JSON-formatted FT articles and flags. This helper was deeply tied to the FT.com content store, and included hardcoded UUIDs and business logic beyond the scope of Origami. Origami components focus on providing reusable user interfaces – without business logic assumptions which could limit their use outside specific groups or use-cases.
23
23
 
24
- To migrate, replace `o-topper` JavaScript with [`n-map-content-to-topper`](https://github.com/Financial-Times/n-map-content-to-topper).
24
+ Logic for topper selection is now handled in the Topper model in [`cp-content-pipeline`](https://github.com/financial-times/cp-content-pipeline/). The previous library for this, [`n-map-content-to-topper`](https://github.com/Financial-Times/n-map-content-to-topper), is now archived.
25
25
 
26
- ```diff
27
- -import { mapContentToTopper } from '@financial-times/o-topper';
28
- +import mapContentToTopper from '@financial-times/n-map-content-to-topper';
29
- const topper = mapContentToTopper(ftArticle, flags);
30
- ```
26
+
27
+ <del>
28
+ To migrate, replace `o-topper` JavaScript with [`n-map-content-to-topper`](https://github.com/Financial-Times/n-map-content-to-topper).
29
+ </del>
31
30
 
32
31
  ## Migrating from v4 to v5
33
32
 
package/demos/src/deep-portrait.mustache CHANGED
@@ -15,11 +15,11 @@
15
15
 
16
16
  <figure class="o-topper__visual">
17
17
  <picture class="o-topper__picture">
18
- <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/81988afb-56ea-47d3-832d-8f06eb2e7cc3.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
18
+ <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/81988afb-56ea-47d3-832d-8f06eb2e7cc3.jpg?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
19
19
 
20
- <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/81988afb-56ea-47d3-832d-8f06eb2e7cc3.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
20
+ <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/81988afb-56ea-47d3-832d-8f06eb2e7cc3.jpg?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
21
21
 
22
- <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/81988afb-56ea-47d3-832d-8f06eb2e7cc3.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
22
+ <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/81988afb-56ea-47d3-832d-8f06eb2e7cc3.jpg?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800">
23
23
  </picture>
24
24
  <figcaption class="o-topper__image-caption">
25
25
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
package/demos/src/full-bleed-image-center.mustache CHANGED
@@ -13,10 +13,10 @@
13
13
 
14
14
  <figure class="o-topper__visual">
15
15
  <picture class="o-topper__picture">
16
- <source media="(min-width: 491px) and (max-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/70d20ddc-f8d6-4d47-a448-0f40b48c0985.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
17
- <source media="(max-width: 490px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/d170d4af-a0b9-4bcc-bb0a-59327dc4e7bf.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
18
- <source media="(min-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/0c368ecb-3d2d-4bf2-be88-2befb42c45f8.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
19
- <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/c41b7e70-fe88-4789-818e-3bacf0f65980.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
16
+ <source media="(min-width: 491px) and (max-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/70d20ddc-f8d6-4d47-a448-0f40b48c0985.jpg?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
17
+ <source media="(max-width: 490px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/d170d4af-a0b9-4bcc-bb0a-59327dc4e7bf.jpg?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
18
+ <source media="(min-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/0c368ecb-3d2d-4bf2-be88-2befb42c45f8.jpg?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
19
+ <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/c41b7e70-fe88-4789-818e-3bacf0f65980.jpg?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
20
20
  </picture>
21
21
  <figcaption class="o-topper__image-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</figcaption>
22
22
  </figure>
package/demos/src/full-bleed-image-left.mustache CHANGED
@@ -13,10 +13,10 @@
13
13
 
14
14
  <figure class="o-topper__visual">
15
15
  <picture class="o-topper__picture">
16
- <source media="(min-width: 491px) and (max-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/70d20ddc-f8d6-4d47-a448-0f40b48c0985.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
17
- <source media="(max-width: 490px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/d170d4af-a0b9-4bcc-bb0a-59327dc4e7bf.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
18
- <source media="(min-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/0c368ecb-3d2d-4bf2-be88-2befb42c45f8.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
19
- <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/c41b7e70-fe88-4789-818e-3bacf0f65980.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
16
+ <source media="(min-width: 491px) and (max-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/70d20ddc-f8d6-4d47-a448-0f40b48c0985.jpg?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
17
+ <source media="(max-width: 490px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/d170d4af-a0b9-4bcc-bb0a-59327dc4e7bf.jpg?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
18
+ <source media="(min-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/0c368ecb-3d2d-4bf2-be88-2befb42c45f8.jpg?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
19
+ <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/https://d1e00ek4ebabms.cloudfront.net/production/c41b7e70-fe88-4789-818e-3bacf0f65980.jpg?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
20
20
  </picture>
21
21
  <figcaption class="o-topper__image-credit">@FT</figcaption>
22
22
  </figure>
package/demos/src/full-bleed-offset-right-rail.mustache CHANGED
@@ -18,10 +18,10 @@
18
18
 
19
19
  <figure class="o-topper__visual">
20
20
  <picture class="o-topper__picture">
21
- <source media="(max-width: 490px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/42da357a-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
22
- <source media="(max-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
23
- <source media="(min-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/402afdfa-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
24
- <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
21
+ <source media="(max-width: 490px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/42da357a-f78e-11e7-8715-e94187b3017e?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
22
+ <source media="(max-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
23
+ <source media="(min-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/402afdfa-f78e-11e7-8715-e94187b3017e?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
24
+ <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
25
25
  </picture>
26
26
  <figcaption class="o-topper__image-credit">© Bloomberg</figcaption>
27
27
  </figure>
package/demos/src/full-bleed-offset.mustache CHANGED
@@ -18,10 +18,10 @@
18
18
 
19
19
  <figure class="o-topper__visual">
20
20
  <picture class="o-topper__picture">
21
- <source media="(max-width: 490px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/42da357a-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
22
- <source media="(max-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
23
- <source media="(min-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/402afdfa-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
24
- <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
21
+ <source media="(max-width: 490px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/42da357a-f78e-11e7-8715-e94187b3017e?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
22
+ <source media="(max-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
23
+ <source media="(min-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/402afdfa-f78e-11e7-8715-e94187b3017e?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
24
+ <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
25
25
  </picture>
26
26
  <figcaption class="o-topper__image-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo © Bloomberg</figcaption>
27
27
  </figure>
package/demos/src/opinion.mustache CHANGED
@@ -24,7 +24,7 @@
24
24
  </div>
25
25
 
26
26
  <div class="o-topper__headshot">
27
- <img class="o-topper__headshot-image" src="https://images.ft.com/v3/image/raw/fthead-v1:gillian-tett?source=origami-build-tools&amp;fit=scale-down&amp;width=150&amp;compression=best&amp;quality=highest&amp;dpr=2" role="presentation">
27
+ <img class="o-topper__headshot-image" src="https://images.ft.com/v3/image/raw/fthead-v1:gillian-tett?source=origami&amp;fit=scale-down&amp;width=150&amp;compression=best&amp;quality=highest&amp;dpr=2" role="presentation">
28
28
  </div>
29
29
  </div>
30
30
 
package/demos/src/pa11y.mustache CHANGED
@@ -45,10 +45,10 @@
45
45
 
46
46
  <figure class="o-topper__visual">
47
47
  <picture class="o-topper__picture">
48
- <source media="(max-width: 490px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/194b5a92-9486-11e7-a9e6-11d2f0ebb7f0?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
49
- <source media="(max-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/37f4c8fc-9486-11e7-a9e6-11d2f0ebb7f0?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
50
- <source media="(min-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/13d2136c-9486-11e7-a9e6-11d2f0ebb7f0?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
51
- <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/37f4c8fc-9486-11e7-a9e6-11d2f0ebb7f0?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
48
+ <source media="(max-width: 490px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/194b5a92-9486-11e7-a9e6-11d2f0ebb7f0?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
49
+ <source media="(max-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/37f4c8fc-9486-11e7-a9e6-11d2f0ebb7f0?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
50
+ <source media="(min-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/13d2136c-9486-11e7-a9e6-11d2f0ebb7f0?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
51
+ <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/37f4c8fc-9486-11e7-a9e6-11d2f0ebb7f0?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
52
52
  </picture>
53
53
  </figure>
54
54
  </div>
@@ -72,10 +72,10 @@
72
72
 
73
73
  <figure class="o-topper__visual">
74
74
  <picture class="o-topper__picture">
75
- <source media="(max-width: 490px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/42da357a-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
76
- <source media="(max-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
77
- <source media="(min-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/402afdfa-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
78
- <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
75
+ <source media="(max-width: 490px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/42da357a-f78e-11e7-8715-e94187b3017e?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
76
+ <source media="(max-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
77
+ <source media="(min-width: 1220px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/402afdfa-f78e-11e7-8715-e94187b3017e?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
78
+ <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
79
79
  </picture>
80
80
  <figcaption class="o-topper__image-credit">© Bloomberg</figcaption>
81
81
  </figure>
@@ -106,7 +106,7 @@
106
106
  </div>
107
107
 
108
108
  <div class="o-topper__headshot">
109
- <img class="o-topper__headshot-image" src="https://images.ft.com/v3/image/raw/fthead-v1:gillian-tett?source=origami-build-tools&amp;fit=scale-down&amp;width=150&amp;compression=best&amp;quality=highest&amp;dpr=2" role="presentation">
109
+ <img class="o-topper__headshot-image" src="https://images.ft.com/v3/image/raw/fthead-v1:gillian-tett?source=origami&amp;fit=scale-down&amp;width=150&amp;compression=best&amp;quality=highest&amp;dpr=2" role="presentation">
110
110
  </div>
111
111
  </div>
112
112
 
@@ -127,11 +127,11 @@
127
127
 
128
128
  <figure class="o-topper__visual">
129
129
  <picture class="o-topper__picture">
130
- <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/4fe8c9c0-36f5-11e7-bce4-9023f8c0fd2e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
130
+ <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/4fe8c9c0-36f5-11e7-bce4-9023f8c0fd2e?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
131
131
 
132
- <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/1e786f9e-36f5-11e7-99bd-13beb0903fa3?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
132
+ <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/1e786f9e-36f5-11e7-99bd-13beb0903fa3?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
133
133
 
134
- <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/1e786f9e-36f5-11e7-99bd-13beb0903fa3?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
134
+ <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/1e786f9e-36f5-11e7-99bd-13beb0903fa3?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800">
135
135
  </picture>
136
136
  <figcaption class="o-topper__image-credit">© FT montage</figcaption>
137
137
  </figure>
@@ -151,9 +151,9 @@
151
151
 
152
152
  <figure class="o-topper__visual">
153
153
  <picture class="o-topper__picture">
154
- <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/87c44eba-a823-11e7-ab55-27219df83c97?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
155
- <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/8c35d22a-a823-11e7-ab55-27219df83c97?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
156
- <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/aed45398-a99e-11e7-93c5-648314d2c72c?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
154
+ <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/87c44eba-a823-11e7-ab55-27219df83c97?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
155
+ <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/8c35d22a-a823-11e7-ab55-27219df83c97?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
156
+ <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/aed45398-a99e-11e7-93c5-648314d2c72c?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800">
157
157
  </picture>
158
158
  </figure>
159
159
  </div>
@@ -177,11 +177,11 @@
177
177
 
178
178
  <figure class="o-topper__visual">
179
179
  <picture class="o-topper__picture">
180
- <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/87dd1db8-3ba5-11e7-821a-6027b8a20f23?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
180
+ <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/87dd1db8-3ba5-11e7-821a-6027b8a20f23?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
181
181
 
182
- <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/6ddeb85e-3ba5-11e7-ac89-b01cc67cfeec?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
182
+ <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/6ddeb85e-3ba5-11e7-ac89-b01cc67cfeec?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
183
183
 
184
- <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/6ddeb85e-3ba5-11e7-ac89-b01cc67cfeec?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
184
+ <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/6ddeb85e-3ba5-11e7-ac89-b01cc67cfeec?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800">
185
185
  </picture>
186
186
 
187
187
  <figcaption class="o-topper__image-credit">© Ollanski</figcaption>
@@ -204,11 +204,11 @@
204
204
 
205
205
  <figure class="o-topper__visual">
206
206
  <picture class="o-topper__picture">
207
- <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/3eceaf1e-61a3-11e7-91a7-502f7ee26895?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
207
+ <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/3eceaf1e-61a3-11e7-91a7-502f7ee26895?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
208
208
 
209
- <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/6b7b8578-61a3-11e7-91a7-502f7ee26895?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
209
+ <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/6b7b8578-61a3-11e7-91a7-502f7ee26895?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
210
210
 
211
- <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/97a49d16-61e8-11e7-8814-0ac7eb84e5f1?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
211
+ <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/97a49d16-61e8-11e7-8814-0ac7eb84e5f1?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800">
212
212
  </picture>
213
213
  <figcaption class="o-topper__image-credit">© KMG/SWNS.com</figcaption>
214
214
  </figure>
package/demos/src/package-extra.mustache CHANGED
@@ -13,11 +13,11 @@
13
13
 
14
14
  <figure class="o-topper__visual">
15
15
  <picture class="o-topper__picture">
16
- <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/4fe8c9c0-36f5-11e7-bce4-9023f8c0fd2e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
16
+ <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/4fe8c9c0-36f5-11e7-bce4-9023f8c0fd2e?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
17
17
 
18
- <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/1e786f9e-36f5-11e7-99bd-13beb0903fa3?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
18
+ <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/1e786f9e-36f5-11e7-99bd-13beb0903fa3?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
19
19
 
20
- <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/1e786f9e-36f5-11e7-99bd-13beb0903fa3?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
20
+ <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/1e786f9e-36f5-11e7-99bd-13beb0903fa3?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800">
21
21
  </picture>
22
22
  <figcaption class="o-topper__image-credit">© FT montage</figcaption>
23
23
  </figure>
package/demos/src/package.mustache CHANGED
@@ -13,9 +13,9 @@
13
13
 
14
14
  <figure class="o-topper__visual">
15
15
  <picture class="o-topper__picture">
16
- <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/87c44eba-a823-11e7-ab55-27219df83c97?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
17
- <source media="(min-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/8c35d22a-a823-11e7-ab55-27219df83c97?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
18
- <img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/aed45398-a99e-11e7-93c5-648314d2c72c?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
16
+ <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/87c44eba-a823-11e7-ab55-27219df83c97?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
17
+ <source media="(min-width: 1440px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://prod-upp-image-read.ft.com/8c35d22a-a823-11e7-ab55-27219df83c97?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800">
18
+ <img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/aed45398-a99e-11e7-93c5-648314d2c72c?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800">
19
19
  </picture>
20
20
  </figure>
21
21
  </div>
package/demos/src/split-text-center.mustache CHANGED
@@ -18,11 +18,11 @@
18
18
 
19
19
  <figure class="o-topper__visual">
20
20
  <picture class="o-topper__picture">
21
- <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/87dd1db8-3ba5-11e7-821a-6027b8a20f23?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
21
+ <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/87dd1db8-3ba5-11e7-821a-6027b8a20f23?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
22
22
 
23
- <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/6ddeb85e-3ba5-11e7-ac89-b01cc67cfeec?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
23
+ <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/6ddeb85e-3ba5-11e7-ac89-b01cc67cfeec?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
24
24
 
25
- <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/6ddeb85e-3ba5-11e7-ac89-b01cc67cfeec?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
25
+ <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/6ddeb85e-3ba5-11e7-ac89-b01cc67cfeec?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800">
26
26
  </picture>
27
27
 
28
28
  <figcaption class="o-topper__image-credit">© Ollanski</figcaption>
package/demos/src/split-text-left.mustache CHANGED
@@ -15,11 +15,11 @@
15
15
 
16
16
  <figure class="o-topper__visual">
17
17
  <picture class="o-topper__picture">
18
- <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/3eceaf1e-61a3-11e7-91a7-502f7ee26895?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
18
+ <source media="(max-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/3eceaf1e-61a3-11e7-91a7-502f7ee26895?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=720 720w">
19
19
 
20
- <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/6b7b8578-61a3-11e7-91a7-502f7ee26895?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
20
+ <source media="(min-width: 1440px)" srcset="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/6b7b8578-61a3-11e7-91a7-502f7ee26895?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800 800w">
21
21
 
22
- <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/97a49d16-61e8-11e7-8814-0ac7eb84e5f1?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=800">
22
+ <img alt="" class="o-topper__image" src="https://images.ft.com/v3/image/raw/http://prod-upp-image-read.ft.com/97a49d16-61e8-11e7-8814-0ac7eb84e5f1?source=origami&amp;fit=scale-down&amp;quality=highest&amp;width=800">
23
23
  </picture>
24
24
  <figcaption class="o-topper__image-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo </figcaption>
25
25
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/o-topper",
3
- "version": "7.1.2",
3
+ "version": "7.1.4",
4
4
  "description": "Article header styling",
5
5
  "keywords": [
6
6
  "topper",
package/src/scss/themes/_branded.scss CHANGED
@@ -46,6 +46,19 @@
46
46
  );
47
47
  }
48
48
  }
49
+ // Add padding to prevent headline text colliding with headshot
50
+ // not needed for opinion toppers as they have a different layout
51
+ // meaning there is no risk of collision and we want the headline
52
+ // to take up all of the available space where possible
53
+ &:not(.o-topper--opinion) {
54
+ .o-topper__headline {
55
+ @include oPrivateGridRespondTo($until: M) {
56
+ padding-right: calc(
57
+ #{$_o-topper-headshot-width} + #{oPrivateSpacingByName('s3')}
58
+ );
59
+ }
60
+ }
61
+ }
49
62
  }
50
63
 
51
64
  @mixin _oTopperThemeOpinion {