Cards

A card is a sheet of material that serves as an entry point to more detailed information. Cards display content composed of different elements whose size or supported actions vary. Cards are a convenient means of displaying content composed of different elements. They’re also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.

Basic Cards

To show this type of Cards you will need this code in down here.

     
<Card className="shadow border-0">
   <CardImg top width="100%" src={image} alt="Card image cap" />
       <CardBody>
          <h3 className="card-title">{title}</h3>
          <CardSubtitle>{subTitle}</CardSubtitle>
          <CardText>{description}</CardText>
          <Button variant="raised" className="bg-primary text-white">{btnText}</Button>
       </CardBody>
</Card>
  

Solid Cards

     
<Card className={`shadow border-0 ${cardStyle}`}>
    <CardBody>
       <h4 className="mb-md-4">{headerText}</h4>
       <h3 className="card-title">Card Title</h3>
       <CardSubtitle className="text-white">Sub-heading text</CardSubtitle>
        <CardText>
            Small plates, salads & sandwiches in an intimate setting with 12 indoor
            seats plus patio seating
         </CardText>
         <CardText>Last modified 2 days ago</CardText>
     </CardBody>
</Card>
   

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
classes	object		Useful to extend the style applied to components.
raised	bool	false	If true, the card will use raised styling.