# Container/Section

> Props: container-section.props.txt

## Examples


### Base

```tsx
{
  render: args => {
    return <div style={{
      backgroundColor: semantic_colors.background.base
    }}>
        <Section {...args}>
          <SectionTitle title='타이틀' />
          <div style={{
          height: '100px'
        }}>Content Area</div>
        </Section>
      </div>;
  }
}
```

### Multiple Section

```tsx
{
  render: () => {
    return <div style={{
      backgroundColor: semantic_colors.background.base
    }}>
        <Section>
          <div style={{
          height: '100px'
        }}>Section 1</div>
        </Section>
        <Section>
          <div style={{
          height: '100px'
        }}>Section 2</div>
        </Section>
      </div>;
  }
}
```

### Multiple Section No Margin

```tsx
{
  render: () => {
    return <div style={{
      backgroundColor: semantic_colors.background.base
    }}>
        <Section noMargin>
          <div style={{
          height: '100px'
        }}>Section 1</div>
        </Section>
        <Section noMargin>
          <div style={{
          height: '100px'
        }}>Section 2</div>
        </Section>
      </div>;
  }
}
```

### Padding Zero

```tsx
{
  render: args => {
    return <div style={{
      backgroundColor: semantic_colors.background.base
    }}>
        <Section {...args}>
          <SectionTitle title='타이틀' />
          <div style={{
          height: '100px'
        }}>Content Area</div>
        </Section>
      </div>;
  },
  args: {
    padding: 0
  }
}
```

### Padding Zero Mobile

```tsx
{
  render: args => {
    return <div style={{
      backgroundColor: semantic_colors.background.base
    }}>
        <Section responsive='mobile' {...args}>
          <div style={{
          height: '100px'
        }}>Section 1</div>
        </Section>
        <Section responsive='mobile' {...args}>
          <div style={{
          height: '100px'
        }}>Section 2</div>
        </Section>
      </div>;
  },
  args: {
    padding: 0
  }
}
```

### Responsive Desktop

```tsx
{
  render: () => {
    return <div style={{
      backgroundColor: semantic_colors.background.base
    }}>
        <Section responsive='desktop'>
          <div style={{
          height: '100px'
        }}>Section 1</div>
        </Section>
        <Section responsive='desktop'>
          <div style={{
          height: '100px'
        }}>Section 2</div>
        </Section>
      </div>;
  }
}
```

### Responsive Desktop No Margin

```tsx
{
  render: () => {
    return <div style={{
      backgroundColor: semantic_colors.background.base
    }}>
        <Section responsive='desktop' noMargin>
          <div style={{
          height: '100px'
        }}>Section 1</div>
        </Section>
        <Section responsive='desktop' noMargin>
          <div style={{
          height: '100px'
        }}>Section 2</div>
        </Section>
      </div>;
  }
}
```

### Responsive Mobile

```tsx
{
  render: args => {
    return <div style={{
      backgroundColor: semantic_colors.background.base
    }}>
        <Section responsive='mobile' {...args}>
          <div style={{
          height: '100px'
        }}>Section 1</div>
        </Section>
        <Section responsive='mobile' {...args}>
          <div style={{
          height: '100px'
        }}>Section 2</div>
        </Section>
      </div>;
  }
}
```

### Responsive Mobile No Margin

```tsx
{
  render: args => {
    return <div style={{
      backgroundColor: semantic_colors.background.base
    }}>
        <Section responsive='mobile' {...args} noMargin>
          <div style={{
          height: '100px'
        }}>Section 1</div>
        </Section>
        <Section responsive='mobile' {...args} noMargin>
          <div style={{
          height: '100px'
        }}>Section 2</div>
        </Section>
      </div>;
  }
}
```