Terminal
The Terminal
component is used to display terminal commands. User could copy the commands by clicking inside window area.
Bash
>npx nuxi init my-awesome-nuxt-app>yarn install
Click to copy
Props
Prop | Type | Default | Description |
---|---|---|---|
content | [Array, String] | undefined | One or multiple terminal commands. The prop is required |
Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
docux: {
landing: {
terminal: {
maxWidth: '{space.128}',
height: '{space.64}',
borderWidth: '0px',
borderStyle: 'solid',
borderColor: '{elements.border.primary.static}',
borderRadius: '{radii.xs}',
backgroundColor: {
initial: 'rgba({temp.color.gray.200}, 0.7)',
dark: 'rgba({temp.color.gray.900}, 0.7)'
},
boxShadow: 'inset 0px 0px 0px 1px rgba({temp.color.gray.600}, 0.3), {shadow.2xl}',
backdropFilter: 'blur(3px)',
header: {
borderBottomWidth: '0px',
borderBottomStyle: 'solid',
borderBottomColor: '{elements.border.primary.static}',
height: '{space.12}',
boxShadow: 'inset 0px -1px 0px 0px rgba({temp.color.gray.600}, 0.3)'
},
window: {
fontFamily: '{font.mono}',
fontSize: '{text.sm.fontSize}',
mixBlendMode: {
initial: 'normal',
dark: 'difference'
},
sign: {
color: {
initial: '{color.gray.500}',
dark: '{color.gray.700}'
}
}
},
copied: {
color: {
initial: '{color.gray.900}',
dark: '{color.gray.100}'
}
}
}
}
}
})
LandingHeroThe 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).LandingCardThe Card component used to display content related to a single subject in a visually engaging and organized manner.