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.
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.
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.