Callout
Callouts can be used to create sidebar panels or call out important content in an email.
Basics
A Callout adds a border, background, and some padding.
import { StyleProvider, Row, Column, Text, Callout } from "@muil/components";
<StyleProvider>
<Row>
<Column small="6">
<Text>Not in a callout :(</Text>
</Column>
<Column small="6">
<Callout secondary>
<Text>I am in a callout!</Text>
</Callout>
</Column>
</Row>
<Callout primary>
<Row>
<Column small="12">
<Text>This whole row is in a callout!</Text>
</Column>
</Row>
</Callout>
</StyleProvider>;
Coloring
The color of a callout can be changed by adding the primary
, success
, warning
, or alert
properties. A callout without a color property will have a white background.
import { StyleProvider, Callout } from "@muil/components";
<StyleProvider>
<Callout>
<Text>
Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris.
</Text>
</Callout>
<Callout primary>
<Text>
Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris.
</Text>
</Callout>
<Callout success>
<Text>
Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris.
</Text>
</Callout>
<Callout warning>
<Text>
There may be Krakens around. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris.
</Text>
</Callout>
<Callout alert>
<Text>
Incoming Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris.
</Text>
</Callout>
</StyleProvider>;
Properties
Property | Type | Description |
---|---|---|
primary | Boolean | primary style |
secondary | Boolean | secondary style |
success | Boolean | success style |
warning | Boolean | warning style |
alert | Boolean | alert style |
className | String | class name |
style | Object | style |