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