Skip to content

Tweak layout of Hosted article page#15422

Open
cemms1 wants to merge 5 commits intomainfrom
cemms1/hosted-article-tweaks
Open

Tweak layout of Hosted article page#15422
cemms1 wants to merge 5 commits intomainfrom
cemms1/hosted-article-tweaks

Conversation

@cemms1
Copy link
Contributor

@cemms1 cemms1 commented Feb 24, 2026

What does this change?

Adjusts the grid layout for HostedArticleLayout to match the designs and the existing pages more closely

We now have three grid layouts:

  1. article
    the top level grid. This applies the side borders in the correct positions
  2. header
    nested under the article grid, this collects the main media, main media caption, headline and meta (share button) together into a page "header"
  3. body
    also nested under the article grid, the standfirst, the rest of the article body, the onward content and the call to action component fall into this grid

This now looks much closer to our new designs for these pages

Why?

As part of the work to migrate Hosted Content pages from frontend to dotcom-rendering

Screenshots

Before After
before after
before2 after2
before3 after3
before4 after4
before5 after5

@cemms1 cemms1 added run_chromatic Runs chromatic when label is applied Commercial 💰 labels Feb 24, 2026
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Feb 24, 2026
@github-actions
Copy link

github-actions bot commented Feb 24, 2026

@cemms1 cemms1 force-pushed the cemms1/hosted-article-tweaks branch from 3235733 to 8f4d176 Compare February 25, 2026 10:27
@github-actions
Copy link

github-actions bot commented Feb 25, 2026

@cemms1 cemms1 force-pushed the cemms1/hosted-article-tweaks branch from d6b86c7 to 561c9ac Compare February 25, 2026 17:02
@cemms1 cemms1 added the run_chromatic Runs chromatic when label is applied label Feb 25, 2026
@cemms1 cemms1 marked this pull request as ready for review February 25, 2026 17:40
@cemms1 cemms1 requested a review from a team February 25, 2026 17:40
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Feb 25, 2026
Copy link
Contributor

@deedeeh deedeeh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work @cemms1 ✨ I just left a minor comment just to be consistent with the current layouts but it isn't a blocker.

format.design === ArticleDesign.HostedArticle ||
format.design === ArticleDesign.HostedVideo ||
format.design === ArticleDesign.HostedAudio;
format.design === ArticleDesign.HostedGallery;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's entirely my mistake which I just noticed now from my previous PR ArticleBody but it was a commit that I did after your review and I didn't request for a re-review so my apology for that!

<main
data-layout="HostedArticleLayout"
lang={decideLanguage(frontendData.lang)}
dir={decideLanguageDirection(frontendData.isRightToLeftLang)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed mostly all layouts have isRightToLeftLang as the property so maybe we could be consistent with what exists?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants