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

Wrapper

Wrapper creates the necessary structure to wrap elements so that full width backgrounds can be applied.

Basics

import { StyleProvider, Wrapper } from "@muil/components";

<StyleProvider>
  <Wrapper>content</Wrapper>
</StyleProvider>;

Heat map

Full (fluid) width header or footer

import {
  StyleProvider,
  Container,
  Wrapper,
  Row,
  Column,
  Image,
  Text,
} from "@muil/components";

<StyleProvider>
  <Container>
    <Wrapper class="header" bgcolor="#8a8a8a" style={{ background: "#8a8a8a" }}>
      <Container>
        <Row class="collapse">
          <Column small="6" valign="middle">
            <Image src="https://placehold.it/200x50/663399" />
          </Column>
          <Column small="6" valign="middle">
            <Text class="text-right">BASIC</Text>
          </Column>
        </Row>
      </Container>
    </Wrapper>
  </Container>
</StyleProvider>;

Heat map

Properties

PropertyTypeDescription
bgcolorStringbackground color
styleObjectstyle
innerStyleStringstyle of inner component
classNameStringclass name
innerClassNameStringclass name of inner component
← SpacerCharts →
  • Basics
  • Full (fluid) width header or footer
  • Properties
Copyright © 2021 muil