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

Spacer

Vertical spacing in emails is inconsistent. The spacer component will help you create the space you need, the same on every device and client.

Basics

Vertical spacing between email clients is not as simple as it sounds, in fact, it’s consistently inconsistent. Versions of Outlook don’t respect margin and padding the same and
’s are different all over the place.

The spacer is used to create vertical spacing between elements. The size size="x" attribute allows you to set the height in pixels of vertical spacing you need.

import { StyleProvider, Container, Text, Spacer } from "@muil/components";

<StyleProvider>
  <Container>
    <Text>Stuff on top</Text>
    <Spacer size="100" />
    <Text>Stuff on bottom</Text>

    <Text>Stuff above...</Text>
    <Spacer sizeSmall={40} sizeLarge={100} />
    <Text>...stuff below.</Text>
  </Container>
</StyleProvider>;

Heat map

Properties

PropertyTypeDescription
sizeStringsize of space in px
sizeSmallStringsize of space in px in small screen
sizeLargeStringsize of space in px in large screen
classNameStringclass name
styleObjectstyle
← MenuWrapper →
  • Basics
  • Properties
Copyright © 2021 muil