Card

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

Examples

tsx

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

export default function MyComponent() {

return (

<Card>

<CardTitle>Card Title</CardTitle>

<CardDescription>Card description goes here</CardDescription>

</CardHeader>

<p>This is the main content of the card.</p>

</CardContent>

<p>Card footer content</p>

</CardFooter>

</Card>

)

}

Preview

Examples

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

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>
  )
}

Was this page helpful?