UNPKG

@financial-times/o-topper

Version:

Article header styling

registry.origami.ft.com/components/o-topper

302 lines (150 loc) • 15.2 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
# Changelog ## [7.0.9](https://github.com/Financial-Times/origami/compare/o-topper-v7.0.8...o-topper-v7.0.9) (2025-06-25) ### Bug Fixes * remove negative margins in o-topper ([8930853](https://github.com/Financial-Times/origami/commit/8930853fbca928ede656713f5086addd344facf3)) ## [7.0.8](https://github.com/Financial-Times/origami/compare/o-topper-v7.0.7...o-topper-v7.0.8) (2025-06-13) ### Bug Fixes * add read-next to oTopperColor mixin ([fdefca6](https://github.com/Financial-Times/origami/commit/fdefca646e68c9fdda2878c7bedc12b3bd14747c)) ## [7.0.7](https://github.com/Financial-Times/origami/compare/o-topper-v7.0.6...o-topper-v7.0.7) (2025-06-03) ### Bug Fixes * o-topper, prevent myft/headshot overlay ([f567b15](https://github.com/Financial-Times/origami/commit/f567b15311d5956d8ba1572c067d30e252b919dc)) ## [7.0.6](https://github.com/Financial-Times/origami/compare/o-topper-v7.0.5...o-topper-v7.0.6) (2025-06-03) ### Bug Fixes * Correct o-topper__image-caption background ([b6af900](https://github.com/Financial-Times/origami/commit/b6af900c9315994218fa0008e195116b8aa587db)) ## [7.0.5](https://github.com/Financial-Times/origami/compare/o-topper-v7.0.4...o-topper-v7.0.5) (2025-05-28) ### Bug Fixes * ci-2809 o-topper fix text under headshot ([f4c5cb1](https://github.com/Financial-Times/origami/commit/f4c5cb1d1f95caf7433fb1c1030b13ac63f63cc2)) ## [7.0.4](https://github.com/Financial-Times/origami/compare/o-topper-v7.0.3...o-topper-v7.0.4) (2025-04-30) ### Bug Fixes * Revert o-topper breaking markup change ([2086102](https://github.com/Financial-Times/origami/commit/2086102c76037b8389f8a59f10ad5c41488be5aa)) ## [7.0.3](https://github.com/Financial-Times/origami/compare/o-topper-v7.0.2...o-topper-v7.0.3) (2025-04-29) ### Bug Fixes * Remove _o-topper__tag anchor colour unset ([82b5e22](https://github.com/Financial-Times/origami/commit/82b5e22d509e43b8bb95f05188deab80fb63fb5e)) ## [7.0.2](https://github.com/Financial-Times/origami/compare/o-topper-v7.0.1...o-topper-v7.0.2) (2025-04-10) ### Bug Fixes * Align o-topper__headline with o3 ([b3f342a](https://github.com/Financial-Times/origami/commit/b3f342a188af96e82a2d2b57a2ff8be43973a71e)) ## [7.0.1](https://github.com/Financial-Times/origami/compare/o-topper-v7.0.0...o-topper-v7.0.1) (2025-02-26) ### Bug Fixes * Remove o-colors references ([b7d8c6a](https://github.com/Financial-Times/origami/commit/b7d8c6a3d5d01c03c37cc8e0d57fa40f06361d38)) * Remove unused o-buttons reference ([1be12a8](https://github.com/Financial-Times/origami/commit/1be12a809a44421541412363671445477454656a)) * Remove unused o-icons iSass imports ([e8b105f](https://github.com/Financial-Times/origami/commit/e8b105fa887fbc50e5030fb1f398989df290046b)) ## [7.0.0](https://github.com/Financial-Times/origami/compare/o-topper-v6.0.8...o-topper-v7.0.0) (2025-02-20) ### ⚠ BREAKING CHANGES This introduces a new design language and visually breaking changes. Including mobile optimised typography, icons, and buttons (see [MIGRATION.md](./MIGRATION.md)). #### Origami 3: Principles, Purpose, and Impact For anyone in P&T. We covered what’s new in Origami 3 (o3), why it matters, and what’s next. [Slides](https://docs.google.com/presentation/d/1Qs8RHpMrDxxP5LyrVlnsUHnS3AriRK5-IboUeneRyMs/edit#slide=id.g764506c38c_0_357) | [Recording](https://drive.google.com/file/d/1OMW9zdTOEUvWyW1trsFqL3XhpTejYelO/view) #### Origami 3: Bridging design & code For designers and engineers alike. How to work with design guidelines, design foundations, and techniques for designer–engineer collaboration. [Slides](https://docs.google.com/presentation/d/1pGBKFNv-g8RbY2g3SJ7v823XBI-MQqpjHrdgg9B6bzI/edit#slide=id.g764506c38c_0_357) | [Recording](https://drive.google.com/file/d/14hWVKM690arNEWROPHx9gmebnOUa6wlM/view) #### Origami 3: Engineers’ Deep Dive We got into the technical detail. Working with Origami CSS (no more Sass), custom elements, JSX templates, etc. [Slides](https://docs.google.com/presentation/d/1s1S959CwZYnd0Q89EhsDFLFUuy2HZ9UnpBVaDHDFX7A/edit#slide=id.g3347c4befb5_0_402) | [Recording](https://drive.google.com/file/d/1hDtSN8Ce_P0Vr_dv0KXuXhs5Q9aHfvAp/view) ## [6.0.8](https://github.com/Financial-Times/origami/compare/o-topper-v6.0.7...o-topper-v6.0.8) (2023-10-27) ### Bug Fixes - Update node and npm ([c371fc3](https://github.com/Financial-Times/origami/commit/c371fc3f7f2d66266dbca95862ecef3ddeb1f339)) ## [6.0.7](https://github.com/Financial-Times/origami/compare/o-topper-v6.0.6...o-topper-v6.0.7) (2023-08-25) ### Bug Fixes - update o-typography dependency ([fb45b47](https://github.com/Financial-Times/origami/commit/fb45b47274241ea828f7dd50233441a76a215a51)) ### [6.0.6](https://www.github.com/Financial-Times/origami/compare/o-topper-v6.0.5...o-topper-v6.0.6) (2023-04-28) ### Bug Fixes - Require latest minor version of o-colors, o-buttons, and o-forms ([#1098](https://www.github.com/Financial-Times/origami/issues/1098)) ([b856ca6](https://www.github.com/Financial-Times/origami/commit/b856ca66c9ec555f3c70833ffa35cb05cd19841f)) ### [6.0.5](https://www.github.com/Financial-Times/origami/compare/o-topper-v6.0.4...o-topper-v6.0.5) (2023-04-11) ### Bug Fixes - change outline color for focus links under matisse theme ([7e5b1be](https://www.github.com/Financial-Times/origami/commit/7e5b1be95e1f49be53b511f3478f187dd86121c8)) ### [6.0.4](https://www.github.com/Financial-Times/origami/compare/o-topper-v6.0.3...o-topper-v6.0.4) (2023-03-29) ### Bug Fixes - change opacity background box ([946e6a6](https://www.github.com/Financial-Times/origami/commit/946e6a6c312a1fcf706ec3c79359699c73597e94)) ### [6.0.3](https://www.github.com/Financial-Times/origami/compare/o-topper-v6.0.2...o-topper-v6.0.3) (2023-03-13) ### Bug Fixes - set new margin bottom deep-landscape ([d95bec9](https://www.github.com/Financial-Times/origami/commit/d95bec9c8e98d769d62dd88bd7a196c598cd6141)) ### [6.0.2](https://www.github.com/Financial-Times/origami/compare/o-topper-v6.0.1...o-topper-v6.0.2) (2023-03-08) ### Bug Fixes - remove unnecesary margin deep-portrait ([aa80b54](https://www.github.com/Financial-Times/origami/commit/aa80b542cd34d0a33d2e518cf52bf09591587ad4)) ### [6.0.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v6.0.0...o-topper-v6.0.1) (2023-03-08) ### Bug Fixes - Remove standfirst opacity from the deep-landscape topper variant. ([b1a7bf7](https://www.github.com/Financial-Times/origami/commit/b1a7bf73f4a7ebd163622f749c847a9daf52e5f9)) - Remove the caption boarder from the deep-portrait topper variant. ([dfe8598](https://www.github.com/Financial-Times/origami/commit/dfe8598ec137040efb977050490183ca9c81d3b4)) ## [6.0.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.8.0...o-topper-v6.0.0) (2023-03-07) ### ⚠ BREAKING CHANGES - o-topper, remove JS including `n-map-content-to-topper` dependency. (#1031) ### Features - o-topper, remove JS including `n-map-content-to-topper` dependency. ([#1031](https://www.github.com/Financial-Times/origami/issues/1031)) ([a7aa280](https://www.github.com/Financial-Times/origami/commit/a7aa280a363dad91e959903eb36ed7286ffac203)) ## [5.8.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.7.4...o-topper-v5.8.0) (2023-03-06) ### Features - Add a "deep landscape" o-topper variant with a background box behind content, for use on complex backgrounds where legibility is reduced. ### [5.7.4](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.7.3...o-topper-v5.7.4) (2023-02-08) ### Bug Fixes - o-topper, reposition deep landscape copy ([#992](https://www.github.com/Financial-Times/origami/issues/992)) ([4f9db10](https://www.github.com/Financial-Times/origami/commit/4f9db1079da6cba254975eacb14e231815f32e30)) ### [5.7.3](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.7.2...o-topper-v5.7.3) (2023-02-01) ### Bug Fixes - o-topper: remove the headline underline from the deep portrait variant ([#988](https://www.github.com/Financial-Times/origami/issues/988)) ([be44f05](https://www.github.com/Financial-Times/origami/commit/be44f054a60500d1429dddc5cd581f3d48bd6ed0)) ### [5.7.2](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.7.1...o-topper-v5.7.2) (2023-01-31) ### Bug Fixes - Improve the headline positioning of the deep-portrait variant ([1ab5323](https://www.github.com/Financial-Times/origami/commit/1ab53239653a88bc6898f1af6784b8976d44dd1d)) ### [5.7.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.7.0...o-topper-v5.7.1) (2023-01-04) ### Bug Fixes - Use `rgba` for `rgba` value ([b3562e2](https://www.github.com/Financial-Times/origami/commit/b3562e20582a211704ca67495d89af3bb2576e97)) ## [5.7.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.6.4...o-topper-v5.7.0) (2023-01-04) ### Features - o-topper, add a `deep-landscape` topper ([91cccfe](https://www.github.com/Financial-Times/origami/commit/91cccfe68c9b0fc7c8ba1805c2f904d6680c8bd3)) ### [5.6.4](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.6.3...o-topper-v5.6.4) (2022-12-21) ### Bug Fixes - require 3.3.0 or higher ([fc180c6](https://www.github.com/Financial-Times/origami/commit/fc180c619755daa1b7bfe65509f354cf0de113bf)) ### [5.6.3](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.6.2...o-topper-v5.6.3) (2022-12-20) ### Bug Fixes - update n-map-content-to-topper to 3.2.0 ([a1c6cb3](https://www.github.com/Financial-Times/origami/commit/a1c6cb36a7a6bb5b4a8ba96ab45b68f6f800dd59)) ### [5.6.2](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.6.1...o-topper-v5.6.2) (2022-12-14) ### Bug Fixes - Rename `o-topper--split-text-portrait-left` to `o-topper--deep-portrait` – this is [technically a breaking change but is being treated as a minor release](https://github.com/Financial-Times/origami/pull/923#pullrequestreview-1217595762) in this case ([78e5da8](https://www.github.com/Financial-Times/origami/commit/78e5da879465029caa11dd2f3d256f7f89b34857)) ## [5.6.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.6.0...o-topper-v5.6.1) (2022-12-14) ### Features - Improve the design of the split-text-portrait-left topper (also known as deep portrait). ([https://github.com/Financial-Times/origami/pull/920](https://github.com/Financial-Times/origami/pull/920)) ## [5.6.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.5.1...o-topper-v5.6.0) (2022-12-02) ### Features - Add new topper, split-text-portrait-left. ([a8197da](https://www.github.com/Financial-Times/origami/commit/a8197da3850193971db9b200e5ac9b979014fdcc)) ### [5.5.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.5.0...o-topper-v5.5.1) (2022-11-24) ### Bug Fixes - move to the left position of the credit element ([6749a5f](https://www.github.com/Financial-Times/origami/commit/6749a5f155126143f738bae7adee981225ce6c3a)) ## [5.5.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.4.2...o-topper-v5.5.0) (2022-11-23) ### Features - Introduce an image caption element, to compliment the existing credit element. Only use the credit element when there is a credit to display and no image caption. Otherwise use the image caption element to display both caption and any credit. ([2bb7988](https://www.github.com/Financial-Times/origami/commit/2bb79886b7db19920883e61a192cccef926d8af2)) ### Bug Fixes - add credit to example ([005e3b4](https://www.github.com/Financial-Times/origami/commit/005e3b4c90cd30d95bce8e188b84d1d7980a5fe4)) - fix pa11y error on demos only one figcaption is alowed ([d71c350](https://www.github.com/Financial-Times/origami/commit/d71c350805a0823cafca734a4345b94bc067fec6)) - update README ([09f7cec](https://www.github.com/Financial-Times/origami/commit/09f7cec15a57491c52a0423c89ea373f8f02c61b)) ### [5.4.2](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.4.1...o-topper-v5.4.2) (2022-11-16) ### Bug Fixes - remove background from figcaption on toppers ([df93a9a](https://www.github.com/Financial-Times/origami/commit/df93a9a61aee25339a737c959df87d30cb29d4b9)) ### [5.4.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.4.0...o-topper-v5.4.1) (2022-11-16) ### Bug Fixes - support o-topper within a snappy grid container ([6c6f20a](https://www.github.com/Financial-Times/origami/commit/6c6f20a78916f447820380af93161fd1414b794c)) ## [5.4.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.3.1...o-topper-v5.4.0) (2022-11-15) ### Features - Updates caption position for improved contrast. Adds additional demos to the registry which were previously missing. [pr 877](https://github.com/Financial-Times/origami/pull/877) ### [5.3.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.3.0...o-topper-v5.3.1) (2022-09-01) ### Bug Fixes - update n-map-content-to-topper to support alphaville article page branding ## [5.3.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.2.3...o-topper-v5.3.0) (2022-09-01) ### Features - add mattisee o-topper colour for Alphaville ### [5.2.3](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.2.2...o-topper-v5.2.3) (2022-01-13) ### Bug Fixes - expand all uses of docs to documentation ([26f8d9d](https://www.github.com/Financial-Times/origami/commit/26f8d9d8cbbe3e78902d8c3951b37e08150a77bd)) ### [5.2.2](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.2.1...o-topper-v5.2.2) (2021-12-24) ### Bug Fixes - Deprecate the `news-package` topper. This is no longer used. ([980fb8f](https://www.github.com/Financial-Times/origami/commit/980fb8fd9c315008622098913c56f4c85dd181fe)) ### [5.2.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.2.0...o-topper-v5.2.1) (2021-12-14) ### Bug Fixes - Deprecate the `news-package` topper. This is no longer used. ([e4ddf31](https://www.github.com/Financial-Times/origami/commit/e4ddf31ae78f99fe571f77b704fb9180d23504b2)) ## [5.2.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.1.0...o-topper-v5.2.0) (2021-11-24) ### Features - allow npm 8 in engines config ([eeb1cae](https://www.github.com/Financial-Times/origami/commit/eeb1cae6e7f0379e647f2b41240b1f294997d528)) ## [5.1.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.0.2...o-topper-v5.1.0) (2021-11-08) ### Features - Rename master brand in component origami.json ([f642faf](https://www.github.com/Financial-Times/origami/commit/f642faf0574d84ea8185b56e6090c8015def27e6)) ### [5.0.2](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.0.1...o-topper-v5.0.2) (2021-09-21) ### Bug Fixes - Add homepage, bugs and support email to the package.json ([6c0de60](https://www.github.com/Financial-Times/origami/commit/6c0de60ebd6e64c4dd16d000fcc6b79412ce30f4)) - update bugs urls ([3ea0ca0](https://www.github.com/Financial-Times/origami/commit/3ea0ca03bcb6e55142a77387ad0fff5ddf056d44)) - update origami json urls ([c757653](https://www.github.com/Financial-Times/origami/commit/c7576532b5a14f0462d5346dfb63238be025602e))