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
Numbered list
Numbered list
Numbered list
Text link
This component can be used for internal links, external links and
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.
Highlight Box
This component is used to highlight a specific part of the content.
References
WHO[Internet; cited 2019 May14]
https://www.who.int/news-room/fact-sheets/detail/hepatitis-b 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
dsadsadsa
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:
'Default': Displaying the tabs below each other and opens up downward
'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
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
Contact Person with Slotted Avatar
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
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.