Card

img

A basic Card component that should render nicely on any platform. Supports a good level of customization.

You can customization Card component with the Props

Usage#

import React, {FC} from 'react';
import {Body, Card , Text} from 'qdmrncomponents';
const App: FC = () => {
return (
<Body>
<Card>
<Text label="Text 1"/>
<Text label="Text 2"/>
</Card>
</Body>
);
};

Reference#

Props#

here all the list of Props you can use for Card Component and it Inherits all CardProps Props

bgColor#

props can change the background color of the Card area type string

import React, {FC} from 'react';
import {Body, Card , Text} from 'qdmrncomponents';
const App: FC = () => {
return (
<Body>
<Card bgColor="red">
<Text label="Text 1"/>
<Text label="Text 2"/>
</Card>
</Body>
);
};

defaut it is white#

border#

props for adding border to the Card area type number

borderColor#

props for adding color to the border of the Card area type string

borderStyle#

props for adding style to the border area type string--'solid'|'dashed'|'dotted' dashed and dotted style applies only adding border radius to the card

paddingAll#

props for padding for all the four sides of the Card by default it none number

defaut it is none#

paddingLR#

props for padding for left and right of the Card by default it none number

defaut it is none#

paddingTB#

props for padding for top and bottom the four sides of the Card by default it none number

defaut it is none#

marginAll#

props for margin for all the four sides of the Card by default it none number

defaut it is none#

marginLR#

props for margin for left and right of the Card by default it none number

defaut it is none#

marginTB#

props for margin for top and bottom the four sides of the Card by default it none number

defaut it is none#

elevation#

props for adding box shadow to the card number

inlineStyle#

props give addition props to the Button element type Object