Card

Cards provide a flexible and extensible content container with multiple variants and options.

Basic

My card Title
Some text
Go somewhere
import React from 'react'
import {
  Card,
  CardBody,
  CardTitle,
  CardImg,
  Text,
  Button,
} from '@smooth-ui/core-sc'

function Example() {
  return (
    <Card maxWidth={400}>
      <CardImg src="https://source.unsplash.com/random/1200x400" />
      <CardBody>
        <CardTitle>
          <Text variant="h4">My card Title</Text>
        </CardTitle>
        <Text forwardedAs="p">Some text</Text>
        <Button forwardedAs="a" href="#">
          Go somewhere
        </Button>
      </CardBody>
    </Card>
  )
}

render(<Example />)
import React from 'react'
import {
  Card,
  CardBody,
  CardTitle,
  CardImg,
  Text,
  Button,
} from '@smooth-ui/core-sc'
function Example() {
  return (
    <Card maxWidth={400}>
      <CardImg src="https://source.unsplash.com/random/1200x400" />
      <CardBody>
        <CardTitle>
          <Text variant="h4">My card Title</Text>
        </CardTitle>
        <Text forwardedAs="p">Some text</Text>
        <Button forwardedAs="a" href="#">
          Go somewhere
        </Button>
      </CardBody>
    </Card>
  )
}
render(<Example />)

Header and Footer

This is a card header
My card Title
Some text
Go somewhere
This is a card footer
import React from 'react'
import {
  Card,
  CardBody,
  CardTitle,
  CardHeader,
  CardFooter,
  Text,
  Button,
} from '@smooth-ui/core-sc'

function Example() {
  return (
    <Card maxWidth={400}>
      <CardHeader>This is a card header</CardHeader>
      <CardBody>
        <CardTitle>
          <Text variant="h4">My card Title</Text>
        </CardTitle>
        <Text forwardedAs="p">Some text</Text>
        <Button forwardedAs="a" href="#">
          Go somewhere
        </Button>
      </CardBody>
      <CardFooter>This is a card footer</CardFooter>
    </Card>
  )
}

render(<Example />)
import React from 'react'
import {
  Card,
  CardBody,
  CardTitle,
  CardHeader,
  CardFooter,
  Text,
  Button,
} from '@smooth-ui/core-sc'
function Example() {
  return (
    <Card maxWidth={400}>
      <CardHeader>This is a card header</CardHeader>
      <CardBody>
        <CardTitle>
          <Text variant="h4">My card Title</Text>
        </CardTitle>
        <Text forwardedAs="p">Some text</Text>
        <Button forwardedAs="a" href="#">
          Go somewhere
        </Button>
      </CardBody>
      <CardFooter>This is a card footer</CardFooter>
    </Card>
  )
}
render(<Example />)

Accessibility

There is no specific accessibility issue with cards.

API

Card

CardHeader

CardBody

CardTitle

CardFooter