Skip to main content

Card

img

Usage​

This props inherits all the div properties from HTML

import React from 'react'
import {
  Card,
  CardHeader,
  CardMedia,
  CardActions,
  Button,
  CardContent,
} from 'qdm-component-library'

function App() {
  return (
    <Card>
      <CardHeader
        avatar={
          <img
            alt="img"
            width="40px"
            height="40px"
            src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
          />
        }
        action={'Action'}
        title="The Card Component"
        subheader="December 01, 2020"
      />
      <CardMedia
        image={
          <img
            style={{ objectFit: 'none' }}
            alt="img"
            width="100%"
            height="100%"
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4X00PWcuWLSkZ5OVzSQjO1bkEcHaCpnRYaA&usqp=CAU"
          />
        }
      />
      <CardActions>
        <Button color={'secondary'} size="medium" name={'Cancel'} />
        <Button size="medium" name={'Save'} />
      </CardActions>
      <CardContent>
        This impressive paella is a perfect party dish and a fun meal to cook
        together with your guests. Add 1 cup of frozen peas along with the
        mussels, if you like.
      </CardContent>
    </Card>
  )
}
export default App

Reference​

Props for CardContent,DialogActions​

className​

props for providing classname to Div component string

id​

props for providing id to Div component string

name​

props for providing name to Div component string

children​

props for providing children for Div Component React Node

inLineStyles​

props give addition props to the Div Component type Object

Props for CardHeader​

className​

props for providing classname to Div component string

id​

props for providing id to Div component string

name​

props for providing name to Div component string

children​

props for providing children for Div Component React Node

inLineStyles​

props give addition props to the Div Component type Object

avatar​

props for providing avatar to CardHeader Componet React Node

action​

props for providing action to CardHeader Componet React Node

title​

props for providing title to CardHeader Componet string

subheader​

props for providing subheader to CardHeader Componet any

Props for CardMedia​

className​

props for providing classname to Div component string

id​

props for providing id to Div component string

name​

props for providing name to Div component string

children​

props for providing children for Div Component React Node

inLineStyles​

props give addition props to the Div Component type Object

image​

props for providing image to CardMedia Component any