CardContent

Overview

CardContent is a component to show content within a Card. There are various types of content inside a card such as images, buttons, texts, headlines, footers… CardContent plays a crucial role in displaying these contents to the users. Similar to CardAction, if you want to drag and drop CardContent, first set up Card.

Please refer to this for more information: https://mui.com/material-ui/api/card-content/.

Import

CODE

import { Card, CardContent } from '@mui/material';

The above source will be imported automatically after dragging and dropping Basic Component to the UI Preview Panel.

Property

Property:

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
State	State: Normal	The State of the created Component.
Margin and Padding	Size Unit: Px	The component Margin and Padding with many selectable Size Units.
Size	Size Unit: Px	The component Size of Width and Height with many selectable Size Units.
Layout	Position: None Size Unit: Px	The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
General	Visibility: None Disabled: False DefaultExpanded: False Expanded: False Opacity: 100%	The component General set up including Disabled, defaultExpanded, Expanded, Visibility, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

 <Card sx={{ maxWidth: 345 }}>
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Lizard
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Lizards are a widespread group of squamate reptiles, with over 6,000
          species, ranging across all continents except Antarctica
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Share</Button>
        <Button size="small">Learn More</Button>
      </CardActions>
  </Card>

Related Component:

Card