Card

[Willienn]

Card

A card is a container that holds information and actions related to a single concept or object, like a document or a contact.

Tasks:

• [x] Card
  • [x] as: "div"
  • [x] checkbox: The internal checkbox element that renders when the card is selectable.
  • [x] floatingAction: Floating action that can be rendered on the top-right of a card. Often used together with selected, defaultSelected, and onSelectionChange props
  • [x] appearance: Sets the appearance of the card.
  • filled The card will have a shadow, border and background color.
  • filled-alternative This appearance is similar to filled, but the background color will be a little darker.
  • outline This appearance is similar to filled, but the background color will be transparent and no shadow applied.
  • subtle This appearance is similar to filled-alternative, but no border is applied.
  • [x] focusMode: Sets the focus behavior for the card.
  • [x] orientation: Defines the orientation of the card.
  • [x] size: Controls the card's border radius and padding between inner elements.
  • [x] selected: Defines the controlled selected state of the card.
  • [x] defaultSelected: Defines whether the card is initially in a selected state when rendered.
  • [x] onSelectionChange: Callback to be called when the selected state value changes.
  • [x] behavior: follow behavior specified here
• [x] CardFooter
  • [x] as: "div"
  • [x] action: Container that renders on the far end of the footer, used for action buttons.
• [x] CardHeader
  • [x] as: "div"
  • [x] header: Element used to render the main header title.
  • [x] image: Element used to render an image or avatar related to the card.
  • [x] description: Element used to render short descriptions related to the title.
  • [x] action: Container that renders on the far end of the footer, used for action buttons.
• [x] CardContent
  • [x] as: "div"
  • [x] logo: Container that holds a logo related to the image preview provided.