@leafygreen-ui/callout v9.0.21
Callout
View on MongoDB.design
Installation
Yarn
yarn add @leafygreen-ui/callout
NPM
npm install @leafygreen-ui/callout
Example
<Callout variant={Variant.Note} title="Title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book.
</Callout>
Output HTML
<div className="leafygreen-ui-15l3je2">
<div>
<div className="leafygreen-ui-1gyqpuu">
<svg
width="16"
height="16"
role="img"
viewBox="0 0 16 16"
className="leafygreen-ui-1n4dsve"
>
<title>Edit Icon</title>
<path
d="M11.352 6.648l-2-2L11 3l2 2-1.648 1.648zM6 12l-3 1 1-3 4.648-4.648 2 2L6 12z"
fill="currentColor"
fillRule="evenodd"
></path>
</svg>
<div>Note</div>
</div>
<div className="leafygreen-ui-1wkamxg">
<div className="leafygreen-ui-oll38v">Title</div>
<div className="leafygreen-ui-7kuxj3">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</div>
</div>
</div>
</div>
Properties
Prop | Type | Description | Default |
---|---|---|---|
variant | 'note' , 'tip' , 'important' , 'warning' , 'example' | Sets the variant for the Callout | |
children | node | The contents to display within the Callout | |
title | string | Optional title text to display above Callout text | |
className | string | Adds a className to the outermost element | |
baseFontSize | 13 , 16 | Determines font-size for body copy in Callout component | 13 |
darkMode | boolean | Determines if the component renders in dark theme | false |
24 days ago
1 month ago
2 months ago
7 months ago
8 months ago
6 months ago
9 months ago
9 months ago
8 months ago
9 months ago
10 months ago
10 months ago
10 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago