mise-en-place

# <Container />

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis inventore autem minus optio dolorem id. Cumque pariatur ex facere voluptatem perspiciatis porro libero. Suscipit blanditiis eum saepe obcaecati quis aliquam?

# Usage

<Container :max-width="['200px', '400px', '500px']" pad="4">
  ...
</Container>

RESULT

Container Content


# Props

# maxWidth

  • Type: String or Array<String>
  • Default: var(--measure)

A responsive prop that specifies the max-width CSS value for the <Container /> component. By default, this value is set to the measureWidth value in your mise-en-place config.

# as

  • Type: String
  • Default: div

The HTML element to render the < Container /> component as. See semantic HTML for more details.

# css

  • Type: Object
  • Default: {}

Additional styles applied to the component that leverage the theme when available. Visit the css prop documentation for more details.

# Examples

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis inventore autem minus optio dolorem id. Cumque pariatur ex facere voluptatem perspiciatis porro libero. Suscipit blanditiis eum saepe obcaecati quis aliquam?

← <Cover /> →