card-consumer.vue

<template>
<!-- This card consumers our card component above.  -->
  <Card>
    <template #header>
      <h2>Check this out</h2>
    </template>
    <template #body>
      <p>This is the body of the card</p>
    </template>
    <template #footer>
      <p>This is the footer</p>
      <p>We can put whatever content we want in these slots</p>
    </template>
  </Card>
</template>

<script lang="ts" setup>

</script>

<style>

</style>

card.module.css

/** 
React has no way to make scoped component styles natively. 
One solution is to use CSS modules with a CSS file per component
**/

.header {
    font-size: 1.5rem;
    margin-bottom: .25rem;
}
.body {
    padding-inline: .5rem;
}
.footer {
    border-top: 2px solid gray;
    margin-top: .5rem;
    padding-inline: .75rem;
}

card.react.tsx

import type { ReactNode } from "react";

interface CardProps {
    header: ReactNode,
    body: ReactNode,
    footer: ReactNode
}

export const Card = (props: CardProps) => {
  return (
    <div>
      <div className="header">
        {props.header ? (
          props.header
        ) : (
          <h2>This is the default header content </h2>
        )}
      </div>
      <div className="body">
        {props.body ? props.body : <p>This is the default body content </p>}
      </div>
      <div className="footer">
        {props.footer ? (
          props.footer
        ) : (
          <p>This is the default footer content </p>
        )}
      </div>
    </div>
  );
};

export const SampleCard = () => {
    <Card
      header={<h2>Card Header</h2>}
      body={
        <>
          <p>Here's the body</p>
          <p>Multiple lines?</p>
        </>
      }
      footer={<p>This is the footer</p>}
    />;
  };
  

card.vue

<template>
    <div>
        <div class="header">
            <slot name="header"><h2>Card Header</h2></slot>
        </div>
        <div class="body">
            <slot name="body"></slot>
        </div>
        <div class="footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.header {
    font-size: 1.5rem;
    margin-bottom: .25rem;
}
.body {
    padding-inline: .5rem;
}
.footer {
    border-top: 2px solid gray;
    margin-top: .5rem;
    padding-inline: .75rem;
}
</style>