Cards

Cards are surfaces that display content and actions on a single topic.

They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Table of Contents

• Installation
• AddNewItemCard
• TemplateCard

Installation

yarn add @easyfeedback/cards
# or
npm i @easyfeedback/cards

AddNewItemCard

AddNewItemCard is a Card component for adding a new item.

Import component

import { AddNewItemCard } from '@easyfeedback/cards'

General usage

<AddNewItemCard label="Add New Item" />

Icon Variants

Use the variant prop to change the icon inside the button. You can set the value to add or plane.

<VStack>
  <AddNewItemCard label="Add New Item" variant="add" />
  <AddNewItemCard label="Add New Item" variant="plane" />
</VStack>

Props

| Name | Description | type | Default | | ------- | --------------------------- | -------------------------------------- | ------- | | label | The label of the component. | string | - | | variant | The icon variant to render. | "add" "plane" | add | | onClick | [Optional] | MouseEventHandler<HTMLButtonElement> | - |

TemplateCard

TemplateCard is a Card component for displaying the state, stats and preview of the available templates.

Import component

import { TemplateCard } from '@easyfeedback/cards'

General usage

<TemplateCard href="#!" title="Template 1" imageSrc="#!" views={123} />

Props

| Name | Description | type | Default | | -------- | -------------------------------- | -------- | ------- | | href | The hyperlink to the template. | string | - | | title | The title of the template. | string | - | | imageSrc | The image src attribute. | string | - | | views | [Optional] The number of views | number | - |