ComponentsHero SectionsSplit Hero Section

Split Hero Section

Build faster.

Ship your emails with confidence and speed using our tools.

Get Started
Hero
import { Section, Row, Column, Heading, Text, Button, Img } from "@react-email/components";

export const SplitHero = () => (
    <Section style={{ padding: "40px 0" }}>
        <Row>
            <Column>
                <Heading as="h1">Build faster.</Heading>
                <Text>Ship your emails with confidence and speed using our tools.</Text>
                 <Button href="#" style={{ background: "#000", color: "#fff", padding: "10px 20px", borderRadius: "5px"}}>Get Started</Button>
            </Column>
            <Column>
                <Img src="https://via.placeholder.com/300" alt="Hero" width="300" style={{ borderRadius: "8px" }} />
            </Column>
        </Row>
    </Section>
);