# Container/PageHeader

> Props: container-pageheader.props.txt

## Examples


### Base

```tsx
{
  args: {
    sectionTitleProps: {
      title: 'Title',
      caption: 'Caption',
      description: 'Body Text',
      textButton: <TextButton kind='link' startIcon={<IconCircleInfo color={semantic_colors.accent.primary} size={14} />}>
          Label
        </TextButton>,
      actions: <Button size='large' kind='primary'>
          Label
        </Button>
    }
  }
}
```

### Dense

```tsx
{
  args: {
    dense: true,
    sectionTitleProps: {
      title: 'Title',
      caption: 'Caption',
      description: 'Body Text',
      textButton: <TextButton kind='link' startIcon={<IconCircleInfo color={semantic_colors.accent.primary} size={14} />}>
          Label
        </TextButton>,
      actions: <Button size='large' kind='primary'>
          Label
        </Button>
    }
  }
}
```

### With Line Tab

```tsx
{
  render: () => {
    const [activeTab, setActiveTab] = useState<string>('tab-1');
    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };
    return <>
        <PageHeader border={false} sectionTitleProps={{
        title: 'Title',
        caption: 'Caption',
        description: 'Body Text',
        textButton: <TextButton kind='link' startIcon={<IconCircleInfo color={semantic_colors.accent.primary} size={14} />}>
                Label
              </TextButton>,
        actions: <Button size='large' kind='primary'>
                Label
              </Button>
      }} />
        <LineTabs activeTabId={activeTab} onChange={handleChange}>
          <LineTab id='tab-1'>Label</LineTab>
          <LineTab id='tab-2'>Label</LineTab>
          <LineTab id='tab-3'>Label</LineTab>
          <LineTab id='tab-4'>Label</LineTab>
          <LineTab id='tab-5'>Label</LineTab>
          <LineTab id='tab-6'>Label</LineTab>
        </LineTabs>
      </>;
  }
}
```

### With Section Title And Breadcrumb Props Custom

```tsx
{
  render: () => {
    return <PageHeader border={false} sectionTitleProps={{
      title: 'Title',
      caption: 'Caption',
      description: 'Body Text',
      textButton: <TextButton kind='link' startIcon={<IconCircleInfo color={semantic_colors.accent.primary} size={14} />}>
              Label
            </TextButton>,
      actions: <Button size='large' kind='primary'>
              Label
            </Button>
    }} breadcrumbProps={{
      items: [{
        label: '홈'
      }, {
        label: '메뉴명',
        href: 'https://google.com/'
      }, {
        label: '메뉴명'
      }, {
        label: '메뉴명'
      }]
    }} />;
  }
}
```

### With Section Title And Breadcrumb Props No Caption Custom

```tsx
{
  render: () => {
    return <PageHeader border={false} sectionTitleProps={{
      title: 'Title',
      description: 'Body Text',
      textButton: <TextButton kind='link' startIcon={<IconCircleInfo color={semantic_colors.accent.primary} size={14} />}>
              Label
            </TextButton>,
      actions: <Button size='large' kind='primary'>
              Label
            </Button>
    }} 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: <TextButton kind='link' startIcon={<IconCircleInfo color={semantic_colors.accent.primary} size={14} />}>
          Label
        </TextButton>,
      actions: <Button size='large' kind='primary' fill>
          Label
        </Button>
    }
  }
}
```