# react-flat-cards > A react-based component for displaying sheet cards. Latest version **1.0.18** (published 2022-04-06) · MIT license · 0 weekly downloads ## Install ```sh npm install react-flat-cards pnpm add react-flat-cards yarn add react-flat-cards bun add react-flat-cards ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.18 | | Published | 2022-04-06 | | First published | 2022-04-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 9 | | Unpacked size | 11 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Oz Hershco | | Maintainers | shuffle8 | | Keywords | react, components, ui | ## Links - npm: https://www.npmjs.com/package/react-flat-cards - Repository: https://github.com/Oz-Hershco/react-flat-cards - Homepage: https://github.com/Oz-Hershco/react-flat-cards#readme - Issues: https://github.com/Oz-Hershco/react-flat-cards/issues - npm.io page: https://npm.io/package/react-flat-cards ## Dependencies (9) - [node-sass](https://npm.io/package/node-sass.md) ^7.0.1 - [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4 - [webpack-cli](https://npm.io/package/webpack-cli.md) ^4.9.2 - [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.4 - [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1 - [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^12.1.2 - [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.6.0 - [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.1 - [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0 ## Alternatives - [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads - [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads - [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads - [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads - [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads ## Recent versions - 1.0.18 (latest) — 2022-04-06 - 1.0.17 — 2022-04-06 - 1.0.16 — 2022-04-05 - 1.0.15 — 2022-04-05 - 1.0.14 — 2022-04-05 - 1.0.13 — 2022-04-05 - 1.0.12 — 2022-04-05 - 1.0.11 — 2022-04-05 - 1.0.10 — 2022-04-05 - 1.0.9 — 2022-04-05 - 1.0.8 — 2022-04-05 - 1.0.7 — 2022-04-05 - 1.0.6 — 2022-04-05 - 1.0.5 — 2022-04-04 - 1.0.4 — 2022-04-03 - … 4 more at https://npm.io/package/react-flat-cards/versions ## README # React Flat Cards A react-based component for displaying sheet cards. [![N|Solid](https://github.com/Oz-Hershco/react-flat-cards/blob/master/logo192.png?raw=true)](https://github.com/Oz-Hershco/react-flat-cards) ## Introduction I created this package to make my life a bit easier when working on my own projects. I'm planning to add more things in the future, but as a first step I thought it would be nice to share this with others. If you find this helpful, please feel free to use it! Btw, this is my first npm package so I would be happy to learn from others how to do things better. You can click the package logo or [here](https://github.com/Oz-Hershco/react-flat-cards) to get to this package repo on git. Thanks for reading and enjoy! ## Install Install using `npm i react-flat-cards` ## Basic Usage ```js import { FlatCard } from 'react-flat-cards'; function App() { return (
); } ``` ![N|Solid](https://github.com/Oz-Hershco/react-flat-cards/blob/master/example1.png?raw=true) ## Props | Name | Type | Default | Description | | ------ | ------ | ------ | ------ | | thumbnail | string | Required | Should include a source of an image. | | title | string | Required | Should include the title text you would like to display on the card. | | description | string | Required | Should include the detailed text description of the card. | | secondaryText | string | undefined | Should include the text you wish to include on the top right side of the card.| | className | string | undefined | A class name that will be assigned to the main div of the flat card component.| | thumbnailClass | string | undefined | A class name that will be assigned to the thumbnail of the flat card component.| | contentWrapperClass | string | undefined | A class name that will be assigned to the content container of the flat card component.| | contentHeaderClass | string | undefined | A class name that will be assigned to the content header container of the flat card component.| | secondaryContainer | React component / JSX | undefined | Custom React component/JSX expression that replaces the existing secondary container. *If added, secondaryText will be ignored.| | readMoreEnabled | boolean | false | Enables the option to limit description text to a certain amount of characters, presenting the user with the option to read more or less of the description.| | readMoreCharacterLimit | number | 100 | Define the amount of description characters to limit from view. *Ignored is readMoreEnabled is set to false| --- _Source: https://npm.io/package/react-flat-cards · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._