Skip to main content
Skip table of contents

Card

Overview

A Card Component is a content container. It has settings for images, headers, and footers, a variety of content, background colors appropriate for the context, and outstanding display options.

While using the least amount of markup and styles feasible, cards are nevertheless able to provide a ton of control and flexibility. They are easily alignable and integrate well with other CoreUI components thanks to their flexbox creation. Utilize spacing tools as necessary since cards don't come with top, left, or right margins by default. They will fill the entire width of their parent because they don't have a predetermined width, to begin with.

DartIDE-CUC-Card

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

Import

CODE
import { Card } from '@mui/material';
  • The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

  • When you drag and drop CardView, then Card, CardHeader, CardAction, and CardContent would be generated fast and automatically.

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 size with many selectable Size Units.

General

Visibility: None

Opacity: 100%

The component General set up includes 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 Components:

JavaScript errors detected

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

If this problem persists, please contact our support.