Components
Card

Card

The Card component is a versatile container that can be customized to create various card-style UI elements. It provides options to control its appearance and layout.

Component Structure

The Card component is divided into the following sub-components:

  • Card (Container): The main card container.
  • CardImage (Image): An optional image or background for the card.
  • CardContent (Content): The content area of the card.
  • CardHeader (Header): The header section of the card.
  • CardBody (Body): The main content of the card.
  • CardFooter (Footer): The footer section of the card. By breaking the card into these sub-components, you can easily customize and pass props to each part of the card.

Examples

Basic Usage

<Widget
	src='flashui.near/widget/Card'
	props={{
		srcImage:
			'https://mui.com/static/images/cards/contemplative-reptile.jpg',
		contentHeader: 'Lizard',
		contentBody:
			'Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica',
		contentFooter: 'Share',
	}}
/>

Props

Card (Container)

  • widthCard (string, default: "min-content"): Sets the width of the card.
  • directionCard (string, default: "column"): Sets the flex direction of the card.
  • borderCard (string, default: ".1rem solid rgba(0, 0, 0, .3)"): Sets the border of the card.
  • borderRadiusCard (string or null, default: null): Sets the border radius of the card.
  • boxShadowCard (string, default: "0 .5rem 1rem rgba(0, 0, 0, .1)"): Sets the box shadow of the card.
  • paddingCard (string or null, default: null): Sets the padding of the card.

CardImage (Image)

  • widthImage (string, default: "300px"): Sets the width of the image.
  • heightImage (string, default: "170px"): Sets the height of the image.
  • srcImage (string or null, default: null): Specifies the image source URL.
  • borderRadiusImage (string or null, default: null): Sets the border radius for the image.

CardContent (Content)

  • widthContent (string, default: "100%"): Sets the width of the content area.
  • paddingContent (string, default: ".5rem"): Sets the padding of the content area.
  • marginContent (string or null, default: null): Sets the margin of the content area.
  • backgroundContent (string or null, default: null): Sets the background color or image of the content area.
  • borderContent (string or null, default: null): Sets the border of the content area.
  • borderRadiusContent (string or null, default: null): Sets the border radius of the content area.

CardHeader (Header)

  • contentHeader (ReactNode or null, default: null): The header content.
  • widthHeader (string, default: "100%"): Sets the width of the header.
  • paddingHeader (string, default: ".5rem"): Sets the padding of the header.
  • marginHeader (string or null, default: null): Sets the margin of the header.
  • backgroundHeader (string or null, default: null): Sets the background color or image of the header.
  • borderHeader (string or null, default: null): Sets the border of the header.
  • borderRadiusHeader (string or null, default: null): Sets the border radius of the header.
  • textAlignHeader (string or null, default: null): Sets the text alignment of the header.

CardBody (Body)

  • contentBody (ReactNode or null, default: null): The main content of the card body.
  • widthBody (string, default: "100%"): Sets the width of the card body.
  • paddingBody (string, default: ".5rem"): Sets the padding of the card body.
  • marginBody (string or null, default: null): Sets the margin of the card body.
  • backgroundBody (string or null, default: null): Sets the background color or image of the card body.
  • borderBody (string or null, default: null): Sets the border of the card body.
  • borderRadiusBody (string or null, default: null): Sets the border radius of the card body.

CardFooter (Footer)

  • contentFooter (ReactNode or null, default: null): The footer content.
  • widthFooter (string, default: "100%"): Sets the width of the footer.
  • paddingFooter (string, default: ".5rem"): Sets the padding of the footer.
  • marginFooter (string or null, default: null): Sets the margin of the footer.
  • backgroundFooter (string or null, default: null): Sets the background color or image of the footer.
  • borderFooter (string or null, default: null): Sets the border of the footer.
  • borderRadiusFooter (string or null, default: null): Sets the border radius of the footer.
  • textAlignFooter (string or null, default: null): Sets the text alignment of the footer.
  • fontSizeFooter (string, default: "1rem"): Sets the font size of the footer.
ButtonList