React Simple Card

Simple, easy to use and flexible cards in React.

Table of Contents

• Installation
• Usage
• Examples
• Properties

Installation

npm install --save react-simple-card

Usage

The simplest example.

import React from 'react';
import { render } from 'react-dom';
import { Card, CardHeader, CardBody, CardFooter } from 'react-simple-card';

const App = () => (
    <Card>
        <CardHeader>Header</CardHeader>
        <CardBody>Body</CardBody>
        <CardFooter>Footer</CardFooter>
    </Card>
);

render(<App />, document.getElementById('root'));

The simplest example with the <ImageHeader> instead of <CardHeader>.

import React from 'react';
import { render } from 'react-dom';
import { Card, CardHeader, CardBody, CardFooter } from 'react-simple-card';

const App = () => (
    <Card>
        <ImageHeader imageSrc="http://via.placeholder.com/600x250" />
        <CardBody>Body</CardBody>
        <CardFooter>Footer</CardFooter>
    </Card>
);

render(<App />, document.getElementById('root'));

Examples

• Basic layout - Card, CardHeader, CardBody, CardFooter
• Basic layout with Image header instead - Card, ImageHeader, CardBody, CardFooter
• Without header - Card, CardBody, CardFooter
• Body only - Card, CardBody

Properties

<Card>

Property	Type	Description
children	Function	Allows to nest any components inside <Card> component. This is the place where to <CardHeader>, <ImageHeader>, <CardBody>, <CardFooter>.
bgColor	String	Allows to change the default #fff background.
fontColor	String	Allows to change the default #000 font color by passing a new value.
style	Object	Allows to pass an object of CSS styles, to update or overwrite the default ones.
className	String	Allows to pass extra class names to the component.

<CardHeader>

Property	Type	Description
children	Function	Allows to render child elements inside the <CardHeader> component. Perfect section to place <h1>, <h2>, <h3>, etc tags.
style	Object	Allows to pass an object of CSS styles, to update or overwrite the default ones.
className	String	Allows to pass extra class names to the component.

<ImageHeader>

Property	Type	Description
imageSrc	String	Allows to pass the image URL which will be rendered inside the component.
style	Object	Allows to pass an object of CSS styles, to update or overwrite the default ones.
className	String	Allows to pass extra class names to the component.

<CardBody>

Property	Type	Description
children	Function	Allows to render child elements inside the component. Good idea to use it to pass inner components.
style	Object	Allows to pass an object of CSS styles, to update or overwrite the default ones.
className	String	Allows to pass extra class names to the component.

<CardFooter>

Property	Type	Description
children	Function	Allows to render child elements inside the component.
style	Object	Allows to pass an object of CSS styles, to update or overwrite the default ones.
className	String	Allows to pass extra class names to the component.

License

MIT License

Copyright (c) 2019 Edvins Antonovs.