Callout Card

1.7.0

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;

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.

CalloutCard

Name	Type	Description
appearance*	'danger' 'neutral' 'primary' 'success' 'warning'	CalloutCard color.
icon*	React.FC<IconProps>	The SVG contents to display in the Icon.
title*	string	Title.
subtitle*	string	Subtitle.
link	<Link />	Slot intended to position the Callout Card link correctly.
onClick	() => void;	Event fired when clicking the component.