How to import vue component with custom parameters?

Question

Vue.js

There is a small project with components/progressBar (or card).
codesandbox.io

<template>
  <div class="hello">
    <b-card :bg-variant="color" text-variant="white" header="Primary" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: ['color'],
  data() {
    return {
    };
  },
};
</script>

С I :bg-variant="color"
import this component into App:
<Card :variant="color"/>
But there is no effect.
Question: how to import a component with its own parameters, in this case with a background? To be able to insert multiple cards with different colors?

Answer 1

props: ['color'], !!!

<Card :color="color"/>
<Card color="#f00"/>