Section Header
Component for displaying a section header. Useful if your landing page has multiple sections.
Usage
Features
What's included
Docux is packed with features to help you build your next project.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | '' | Title of the section. Use title slot as alternative |
subtitle | String | '' | Subtitle of the section. Use subtitle slot as alternative |
subtitleColor | String | {color.primary.500} | Subtitle color |
description | String | '' | Description of the section. Use description slot as alternative |
Slots
| Slot | Description |
|---|---|
subtitle | Subtitle of the section. Use subtitle prop as alternative |
title | Title of the section. Use title prop as alternative |
description | Description of the section. Use description prop as alternative |
Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
docux: {
landing: {
sectionHeader: {
alignItems: {
initial: 'center',
xl: 'flex-start'
},
marginBottom: '{space.8}',
subtitle: {
fontSize: '{text.lg.fontSize}',
lineHeight: '{text.lg.lineHeight}',
fontWeight: '{fontWeight.normal}',
letterSpacing: '{letterSpacing.wide}',
marginBottom: '{space.2}'
},
title: {
fontSize: {
initial: '{text.3xl.fontSize}',
sm: '{text.4xl.fontSize}'
},
lineHeight: {
initial: '{text.3xl.lineHeight}',
sm: '{text.4xl.lineHeight}'
},
marginBottom: '{space.2}',
fontWeight: '{fontWeight.semibold}',
letterSpacing: '{letterSpacing.tight}',
color: '{docux.body.color}'
},
description: {
color: '{elements.text.secondary.color.static}'
}
}
}
}
})