Back
Hero
The hero component in our design system offers a visually striking and prominent section at the top of a webpage or interface. With its customizable layout and rich media capabilities, it provides an engaging introduction to content or key features.
Input
-- ds.hero: Hero component title
image: $assets.files.assets.placeholder.jpg
cta-text: button
cta-link: /

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
molestie ante in luctus rutrum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Quisque molestie ante in luctus
rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque molestie ante in luctus rutrum.
Lang:
ftd
Output
Hero component title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie ante in luctus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie ante in luctus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie ante in luctus rutrum.
button
Input
-- ds.hero: Hero component title
image: $assets.files.assets.placeholder.jpg
cta-text: button
cta-link: /
background.solid: $ds.colors.background.step-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
molestie ante in luctus rutrum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Quisque molestie ante in luctus
rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque molestie ante in luctus rutrum.
Lang:
ftd
Output
Hero component title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie ante in luctus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie ante in luctus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie ante in luctus rutrum.
button
Input
-- ds.hero: Hero component title
image: $assets.files.assets.placeholder.jpg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
molestie ante in luctus rutrum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Quisque molestie ante in luctus
rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque molestie ante in luctus rutrum.
Lang:
ftd
Output
Hero component title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie ante in luctus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie ante in luctus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie ante in luctus rutrum.
Input
-- ds.hero: Hero component title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
molestie ante in luctus rutrum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Quisque molestie ante in luctus
rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque molestie ante in luctus rutrum.
Lang:
ftd
Output
Hero component title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie ante in luctus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie ante in luctus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie ante in luctus rutrum.