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
/>;