fluff-tail

Fluff Tail

Fluff-tail is a custom component library for React

How to use

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

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

Card

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