AI Card

Overview

Resources

Install

yarn add @camp/ai-card

Basic Card Usage

The AI Card is exported with several helper components that can be used to style the card content.

• Card - The main card wrapper.
• StyledCardHeader - The header content of the card.
• StyledCardBody - The body content of the card; set hasHeader to true to remove the top padding on the body content.
• HeaderText - The text for the header; includes ellipsis truncation styling for long titles.
• ChartWrapper - The wrapper for a chart component; set a string value for height to set the height of the chart container (for use with ResponsiveContainer).

Example

This card includes a header and body content.

import { Card, HeaderText, StyledCardHeader, StyledCardBody } from '@camp/ai-card';
 
<Card>
  <StyledCardHeader>
    <HeaderText>
      Card Header with a long title that should not wrap but should be truncated
    </HeaderText>
  </StyledCardHeader>
  <StyledCardBody>
    {' '}
    // You can optionally set `hasHeader` to `true` to remove the top padding on this body content.
    This is a basic card with a header and body content. The card component is flexible and can be
    used for various content types.
  </StyledCardBody>
</Card>;

Chart Wrapper

AI Cards can include a chart component using ChartWrapper. Set a string value for height to set the height of the chart container (for use with ResponsiveContainer).

import { Card, StyledCardHeader, StyledCardBody, HeaderText, ChartWrapper } from '@camp/ai-card';
 
<Card>
  <StyledCardHeader>
    <HeaderText>Chart Container</HeaderText>
  </StyledCardHeader>
  <StyledCardBody>
    <ChartWrapper height="200px">
      {' '}
      // Set a string value for `height` to set the height of the chart container (for use with
      `ResponsiveContainer`)
      <div>Chart content would go here</div>
    </ChartWrapper>
  </StyledCardBody>
</Card>;

Block Card Usage

Block Cards are an interactive variation of the AI Card component. They have a responsive layout based on the width of the card container.

Example

import { BlockCard } from '@camp/ai-card';
 
// Example stock images
const sampleImages = [
  'https://picsum.photos/id/15/200/300',
  'https://picsum.photos/id/19/200/300',
  'https://picsum.photos/id/17/200/300',
];
 
function Example() {
  return (
    <div style={{ width: '600px' }}>
      <BlockCard
        type="automation" // Current available types are "automation" and "campaign_id"
        title="7-Day Welcome Drip Campaign"
        description="A 7-day email sequence to nurture new leads and increase engagement with your hardware store."
        isLoadingData={false}
        isLoadingImages={false}
        isOpen={false}
        images={sampleImages}
        maxImages={3}
        onClick={() => undefined}
      />
    </div>
  );
}

Props

Loading states

The Block Card supports loading states for both data and images.

isLoadingData

When prop isLoadingData is set to true, the card will display this loading state for the data content.

isLoadingImages

When prop isLoadingImages is set to true, the card will display this loading state for the images.

isLoadingData & isLoadingImages

When props isLoadingData and isLoadingImages are both set to true, the card will display this loading state for both the data and images.

Open state

When prop isOpen is set to true, the card will display this open state. This matches the active pseudo state styles and is meant to be used when the card is active, such as when a user clicks on the card from the ActiveIntelligence sidebar and the relevant content is actively being displayed.

Truncation behavior

When the title or the description text is too long, it will be truncated with an ellipsis.

Disabled state

When prop isDisabled is set to true, the card will display this disabled state.

Best practices

• Use Block Cards for interactive content that users can click to expand or navigate
• Set appropriate loading states to provide feedback during data fetching

Content guidelines

Accessibility

Keyboard support

• Tab: Navigate through interactive elements within the AI Card
• Enter/Space: Activate buttons and interactive elements