Enzyme UI

# Card

Card is flexible container element. Card component is based on Bootstrap's card (opens new window), therefore you can use classes provided by Bootstrap Card.

# Card slots

Card element has these slots:

  • default - content of this slot will be inside .card-body element.
  • header - content of this slot will be inside .card-header element.
  • footer - content of this slot will be inside .card-footer element.

# Example 1

Header text inside header slot
Some default card text inside default slot with .card-body class
Footer text inside footer slot
<card>
    <template slot="header">Header text inside header slot</template>
    <b>Some default card text inside default slot with .card-body class</b>
    <template slot="footer">Footer text inside footer slot</template>
</card>

# Example 2

Header text inside header slot
Some default card text inside default slot with .card-body class
<card>
    <template slot="header">Header text inside header slot</template>
    <b>Some default card text inside default slot with .card-body class</b>
</card>

# Props

name description required type
cardClasses Additional classes applied to .card String
bodyClasses Additional classes applied to .card-body false String, Array
headerClasses Additional classes applied to .card-header false String, Array
footerClasses Additional classes applied to .card-footer false String, Array

← Charts →