what is the correct way to add spacing / padding to a card in a sub component?

I am dynamically adding a list of cards called from

<component v-for="component in componentNames" v-bind:is="component" v-bind:key="component" >

in each component I have a standard card

<template>
      <MDBCard>
      <MDBCardHeader>content 1</MDBCardHeader>
      <MDBCardBody>
            <MDBCardTitle>Special title treatment</MDBCardTitle>
            <MDBCardText>
            With supporting text below as a natural lead-in to additional content.
            </MDBCardText>
            <MDBBtn tag="a" href="#!" color="primary">Go somewhere</MDBBtn>
      </MDBCardBody>
      </MDBCard>
</template>

when these components are displayed each row is butted below the previous with no spacing.

reading the docs I have tried adding a surrounding div with different classes but does not change the spacing

class="d-grid gap-2"