Skip to content
React simple card component
TypeScript JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example react-simple-card v2 Oct 23, 2019
src
.editorconfig
.gitignore
.prettierrc
.travis.yml Few minor fixes Oct 23, 2019
README.md
package.json
rollup.config.js
tsconfig.json
tsconfig.test.json
yarn.lock

README.md

React Simple Card

Build Status Coverage Status

Simple, easy to use and flexible cards in React.

Table of Contents

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

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.

You can’t perform that action at this time.