Card

This is the <Card /> component.

Plese Note that this is parent componet of most of the cards in candy.com. Plese check compositions and storybook in candy app.

---

Presentation

sold

Source

@candy/kitkat/card

<Card href={''} isSold={true}><Button appearance="secondary">View Details</Button></Card>

---

Basic Usage

import Card from '@candy/kitkat/product-card'

export const MyComponent = () => {
  return (
    <Card>
      <Button appearance="secondary">View Details</Button>
    </Card>
  )
}

---

Component API Card Skeleton

Name	Type	Default	Description
alignContent	AlignContentTypes	-	align content (matadata)
appearance	'square' / 'unset'	'square'	types of skeletons
assetToShow	circular / rectangular / text / thumbnail / sort	-	types of skeletons
assetUrl	string / string[]	-	assets to show in card
assetContent	ReactNode	-	usually used for metadata section in cards
cardAlert	circular / rectangular / text / thumbnail / sort	-	types of skeletons
children	ReactNode	-	child components
countdown	CountdownTimerProps	-	used for drop timer
dataTestId	string	-	test id
gapContent	string	-	gap / spacing
href	boolean	-	href url
isDisabled	string	-	Disable Card actions
isMyListing	boolean	-	Card Alert Banner
isSaleEnded	boolean	-	Card Alert Banner
isSelected	boolean	-	Card Alert Banner
isSold	boolean	-	Card Alert Banner
isSoldOut	boolean	-	Card Alert Banner
justifyContent	AlignContentTypes	-	types of skeletons
selectCard	boolean	-	used for challanges
style	CSSProperties	-	additional styles