# Container/SectionTitle

> Props: container-sectiontitle.props.txt

## Examples


### Base

```tsx
{
  args: {
    caption: 'caption',
    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>
  }
}
```

### Custom

```tsx
{
  args: {
    direction: 'vertical',
    caption: 'caption',
    title: 'Title',
    description: <>
        Multi Body Text
        <br />
        Multi Body Text
        <br />
        Multi Body Text
        <br />
        Multi Body Text
      </>,
    actions: <Button size='large' fill kind='primary' onClick={() => alert('click')}>
        Label
      </Button>
  }
}
```

### Size With Horizontal

```tsx
{
  render: () => <Stack direction='column' gap={40}>
      {['small', 'medium', 'large'].map(size => {
      return <Stack direction='column' key={size}>
            <SectionTitle caption='caption' title='Title' description='Body Text' size={size as SectionTitleSize} textButton={<TextButton kind='link' startIcon={<IconCircleInfo color={semantic_colors.accent.primary} size={14} />}>
                  Label
                </TextButton>} actions={<Button size='large' kind='primary'>
                  Label
                </Button>} />
          </Stack>;
    })}
    </Stack>
}
```

### Size With No Margin Bottom

```tsx
{
  render: () => <Stack direction='row' gap={40}>
      <Stack direction='column' gap={40} width='50%'>
        {['small', 'medium', 'large'].map(size => {
        return <Stack direction='column' key={size}>
              <SectionTitle caption='caption' title='Title' description='Body Text' size={size as SectionTitleSize} mb={0} textButton={<TextButton kind='link' startIcon={<IconCircleInfo color={semantic_colors.accent.primary} size={14} />}>
                    Label
                  </TextButton>} actions={<Button size='large' kind='primary'>
                    Label
                  </Button>} />
            </Stack>;
      })}
      </Stack>
      <Stack direction='column' gap={40} width='50%'>
        {['small', 'medium', 'large'].map(size => {
        return <Stack direction='column' key={size}>
              <SectionTitle direction='vertical' caption='caption' title='Title' description='Body Text' size={size as SectionTitleSize} mb={0} textButton={<TextButton kind='link' startIcon={<IconCircleInfo color={semantic_colors.accent.primary} size={14} />}>
                    Label
                  </TextButton>} actions={<Button size='large' fill kind='primary'>
                    Label
                  </Button>} />
            </Stack>;
      })}
      </Stack>
    </Stack>
}
```

### Size With Vertical

```tsx
{
  render: () => <Stack direction='column' gap={40}>
      {['small', 'medium', 'large'].map(size => {
      return <Stack direction='column' key={size}>
            <SectionTitle direction='vertical' caption='caption' title='Title' description='Body Text' size={size as SectionTitleSize} textButton={<TextButton kind='link' startIcon={<IconCircleInfo color={semantic_colors.accent.primary} size={14} />}>
                  Label
                </TextButton>} actions={<Button size='large' fill kind='primary'>
                  Label
                </Button>} />
          </Stack>;
    })}
    </Stack>
}
```

### Title Action Only

```tsx
{
  args: {
    title: 'Title',
    mb: 0,
    actions: <Button size='large' fill kind='primary' onClick={() => alert('click')}>
        Label
      </Button>
  }
}
```

### Vertical

```tsx
{
  args: {
    direction: 'vertical',
    caption: 'caption',
    title: 'Title',
    description: 'Body Text',
    actions: <Button size='large' fill kind='primary' onClick={() => alert('click')}>
        Label
      </Button>
  }
}
```