Components

Start with the lead text, which should summarise your story. This is best practice in web writing. We suggest the lead text to be around 200 characters.

Text features

Headlines

H2 title

H3 title

H5 title
Text components

We use this component to add text to the page. Inside the component in the text you can define bold, italic, underlined text as well as superscripts1,2, subscripts, bullet lists and ordered lists.

  • Bulleted list

  • Bulleted list

  • Bulleted list

  1. Numbered list

  2. Numbered list

  3. Numbered list

Text link

This component can be used for internal links, external links and assets.

Roche Quote

In this component you can add the text of the quote in the “Quote” field without quotation marks. Optionally you can add a subline.

Pull quote, Full Width. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
John Doe
Head of Development for Stories at Roche
Highlight Box

This component is used to highlight a specific part of the content.

References

  1. WHO[Internet; cited 2019 May14] https://www.who.int/news-room/fact-sheets/detail/hepatitis-b

  2. parkinsonslife[Internet; cited 2019 May 14] https://parkinsonslife.eu/parkinsons-prevalence-expected-to-increase-by-18-by-2025

Published undefined
Roche slider

We can add multiple elements inside this component. We can select how many slides we would like to see at once.

Image

We can add images and we are able to use a video loop, which is a moving image (without sounds). We can add title and caption to images.

The recommended image size is 2560×1440px. You are also able to use a video loop, which is a moving image (without sounds).

Always verify that the quality of the images is excellent and that they are not blurry, cut off or low resolution ones. Images that include text are not acceptable.

Videos

There are two ways to add a video. Videos can be uploaded to YouTube or Brightcove. We recommend having it uploaded to YouTube, because you will get better statistics on the performance of the video.

For the videos it’s always mandatory to have a thumbnail image that content owners should provide.

Multimedia

Responsive table

The responsive table is able to change dynamically with its environment and its conditions.

Column 1
Lorem ipsum dolor sit amet
Ex ea commodo consequat
Column 2
Ut enim ad minim veniam
Duis aute irure dolor in reprehenderit
Column 3
Nemo enim ipsam voluptatem
Sed ut perspiciatis unde omnis
Side-by-side

With this component we can add two or more components next to each other.

Lorem ipsum

100%

consectetur adipiscing elit

Accordions

Accordions are used to organize content in a structure for easy navigation and understanding.

It has two type of appearances:

  1. 'Default': Displaying the tabs below each other and opens up downward

  2. 'Filter': displaying the tabs next to each other

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.

Organizational components

Contact person

The 'Contact Person' component is used to provide contact information for the visitors of the page, with this they can get in touch with the person whose details are shown in the component.

Display, design elements

Test Name
Test Job Title
123456789
Contact Person without Slotted Avatar
Test Name
Test Job Title
Contact Person with Slotted Avatar (Name and Job Title only)
Test Name
Test Job Title
123456789
Contact Person with Slotted Avatar
Primary
Secondary
Tertiary
Buttons

Buttons are used to direct users into taking the action you want them to take (for example get in touch/register for an event).

There are primary, secondary and tertiary buttons. All buttons can be used with or without icons. The button label should be named clearly and explicit with a verb or noun that specifically describes the desired action. Buttons can be linked to an internal target or to an external URL.

This part of the page starts at the end of the article which contains all the related stories and links, downloads and social media links.

Social Media

This section is only used on 'Story' type pages at the end of the article. With the help of the somponent we can invite the users to share stories on different Social media platforms with the slogan 'Continue sharing inspiring stories'.

Navigational components

This components is used to gather the downloadable files related to the content.

Downloads

Downloads

We use this section to display the related internal pages which are telling colorful stories of Roche. By clicking these you can see some examples of 'Story' type pages.

More Stories Of

More stories of

See all stories

We use this section to display the related external or internal link. We use two different layout depending on the number of teased pages. First onewe use if 3 or less links are available and the second one is in the case of 3+ links.

See the examples below. By clicking these you can see some examples of 'Evergreen' type pages.

Discover more

Discover more

Discover more