Muil

Muil

  • Docs
  • Configurations
  • API
  • Blog

›Components

Getting Started

  • Quick Start Guide
  • Slow Start Guide
  • Run Templates Viewer
  • Write Template
  • Styling Template
  • Solutions
  • Why Muil

Configurations

  • CLI
  • Custom Webpack Config
  • Custom Babel Config

API

  • Authorization
  • Sending Email
  • Generating PDF
  • Generating Image
  • Generating HTML

Email Limitations

  • Fonts
  • SVG

Components

  • Intro
  • Grid
  • Style
  • Alignment
  • Typography
  • Button
  • Callout
  • Menu
  • Spacer
  • Wrapper
  • Charts
  • PDF Page

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>;

Heat map

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>;

Heat map

Properties

PropertyTypeDescription
primaryBooleanprimary style
secondaryBooleansecondary style
successBooleansuccess style
warningBooleanwarning style
alertBooleanalert style
classNameStringclass name
styleObjectstyle
← ButtonMenu →
  • Basics
  • Coloring
  • Properties
Copyright © 2021 muil