MDK Logo

CardHeader

Top region of a `Card` that groups the title, optional subtitle, and an action slot.

Top region of a <Card> that groups the title, optional subtitle, and an action slot.

import { CardHeader } from "@tetherto/mdk-react-devkit";

CardHeader exposes no documented props.

Usage

Layout card with optional Card.Header, Card.Body, and Card.Footer slots. Default children go to body. Forwards all native <div> attributes; pass onClick to make the whole card clickable.

Slots

<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>Content</Card.Body>
  <Card.Footer>Actions</Card.Footer>
</Card>

Example

/** * Runnable example for Card. */import { Button, Card } from '@tetherto/mdk-react-devkit'export const CardExample = () => (  <Card className="mdk-example-card">    <Card.Header>      <strong>Container 03</strong>    </Card.Header>    <Card.Body>      <p>Power: 31.5 kW</p>      <p>Hashrate: 102.4 TH/s</p>    </Card.Body>    <Card.Footer>      <Button variant="primary" size="sm">        Details      </Button>    </Card.Footer>  </Card>)