1.0.0 • Published 8 years ago
react-marmalade v1.0.0
Marmalade API
import Marmalade, { Body, Section, Column } from 'react-marmalade'Body
Use once as the container, accepts pixels or percentages for maxWidth.
<Body maxWidth="600px">
</Body>Section
Use for full width horizontal elements. Setting a width will center the section.
<Body maxWidth="600px">
<Section width="400px">
</Section>
</Body>Column
Add columns to divide up the section and render your elements.
<Body maxWidth="600px">
<Section width="400px">
<Column width="100%">
<h1>Simple HTML like headings and paragraphs</h1>
</Column>
</Section>
</Body>Compose elements together to create complex email friendly components
class Divider extends Component {
render() {
const styles = {
fontSize: "1px",
margin: "0 auto",
borderTop: "1px solid lightgrey",
width: "100%"
}
return (
<Section>
<Column width="100%">
<p style={styles} />
</Column>
</Section>
)
}
}