https://github.com/ummahusla/react-simple-card
React simple card component
https://github.com/ummahusla/react-simple-card
card react
Last synced: over 1 year ago
JSON representation
React simple card component
- Host: GitHub
- URL: https://github.com/ummahusla/react-simple-card
- Owner: ummahusla
- Created: 2017-09-12T17:24:57.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-01T12:36:06.000Z (over 3 years ago)
- Last Synced: 2025-04-06T14:10:11.228Z (over 1 year ago)
- Topics: card, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-simple-card
- Size: 3.69 MB
- Stars: 22
- Watchers: 2
- Forks: 9
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Simple Card
[](https://travis-ci.org/ummahusla/react-simple-card) [](https://coveralls.io/github/ummahusla/react-simple-card?branch=master)
Simple, easy to use and flexible cards in React.
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Examples](#examples)
- [Properties](#properties)
## Installation
```
npm install --save react-simple-card
```
## Usage
The simplest example.
```js
import React from 'react';
import { render } from 'react-dom';
import { Card, CardHeader, CardBody, CardFooter } from 'react-simple-card';
const App = () => (
Header
Body
Footer
);
render(, document.getElementById('root'));
```
The simplest example with the `` instead of ``.
```js
import React from 'react';
import { render } from 'react-dom';
import { Card, CardHeader, CardBody, CardFooter } from 'react-simple-card';
const App = () => (
Body
Footer
);
render(, document.getElementById('root'));
```
## Examples
- [**Basic layout**](https://codesandbox.io/s/611monz7qz) - `Card`, `CardHeader`, `CardBody`, `CardFooter`
- [**Basic layout with Image header instead**](https://codesandbox.io/s/k2kwznw6qv) - `Card`, `ImageHeader`, `CardBody`, `CardFooter`
- [**Without header**](https://codesandbox.io/s/zqk7jvrnym) - `Card`, `CardBody`, `CardFooter`
- [**Body only**](https://codesandbox.io/s/vnlxr3l6j0) - `Card`, `CardBody`
## Properties
### ``
| Property | Type | Description |
| :---------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | Function | Allows to nest any components inside `` component. This is the place where to ``, ``, ``, ``. |
| `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. |
### ``
| Property | Type | Description |
| :---------- | :------- | :------------------------------------------------------------------------------------------------------------------------------ |
| `children` | Function | Allows to render child elements inside the `` component. Perfect section to place `
`, ``, ``, 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. |
### ``
| 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. |
### ``
| 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. |
### ``
| 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](https://twitter.com/edvinsantonovs).