---
title: Card
description: >-
  A composable component with header, content, and footer sections for
  displaying grouped information.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/card'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/card.md'
---

# Card

A composable component with header, content, and footer sections for displaying grouped information. Accepts standard HTML div props.

Examples

## Preview

![card](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/Card-TQz3aNUn.png)

### Examples

* ####

  ##### tsx

  ```tsx
  import {Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Card Title</CardTitle>
          <CardDescription>Card description goes here</CardDescription>
        </CardHeader>
        <CardContent>
          <p>This is the main content of the card.</p>
        </CardContent>
        <CardFooter>
          <p>Card footer content</p>
        </CardFooter>
      </Card>
    )
  }
  ```

* ####

  ##### Description

  A complete card with header, content, and footer sections

  ##### tsx

  ```tsx
  import {Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Card Title</CardTitle>
          <CardDescription>Card description goes here</CardDescription>
        </CardHeader>
        <CardContent>
          <p>This is the main content of the card.</p>
        </CardContent>
        <CardFooter>
          <p>Card footer content</p>
        </CardFooter>
      </Card>
    )
  }
  ```

***