Card
Rainbow Stacked Accordian
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 |
Card Hover Interaction
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 |
Article Deck
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 |
Folding 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 |
Profile 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 |
Parallax Depth
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 |
npm i fluff-tail
Import component that you want to use
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
/>;