# Container/PageHeader
> Props: container-pageheader.props.txt
## Examples
### Base
```tsx
{
args: {
sectionTitleProps: {
title: 'Title',
caption: 'Caption',
description: 'Body Text',
textButton: }>
Label
,
actions:
}
}
}
```
### Dense
```tsx
{
args: {
dense: true,
sectionTitleProps: {
title: 'Title',
caption: 'Caption',
description: 'Body Text',
textButton: }>
Label
,
actions:
}
}
}
```
### With Line Tab
```tsx
{
render: () => {
const [activeTab, setActiveTab] = useState('tab-1');
const handleChange = (activeTab: string) => {
setActiveTab(activeTab);
};
return <>
}>
Label
,
actions:
}} />
Label
Label
Label
Label
Label
Label
;
}
}
```
### With Section Title And Breadcrumb Props Custom
```tsx
{
render: () => {
return }>
Label
,
actions:
}} breadcrumbProps={{
items: [{
label: '홈'
}, {
label: '메뉴명',
href: 'https://google.com/'
}, {
label: '메뉴명'
}, {
label: '메뉴명'
}]
}} />;
}
}
```
### With Section Title And Breadcrumb Props No Caption Custom
```tsx
{
render: () => {
return }>
Label
,
actions:
}} breadcrumbProps={{
items: [{
label: '홈'
}, {
label: '메뉴명',
href: 'https://google.com/'
}, {
label: '메뉴명'
}, {
label: '메뉴명'
}]
}} />;
}
}
```
### With Section Title Props Custom
```tsx
{
args: {
dense: true,
sectionTitleProps: {
title: 'Title',
caption: 'Caption',
description: 'Body Text',
mb: 20
}
}
}
```
### With Section Title Vertical
```tsx
{
args: {
dense: true,
sectionTitleProps: {
title: 'Title',
caption: 'Caption',
description: 'Body Text',
direction: 'vertical',
textButton: }>
Label
,
actions:
}
}
}
```