Nuxt UI

Hero Components Showcase

All 10 hero base components, using the content of the Prismic `hero` page

1. HeroCenteredWithBackgroundImage

Lorem ipsum dolor sit amet. Mehr erfahren

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Mehr erfahrenLets go

2. HeroWithImageOnRight

Lorem ipsum dolor sit amet.

Mehr Natur für deinen Garten

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Invictus amenPellentesque
brown wooden bench under green tree during daytimebrown wooden bench under green tree during daytime

3. HeroWithImage

Lorem ipsum dolor sit amet. Mehr erfahren

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Invictus amen
purple flower field during daytime

4. HeroSimpleCentered

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Invictus amenConsectetur sapien

5. HeroSplitWithImage

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Invictus amen
yellow flower in tilt shift lens

6. HeroSplitWithCodeExample

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Invictus amen
app.config.ts
nuxt.config.ts
1export default defineAppConfig({
2ui: {
3primary: 'blue',
4secondary: 'purple'
5}
6})

7. HeroWithAngledImage

Lorem ipsum dolor sit amet. Mehr erfahren

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Invictus amen
white and blue wooden house surrounded by green trees during daytime

8. HeroWithImageTiles

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Invictus amen
white and blue wooden house surrounded by green trees during daytime
a house in the middle of a lush green field
person watering plant
red flowers on green grass field during daytime
gray rocks with green moss

9. HeroWithOffsetImage

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Consectetur doloris
a man standing in a field with a cell phone to his ear

10. HeroWithPhoneMockup

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Consectetur dolorisPretium tellus
App screenshotwhite iphone 5 c displaying apple logo