> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gitascii.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Header Widget
> Profile title header with display typography, @handle, and company badge
# Header Widget (`header`)
The Header widget renders the developer's full name in lightweight display typography (PT Serif / Inter Tight), the `@handle` in monospace accent coloring, and an optional right-aligned `[ COMPANY ]` metadata stamp.
## Configuration Schema
```typescript theme={null}
export interface HeaderConfig {
textColor?: string // Default: globalStyles.textColor || '#ffffff'
accentColor?: string // Default: globalStyles.accentColor || '#c5ff4a'
hideBorder?: boolean // Default: false
}
```
Color applied to the user's name.
Color applied to the `@username` handle.
***
## Real Code Example
```typescript theme={null}
import { renderWidgetSvg, WidgetInstance, NormalizedGitHubData, GlobalStyles } from '@/engine'
const headerWidget: WidgetInstance = {
instanceId: 'header_01',
widgetId: 'header',
name: 'Header',
position: { x: 0, y: 0 },
size: { width: 800, height: 90 },
config: {
accentColor: '#c5ff4a',
textColor: '#ffffff',
},
locked: false,
visible: true,
zIndex: 1,
}
const svgOutput = renderWidgetSvg(headerWidget, profileData, globalStyles)
```
### Expected Output
```xml theme={null}
```