mise-en-place

# <Cover />

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

<Cover min-height="300px" pad="3">
  <template v-slot:header>
    Cover Header
  </template>
  Cover Content
  <template v-slot:footer>
    Cover Footer
  </template>
</Cover>

RESULT

Cover Header

Cover Content

Cover Footer


# Props

# minHeight

  • Type: String or Array<String>
  • Default: 100vh

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

# gap

  • Type: String or Array<String>
  • Default: 0

A responsive prop bound to the spacing scale that applies a specified space between successive items in the <Grid />.

# as

  • Type: String
  • Default: div

The HTML element to render the < Cover /> 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.

# Slots

  • Type: String or Array<String>
  • Default: 0

A responsive prop bound to the spacing scale that applies a specified space between successive items in the <Grid />.

  • Type: String or Array<String>
  • Default: 0

A responsive prop bound to the spacing scale that applies a specified space between successive items in the <Grid />.

# 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?

← <Grid /> →