animated-3d-card
v0.1.3
Published
This component lets you create a 3D card animated for ReactJS.
Downloads
11
Readme
ReactJS Animated 3D Card
This component lets you create a 3D card animated for ReactJS.
This style was created originally by Dev Ed in this video.
Check out the live Demo
Installation
yarn add animated-3d-card
or
npm i animated-3d-card
Usage
import Card, { DefaultButton } from "./Card";
<Card
title="My Title"
description="My Description"
image="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
backgroundCircleColor="linear-gradient(to right, rgba(255, 0, 255, 0.75), rgba(0, 255, 0, 0.75) )"
>
<DefaultButton>Default Button</DefaultButton>
</Card>;
| | Type | Required | Default | Description | | --------------------- | ------ | -------- | --------------------------------------------------------------------------- | -------------------------------------------- | | Title | String | No | Empty String | The title to be shown | | Description | String | No | Empty String | The Description | | Children | JSX | No | Empty Div | Any additional content below the description | | Image (src) | String | No | No Image | The image above the circle | | backgroundCircleColor | String | No | linear-gradient(to right, rgba(245, 70, 66, 0.75), rgba(8, 83, 156, 0.75) ) | Background colour of the circle |