Skip to main content
Skip table of contents

CardAction

Overview

CardAction is a kind of Action. An ability is a card action if it is preceded by the icon for a card action. A unit can carry out a variety of card actions during its activation; each card action is a separate action. A unit, however, is only permitted to use a card once during activation. CardAction could only be formed after Card gets set up first.

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

Import

CODE
import { Card, CardAction } 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 size.

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:

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.