Every page with page type “Page” starts with a “Staging Hero” and it’s only used once on each page. We recommend putting it in a Grid (12) and it optionally contains the title, the short description of the page and an image. There are two variants of this component: “Variant A” and “Variant B”. “Variant A” is higher and not showing the image, “Variant B” is shorter and showing the image.

Staging is always followed by the content. On an evergreen page content must be in Grid(8-4). The content body can include a lead text component, text components, image components, video player components, roche quote components, references and other components according to the design of the page that we are migrating. A few examples can be found below.

Text component with 'Footnote' enabled.

Downloads (1-2) → within a 6-6 grid, no background. If there were downloads on the old page, the same downloads should be added to the new.

Downloads (3+) → within a 12 grid → Roche Teaser wall, no background. If there were downloads on the old page, the same downloads should be added to the new.

The recommended usage of this section in “Content type: Story” and  “Content type: Page” is the following:, inside a “Grid (12)” with “Neutral Gradient 1” background, add a "Side-by-side" component with “Space between” horizontal alignment and “Bottom” vertical alignment. Inside the ”Side-by-side“ add a "Headline 2" with the text “More stories of” and a "Text Link" component saying “See more stories”, pointing to “../stories” and with the “Right icon: arrow-right”. Then add a "Roche Teaser Slider" and set “Teasers Per Slider Page: 3”. You can add the needed teasers here with "Story Teaser (Manual)".

Sibling pages.

The layout has two different variants, if 3 or less links are available, we recommend to use a “Grid (6-6)”, In the “Slotted left” we add a "Headline 2" with the text “Discover more” and we add the teasers to the “Slotted right” with “Variant A without image”. In “Content type: Page” we recommend to use “Split Gradient” as a background, in “Content type: Story” we use “Theme aware”.

If 4 or more links are available, we recommend to use a “Grid (12)”, first we add a "Headline 2" with the text “Discover more” and we add the teasers to a "Teaser Wall" with “Variant A without image”. In “Content type: Page” and “Content type: Story” we recommend to use “Theme aware” as a background.

In case of external teasers "Variant D without image" should be used.