Skip to content

Commit

Permalink
fix: update topper demos
Browse files Browse the repository at this point in the history
  • Loading branch information
frshwtr committed Dec 16, 2024
1 parent 69a3ea1 commit 15c2a93
Show file tree
Hide file tree
Showing 20 changed files with 41 additions and 41 deletions.
24 changes: 12 additions & 12 deletions components/o-topper/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Check out [how to include Origami components in your project](https://origami.ft
The basic markup structure for a topper will look something like this:

```html
<div class="o-topper o-topper--basic o-topper--color-paper">
<div class="o-topper o-topper--basic o-topper--color-o3-color-palette-paper">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/german-election" class="o-topper__topic">German election</a>
Expand Down Expand Up @@ -72,19 +72,19 @@ These themes affect the layout and visual style of all elements. See the [demos]

### Colors

These colors affect the background of the `.o-topper__background` and `.o-topper__visual` elements, and select a contrasting text color for all other elements. See [`o-colors`](http://registry.origami.ft.com/components/o-colors) for examples of the colors.
These colors affect the background of the `.o-topper__background` and `.o-topper__visual` elements, and select a contrasting text color for all other elements.

```
.o-topper--color-paper
.o-topper--color-wheat
.o-topper--color-white
.o-topper--color-black
.o-topper--color-claret
.o-topper--color-oxford
.o-topper--color-slate
.o-topper--color-crimson
.o-topper--color-sky
.o-topper--color-matisse
.o-topper--color-o3-color-palette-paper
.o-topper--color-o3-color-palette-wheat
.o-topper--color-o3-color-palette-white
.o-topper--color-o3-color-palette-black
.o-topper--color-o3-color-palette-claret
.o-topper--color-o3-color-palette-oxford
.o-topper--color-o3-color-palette-slate
.o-topper--color-o3-color-palette-crimson
.o-topper--color-o3-color-palette-sky
.o-topper--color-o3-color-palette-matisse
```

### Modifiers
Expand Down
2 changes: 1 addition & 1 deletion components/o-topper/demos/src/basic.mustache
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--basic o-topper--color-paper">
<div class="o-topper o-topper--basic o-topper--color-o3-color-palette-paper">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/german-election" class="o-topper__topic">German election</a>
Expand Down
2 changes: 1 addition & 1 deletion components/o-topper/demos/src/branded.mustache
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--branded o-topper--color-wheat">
<div class="o-topper o-topper--branded o-topper--color-o3-colo-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">
Expand Down
2 changes: 1 addition & 1 deletion components/o-topper/demos/src/centered.mustache
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--centered o-topper--color-paper">
<div class="o-topper o-topper--centered o-topper--color-o3-color-palette-paper">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/german-election" class="o-topper__topic">German election</a>
Expand Down
8 changes: 4 additions & 4 deletions components/o-topper/demos/src/deep-landscape-left.mustache
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<h2>
Text Shadow + Slate background
</h2>
<div class="o-topper o-topper--deep-landscape o-topper--color-slate">
<div class="o-topper o-topper--deep-landscape o-topper--color-o3-color-palette-slate">
<div class="o-topper__content o-topper__content--text-shadow">
<div class="o-topper__tags">
<a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
Expand All @@ -28,7 +28,7 @@ Text Shadow + Slate background

<h2>Background Box + Slate background</h2>

<div class="o-topper o-topper--deep-landscape o-topper--color-slate">
<div class="o-topper o-topper--deep-landscape o-topper--color-o3-color-palette-slate">
<div class="o-topper__content o-topper__content--background-box">
<div class="o-topper__tags">
<a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
Expand All @@ -55,7 +55,7 @@ Text Shadow + Slate background

<h2>White background</h2>

<div class="o-topper o-topper--deep-landscape o-topper--color-white">
<div class="o-topper o-topper--deep-landscape o-topper--color-o3-color-palette-white">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
Expand All @@ -76,7 +76,7 @@ Text Shadow + Slate background

<h2>Background Box + White background</h2>

<div class="o-topper o-topper--deep-landscape o-topper--color-white">
<div class="o-topper o-topper--deep-landscape o-topper--color-o3-color-palette-white">
<div class="o-topper__content o-topper__content--text-shadow o-topper__content--background-box">
<div class="o-topper__tags">
<a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
Expand Down
2 changes: 1 addition & 1 deletion components/o-topper/demos/src/deep-portrait.mustache
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--deep-portrait o-topper--color-claret">
<div class="o-topper o-topper--deep-portrait o-topper--color-o3-color-palette-claret">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="/uk-general-election" class="o-topper__topic">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--full-bleed-image-center o-topper--color-slate">
<div class="o-topper o-topper--full-bleed-image-center o-topper--color-o3-color-palette-slate">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--full-bleed-image-left o-topper--color-slate">
<div class="o-topper o-topper--full-bleed-image-left o-topper--color-o3-color-palette-slate">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/life-arts" class="o-topper__topic">Life &amp; Arts</a>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--full-bleed-offset o-topper--right-rail o-topper--color-paper">
<div class="o-topper o-topper--full-bleed-offset o-topper--right-rail o-topper--color-o3-color-palette-paper">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/comment/the-big-read" class="o-topper__brand">
Expand Down
2 changes: 1 addition & 1 deletion components/o-topper/demos/src/full-bleed-offset.mustache
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--full-bleed-offset o-topper--color-paper">
<div class="o-topper o-topper--full-bleed-offset o-topper--color-o3-color-palette-paper">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/comment/the-big-read" class="o-topper__brand">
Expand Down
2 changes: 1 addition & 1 deletion components/o-topper/demos/src/live-blog-package.mustache
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--full-bleed-offset o-topper--color-paper">
<div class="o-topper o-topper--full-bleed-offset o-topper--color-o3-color-palette-paper">
<div class="o-topper__content">
<div class="o-topper__tags"></div>
<h1 class="o-topper__headline o-topper__headline--large"><span class="article-classifier__gap">Coronavirus
Expand Down
2 changes: 1 addition & 1 deletion components/o-topper/demos/src/opinion.mustache
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--branded o-topper--has-headshot o-topper--opinion o-topper--color-sky">
<div class="o-topper o-topper--branded o-topper--has-headshot o-topper--opinion o-topper--color-o3-color-palette-sky">
<div class="o-topper__content">
<div class="o-topper__tags">
<span class="o-topper__opinion-genre">
Expand Down
16 changes: 8 additions & 8 deletions components/o-topper/demos/src/pa11y.mustache
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div id="demo-container">
<div class="o-topper o-topper--basic o-topper--color-paper">
<div class="o-topper o-topper--basic o-topper--color-o3-color-palette-paper">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/german-election" class="o-topper__topic">German election</a>
Expand All @@ -12,7 +12,7 @@

<div class="o-topper__background"></div>
</div>
<div class="o-topper o-topper--branded o-topper--has-headshot o-topper--color-wheat">
<div class="o-topper o-topper--branded o-topper--has-headshot 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">
Expand Down Expand Up @@ -52,7 +52,7 @@
</picture>
</figure>
</div>
<div class="o-topper o-topper--full-bleed-offset o-topper--color-paper">
<div class="o-topper o-topper--full-bleed-offset o-topper--color-o3-color-palette-paper">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/comment/the-big-read" class="o-topper__brand">
Expand Down Expand Up @@ -80,7 +80,7 @@
<figcaption class="o-topper__image-credit">© Bloomberg</figcaption>
</figure>
</div>
<div class="o-topper o-topper--branded o-topper--has-headshot o-topper--opinion o-topper--color-sky">
<div class="o-topper o-topper--branded o-topper--has-headshot o-topper--opinion o-topper--color-o3-color-palette-sky">
<div class="o-topper__content">
<div class="o-topper__tags tags--large">
<span class="o-topper__opinion-genre">
Expand Down Expand Up @@ -108,7 +108,7 @@

<div class="o-topper__background"></div>
</div>
<div class="o-topper o-topper--split-text-left o-topper--package o-topper--package-extra o-topper--color-slate">
<div class="o-topper o-topper--split-text-left o-topper--package o-topper--package-extra o-topper--color-o3-color-palette-slate">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/ft-series" class="o-topper__topic tags--large">FT Series</a>
Expand All @@ -132,7 +132,7 @@
<figcaption class="o-topper__image-credit">© FT montage</figcaption>
</figure>
</div>
<div class="o-topper o-topper--split-text-left o-topper--package o-topper--color-wheat">
<div class="o-topper o-topper--split-text-left o-topper--package o-topper--color-o3-color-palette-wheat">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/ft-guides" class="o-topper__topic tags--large">FT Guides</a>
Expand All @@ -153,7 +153,7 @@
</picture>
</figure>
</div>
<div class="o-topper o-topper--split-text-center o-topper--color-black">
<div class="o-topper o-topper--split-text-center o-topper--color-o3-color-palette-black">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/comment/the-big-read" class="o-topper__brand">
Expand Down Expand Up @@ -183,7 +183,7 @@
<figcaption class="o-topper__image-credit">© Ollanski</figcaption>
</figure>
</div>
<div class="o-topper o-topper--split-text-left o-topper--color-claret">
<div class="o-topper o-topper--split-text-left o-topper--color-o3-color-palette-claret">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="/uk-general-election" class="o-topper__topic">
Expand Down
2 changes: 1 addition & 1 deletion components/o-topper/demos/src/package-extra.mustache
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--split-text-left o-topper--package o-topper--package-extra o-topper--color-slate">
<div class="o-topper o-topper--split-text-left o-topper--package o-topper--package-extra o-topper--color-o3-color-palette-slate">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/ft-series" class="o-topper__topic tags--large">FT Series</a>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--split-text-left o-topper--package o-topper--special-report o-topper--color-claret">
<div class="o-topper o-topper--split-text-left o-topper--package o-topper--special-report o-topper--color-o3-color-palette-claret">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/reports" class="o-topper__topic tags--large">Special Report</a>
Expand Down
2 changes: 1 addition & 1 deletion components/o-topper/demos/src/package.mustache
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--split-text-left o-topper--package o-topper--color-wheat">
<div class="o-topper o-topper--split-text-left o-topper--package o-topper--color-o3-color-palette-wheat">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/ft-guides" class="o-topper__topic tags--large">FT Guides</a>
Expand Down
2 changes: 1 addition & 1 deletion components/o-topper/demos/src/podcast.mustache
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--branded o-topper--has-headshot o-topper--opinion o-topper--color-slate">
<div class="o-topper o-topper--branded o-topper--has-headshot o-topper--opinion o-topper--color-o3-color-palette-slate">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/topics/themes/US_Treasury_Bonds" class="o-topper__topic">
Expand Down
2 changes: 1 addition & 1 deletion components/o-topper/demos/src/right-rail.mustache
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--basic o-topper--right-rail o-topper--color-paper">
<div class="o-topper o-topper--basic o-topper--right-rail o-topper--color-o3-color-palette-paper">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/german-election" class="o-topper__topic">German election</a>
Expand Down
2 changes: 1 addition & 1 deletion components/o-topper/demos/src/split-text-center.mustache
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--split-text-center o-topper--color-black">
<div class="o-topper o-topper--split-text-center o-topper--color-o3-color-palette-black">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/comment/the-big-read" class="o-topper__brand">
Expand Down
2 changes: 1 addition & 1 deletion components/o-topper/demos/src/split-text-left.mustache
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--split-text-left o-topper--color-claret">
<div class="o-topper o-topper--split-text-left o-topper--color-o3-color-palette-claret">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="/uk-general-election" class="o-topper__topic">
Expand Down

0 comments on commit 15c2a93

Please sign in to comment.