Callout Card

This component is used to provide the user with useful information, tips, tutorials or shortcuts to other parts of the product. It is a visual component specially designed to be used in contexts such as integration, tutorials or dashboards, where we need to show different relevant information in the same space.

import React from "react";
import { CalloutCard } from "@nimbus-ds/patterns";
import { BoxUnpackedIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => (
  <CalloutCard
    appearance="neutral"
    title="Title"
    subtitle="Subtitle"
    icon={BoxUnpackedIcon}
  />
);

export default Example;

Ver no Figma

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/callout-card

Props

Additional props are passed to the <CalloutCard> element. See div docs for a list of props accepted by the <CalloutCard> element.