Hero
The Hero component is a versatile and visually appealing element designed for the landing page. It serves as the first screen that captures users' attention and introduces them to the key features and messaging of the product. The component incorporates a title, description, announce, call-to-action buttons, some extra content slot and a flexible area for visual content, such as images, videos, or animations (or Terminal in case of Docux website).
Usage
The best place to start your documentation.
Write pages in Markdown, use Vue components and enjoy the power of Nuxt.
- +50 Components ready to build rich pages
- Docs and Page layouts
- Start from a
README, scale to a framework documentation - Navigation and Table of Contents generation
- Fully configurable design system
- Leverages Typography and Elements
- Used on Content Documentation
Bash
>npx nyxbi@latest init -t nyxb/docux>cd docs>npm install>npm run dev
Click to copy
Slots
| Name | Description |
|---|---|
root | A slot for any content, rendered at the root of the component |
announce | A slot for providing updates or any kind of announce. rendered above the title |
title | A slot for main Hero title |
description | A slot for Hero description |
extra | A slot for any kind of additional Hero content. Rendered under the description |
actions | A slot for Hero actions, such as buttons, links or any other Call to Action. Rendered under the extra |
support | A slot for Hero visual support content: image, video, animation, demo etc |
Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
docux: {
landing: {
hero: {
padding: {
initial: '{space.20} 0',
sm: '{space.24} 0',
lg: '{space.24} 0 {space.32} 0'
},
layout: {
gap: {
initial: '{space.16}',
xl: '{space.4}'
},
gridTemplateColumns: {
initial: 'none',
xl: 'repeat(12, minmax(0, 1fr))'
}
},
content: {
gridColumn: {
initial: 'auto',
xl: 'span 7 / span 7'
},
alignItems: {
initial: 'center',
xl: 'flex-start'
},
announce: {
marginBottom: '{space.8}'
},
title: {
fontSize: {
initial: '{text.4xl.fontSize}',
sm: '{text.5xl.fontSize}',
lg: '{text.6xl.fontSize}'
},
lineHeight: {
initial: '{text.4xl.lineHeight}',
sm: '{text.5xl.lineHeight}',
lg: '{text.6xl.lineHeight}'
},
color: '{elements.text.primary.color.static}',
fontWeight: '{fontWeight.semibold}',
letterSpacing: '{letterSpacing.tight}',
paddingX: {
initial: '{space.8}',
md: '{space.12}',
lg: '{space.14}',
xl: '{space.0}'
},
textAlign: {
initial: 'center',
xl: 'start'
},
marginBottom: '{space.8}',
gradientText: {
initial: 'linear-gradient(114deg, {color.gray.900} 10%, {color.gray.600} 54%, {color.gray.500})',
dark: 'linear-gradient(114deg, {color.gray.400} 10%, {color.gray.100} 54%, {color.gray.700})'
},
mixBlendMode: 'normal'
},
description: {
textAlign: {
initial: 'center',
xl: 'start'
},
marginBottom: '{space.12}',
fontSize: {
initial: '{text.lg.fontSize}',
lg: '{text.xl.fontSize}'
},
lineHeight: {
initial: '{text.lg.lineHeight}',
lg: '{text.xl.lineHeight}'
},
color: '{elements.text.secondary.color.static}',
paddingX: {
initial: '{space.2}',
md: '{space.6}',
xl: '{space.0}'
},
mixBlendMode: 'normal'
},
extra: {
justifyContent: {
initial: 'center',
xl: 'flex-start'
},
marginBottom: '{space.16}'
},
actions: {
flexDirection: {
initial: 'column',
sm: 'row'
},
gap: {
initial: '{space.2}',
sm: '{space.3}'
},
justifyContent: {
initial: 'center',
xl: 'flex-start'
}
}
},
support: {
gridColumn: {
initial: 'auto',
xl: 'span 5 / span 5'
}
}
},
}
}
})