How to use

import { Accordian } from "fluff-tail";

| Prop | Type | What they do | | ------------ | ------- | ----------------------------------------------------- | | headingColor | string | color for the heading | | descColor | string | color for the description | | href | string | url to route to when user click button | | title | string | title text | | desc | string | description text | | openNewPage | boolean | when user click open link in new page default false |

import { CardHover } from "fluff-tail";

| Prop | Type | What they do | | ----------- | ------- | ----------------------------------------------------- | | image | string | image for the background | | alt | string | alt text for image | | href | string | url to route to when user click button | | title | string | title text | | desc | string | description text | | btnTitle | string | button text | | openNewPage | boolean | when user click open link in new page default false | | showBtn | boolean | wheather to show button or not default true |

import { ArticleDeck } from "fluff-tail";

| Prop | Type | What they do | | ------------- | ------- | ----------------------------------------------------- | | number | number | number of card to draw (1-4) | | subTitle | string | text for the sub title | | href | string | url to route to when user click button | | title | string | title text | | subTitleColor | string | sub title color | | TitleColor | string | title color | | openNewPage | boolean | when user click open link in new page default false | | width | number | width of the card | | height | number | height of the card |

import { FoldingCard } from "fluff-tail";

| Prop | Type | What they do | | -------------------- | ------- | ----------------------------------------------------- | | href | string | url to route to when user click | | title | string | title text | | desc | string | description text | | subTitleLeft | string | text for left sub title | | subTitleRight | string | text for right sub title | | backgroundColor | string | background color of the card | | openNewPage | boolean | when user click open link in new page default false | | titleColor | string | color for the title | | folderHoverColor | string | background color for the folding card when hover | | mainBorderColor | string | border color for the front card / main card | | secondaryBorderColor | string | border color for the back card / secondary card | | arrowColor | string | color for the arrow | | subTitleColor | string | color for the sub-title both left and right | | stripeColor | string | color for the stripes on back card | | width | number | width of the card | | height | number | height of the card |

import { ProfileCard } from "fluff-tail";

| Prop | Type | What they do | | ---------------- | ------- | ---------------------------- | | image | string | image for the background | | alt | string | alt text for image | | name | string | name of the profile | | role | string | role of the profile | | roleColor | string | color for role text | | nameColor | string | color for name text | | backgroundColor | string | background color of the card | | boxShadow | string | box shadow for the card | | disableBackCards | boolean | disable all back cards | | disableOneCard | boolean | disable one back card | | gap | string | gap between image and card | | width | number | width of the card | | height | number | height of the card |

import { ParallaxDepth } from "fluff-tail";

| Prop | Type | What they do | | ----------------- | ------ | ----------------------------------- | | image | string | image for the background | | boxShadowColor | string | color for box shadow | | insideBorderColor | string | color for inside border | | borderColor | string | color for border | | image | string | image for the background | | desc | string | description text | | translateX | number | how much to translateX default 40 | | translateY | number | how much to translateY default 40 | | rotateX | number | how much to rotateX default 30 | | rotateY | number | how much to rotateY default 30 | | width | number | width of the card | | height | number | height of the card |

How to install

npm i fluff-tail

Import component that you want to use

Example

import { CardHover } from "fluff-tail";

<CardHover
  title={"Title"}
  desc={
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo incididunt"
  }
  href={"https://toyoursite.com"}
  btnTitle={"Go to My Site"}
  image={"Pass in a background image"}
  alt={"alt text for image"}
  openNewPage={true} // target set to _blank when set to true
  showBtn={true} // Wheather to show button or not
/>;

Components supported

• Rainbow Stacked Accordian
• Card Hover Interaction
• Article Deck
• Folding Card
• Profile Card
• Parallax depth