CardHeader

Overview

CardHeader is a versatile component that can make Card layouts look great. A complex component with a flexbox is set as the root component, with an avatar, title, subheader, and action. Also it is used to display card titles and footers for some additional information or for custom actions. CardHeader has an option for adding images in the header. Similar to CardAction, if you want to drag and drop CardHeader, first set up Card.

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

Import

CODE

import { Card, CardHeader } 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	The component layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
Title	Font-family: None Font-weight: None Text-align: Left	The component text includes Text, Font-family, Font-size, Font-weight, Font-color, Text-align.
Avatar	Avatar: Disabled	The component Avatar includes Avatar and Textbox to import Avatar.
General	Opacity: 100%	The component General includes Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

 <CardHeader
                id="CardHeader"
                sx={{':active': {'margin': '1px 2px 3px 4px','padding': '1px 2px 3px 4px',
                'width': '15px', 'height': '20px', 'position': 'absolute',
                'top': '20px', 'right': '25px', 'bottom': '30px','left': '15px',},}}
                title="150px"
                titleTypographyProps={{ 'fontFamily': 'Noto-Sans' }}
                avatar={<img alt="Image" src={IconA88a8cd82ccd942fe3593d73fc1fb8f7Copy} />}>
</CardHeader>

Related Component:

Card