Okay, it’s your turn to try this out. Consider this Callout component. Consider the following. You can choose to ignore the fact that they have different icons if you’d like.

Colors

The callout makes use of the following colors from our theme.

Other Tasting Notes

• The fonts are the base font, but the title of the callout is semibold.
• The corners are rounded using Tailwind rounded class.

Some Starter Code

Here is some code to get your started if that’s helpful. Let’s start with the component.

import type { PropsWithChildren } from 'react';
import { cva, type VariantProps } from 'class-variance-authority';

type CalloutProps = PropsWithChildren<{ title: string }> & VariantProps<typeof variants>;

const variants = cva(['p-4', 'rounded', 'border', 'shadow-md', 'space-y-4']);

export const Callout = ({ title, children }: CalloutProps) => (
	<div className={variants({})}>
		<h2 className="font-semibold">{title}</h2>
		<p>{children}</p>
	</div>
);

And now for the story (ideally in src/components/callout/callout.stores.tsx):

import type { Meta, StoryObj } from '@storybook/react';
import { Callout } from './callout';

const meta = {
	title: 'Components/Callout',
	component: Callout,
	args: {
		title: 'An Important Message',
		children: 'This is a message that you should read.',
	},
} satisfies Meta<typeof Callout>;

export default meta;
type Story = StoryObj<typeof Callout>;

export const Default: Story = {};