Skip to content

Tweak layout of Hosted article page#15422

Merged
cemms1 merged 5 commits intomainfrom
cemms1/hosted-article-tweaks
Mar 2, 2026
Merged

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

Conversation

@cemms1
Copy link
Copy Markdown
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
Copy Markdown

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
Copy Markdown

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
Copy Markdown
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.

Comment thread dotcom-rendering/src/components/ArticleBody.tsx
Comment thread dotcom-rendering/src/layouts/HostedArticleLayout.tsx
@cemms1 cemms1 added the feature Departmental tracking: work on a new feature label Mar 2, 2026
@cemms1 cemms1 merged commit f1a0640 into main Mar 2, 2026
41 of 42 checks passed
@cemms1 cemms1 deleted the cemms1/hosted-article-tweaks branch March 2, 2026 10:51
@gu-prout
Copy link
Copy Markdown

gu-prout Bot commented Mar 2, 2026

Seen on PROD (merged by @cemms1 8 minutes and 52 seconds ago) Please check your changes!

@cemms1 cemms1 added maintenance Departmental tracking: maintenance work, not a fix or a feature and removed feature Departmental tracking: work on a new feature labels Mar 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Commercial 💰 maintenance Departmental tracking: maintenance work, not a fix or a feature Seen-on-PROD

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants