Homepage hero

An introduction to the homepage in a form of image or video with text. Behaviour: Short loop video plays automatically on desktop. On mobile video plays on click. Mandatory (fields): Title, Image or video, Alt tag, Short description

Montage Header_Home Page

Page hero

Description: This component is an introduction to the pages. Behaviour: It is only used once at the top of the page. The width should be less than the full width on desktop to assist readability. Mandatory (fields): Title Paragraph text

Optional short description

Page hero with Breadcrumbs

Description: This component is an introduction to the pages a level deeper in navigation. Behaviour on desktop: It is only used once at the top of the page. The width should be less than the full width on desktop to assist readability. Behaviour on mobile: Shorten breadcrumbs on mobile providing only a link to one step back. Mandatory (fields): Breadcrumbs Title Paragraph text.

Optional short description; Extra notes: This component needs to be consistent in styling with Page Hero (without Breadcrumbs)

Article elements: Title + image

Description: This component is an introduction into the blog article. Behaviour: It is only used once at the top of the page. Full-width image. Share button aligned to the right. Mandatory (fields): Title Intro text Optional (fields): Share icon Image

card-environment-media-1
Video Header
Description: This component allows to play a video in the page in full width.
Behaviour: The user can click an arrow to play the video and pause it when it’s playing. Mandatory (fields): Video
Blocks: subsections

Description: This component introduces subsections and leads users to a respective page; Behaviour: It is used full-width in a 3 or 4 col and stacks under each other on mobile; Mandatory (fields): Card image, Card title; Optional (fields): Component title, Component description, Card description, CTA, Text link; Extra notes: The entire card is clickable.

Blocks: articles

Description: This component displays blog articles in a grid view on desktop and in a list view on mobile; Behaviour: Layout switches from grid to list at a certain breakpoint; Mandatory (fields): Image, Description; Optional (fields): Tag, Date; Extra notes: The entire card is clickable.

about_quote_img_harry
Block: Text + Asset (img)

Description: This component is versatile in its use and combines text with an asset (image or video); Behaviour: It is used full-width in a 2 col or 3 col variant. On desktop the image/video can be left or right aligned. On mobile, the image/video is placed under the title and above the text and CTA; Mandatory (fields): Title, Image or video, Paragraph text; Optional (fields): Tag, CTA, Text link

GirlDreamer BWB
Block: Text + Asset (vid)

Description: This component is versatile in its use and combines text with an asset (image or video); Behaviour: It is used full-width in a 2 col or 3 col variant. On desktop the image/video can be left or right aligned. On mobile, the image/video is placed under the title and above the text and CTA; Mandatory (fields): Title, Image or video, Paragraph text; Optional (fields): Tag, CTA, Text link

image-video-vimeo-projects
Article elements: Text & Asset
Description: This component allows to combine text and asset (image/video) in the articles; Behaviour: The asset can be left or right aligned. On mobile the image is placed either on top under title (left aligned on desktop) or at the bottom of the text area (right aligned on desktop); Mandatory (fields): Paragraph text, Image or video; Optional (fields): Title, Text link; Extra notes: This component needs to have the same breadth as the paragraph text for articles to assist readability.
Description: allows to add description to the image/video. Behaviour: Description should be left aligned and have same width as the asset. Extra notes: This component needs to have the same breadth as the paragraph text for articles to assist readability.