Heros article - displaced
Description
This component is meant to be used as a creative component and can not be used on default article pages.
All options can be used together, but we advise not using images om top of images.
Content
- Title: H1 or H2
- P: introductory paragraph
- Tags: category, date, last-updated, older-than
- Image or background-image
Background colors
- Default
- Primary
- Primary decorative
- Secondary decorative
- Invert main color: White/Body
Options
- Background-color
- Background-image
- Image
- Full height
- Highlighted pre-text field
- Pre-text infront of title
- Pre-text infront of introductory
Hero article - displaced: no media and no bg color
Hero article - displaced: no media and no bg color
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus urna vel tortor fringilla, consequat tristique ex eleifend.
Hero article - displaced: default (background-color: body)
Hero article - displaced: default (background-color: body)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus urna vel tortor fringilla, consequat tristique ex eleifend.
Hero article - displaced: background-image
Hero article - displaced: background-image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus urna vel tortor fringilla, consequat tristique ex eleifend.
Hero article - displaced: background-video
Hero article - displaced: background-video
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus urna vel tortor fringilla, consequat tristique ex eleifend.
Hero article - displaced: background-video
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus urna vel tortor fringilla, consequat tristique ex eleifend.
Hero article - displaced: background-image & full-height
Hero article - displaced: background-image & full-height
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus urna vel tortor fringilla, consequat tristique ex eleifend.
Hero article - displaced: Primary background-color & article image
Hero article - displaced: Primary background-color & article image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus urna vel tortor fringilla, consequat tristique ex eleifend.
undefined
Hero article - displaced: Primary background-color & article video
Hero article - displaced: Primary background-color & article video
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus urna vel tortor fringilla, consequat tristique ex eleifend.
Hero article - displaced: Primary background-color, article image & full height
Hero article - displaced: Primary background-color, article image & full height
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus urna vel tortor fringilla, consequat tristique ex eleifend.
undefined
Hero article - displaced: Secondary background-color & article image
Hero article - displaced: Secondary background-color & article image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus urna vel tortor fringilla, consequat tristique ex eleifend.
undefined
Hero article - displaced: Primary decorative background-color & article image
Hero article - displaced: Primary decorative background-color & article image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus urna vel tortor fringilla, consequat tristique ex eleifend.
undefined
Hero article - displaced: Secondary decorative background-color, article image & image caption
Hero article - displaced: Secondary decorative background-color, article image & image caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus urna vel tortor fringilla, consequat tristique ex eleifend.
This is a image caption
Hero article - displaced: no image & no background color
Hero article - displaced: no image & no background color
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus urna vel tortor fringilla, consequat tristique ex eleifend.
Hero article - Highlighted pre-text field for title & introductory
Pre-text title: Hero article - Highlighted pre-text field for title & introductory
Pre-text introductory: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus urna vel tortor fringilla, consequat tristique ex eleifend.