@licuido-ui/ui_media-card NPM

MediaCard

The MediaCard is a reusable React component that provides a customizable and versatile card layout for displaying media content, such as images, along with related information, titles, descriptions, and action buttons.

Author

@author Akila Kalaiyarasan akila@crayond.co

Link

Story Book Link ButtonGroup

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_media-card

Import component

import { MediaCard } from '@licuido-ui/ui_media-card';

Usage

<MediaCard cardData={[]} />

Image

alt text

Usage

      <MediaCard
        cardImage={'image-url.jpg'}
        title={'Sample Title'}
        mailId={'sample@email.com'}
        mobile={'123-456-7890'}
        desc={'This is a sample description for the MediaCard component.'}
        buttons={[
          {
            text: 'Button 1'
            onClick: () => {},
            style: {},
            disabled: false,
          },
        ]}
    />

Props

Name	Type	Default	Description
id	string	string	string
className	string	''	Custom class name for the root element of the `MediaCard`.
sx	SxProps\	{}	Custom style object for the root element.
cardImage	string	(required)	The URL of the image to be displayed on the card.
buttons	ButtonItem[]	[]	An array of buttons to be displayed on the card.
title	string	''	The title to be displayed on the card.
mailId	string	''	The email address to be displayed on the card.
mobile	string	''	The mobile number to be displayed on the card.
divider	boolean	true	Set to `true` to display a divider between the content and buttons.
desc	string	''	The description to be displayed on the card (applicable only in 'contentOriented' variant).
variant	'imageOriented' or 'contentOriented'	'contentOriented'	The variant of the `MediaCard`, either 'imageOriented' or 'contentOriented'.
cardStyle	SxProps	{}	Custom style object for the card element.
cardWrapperStyle	SxProps	{}	Custom style object for the wrapper element around the card.
cardMediastyle	SxProps	{}	Custom style object for the card media (image) element.
cardContentStyle	SxProps	{}	Custom style object for the card content element.
titleStyle	SxProps	{}	Custom style object for the title element.
subTitleWrapStyle	SxProps	{}	Custom style object for the subtitle wrapper element.
mailIdStyle	SxProps	{}	Custom style object for the mailId element.
dotStyle	SxProps	{}	Custom style object for the dot separator element.
mobileNumberStyle	SxProps	{}	Custom style object for the mobile number element.
dividerStyle	SxProps	{}	Custom style object for the divider element.
descStyle	SxProps	{}	Custom style object for the description element (applicable only in 'contentOriented' variant).
buttonWrapStyle	SxProps	{}	Custom style object for the wrapper element around the buttons (applicable only in 'contentOriented' variant).

@emotion/react @emotion/styled @mui/material @licuido-ui/ui_basic-button react react-dom

@licuido-ui/react

0.0.2

8 months ago