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 [email protected]

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

Usage

      <MediaCard
        cardImage={'image-url.jpg'}
        title={'Sample Title'}
        mailId={'[email protected]'}
        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<Theme> | {} | 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). |