Hyper Elementsv0.3
Get started

Sections and layout

Section

A band across the whole window, directly in an Email or Page: its background spans the window, its children are stacked at the content width.

import { Section } from "@hyper-elements/react";

Example

Show the code
section.tsx
import { Email, Heading, Text, Section } from "@hyper-elements/react";

export default function Example() {
  return (
    <Email width={520} style={{ backgroundColor: "#ffffff", fontFamily: "Inter, Helvetica, Arial, sans-serif", color: "#0f172a", gap: 16 }}>
      <Section style={{ backgroundColor: "#0f172a", padding: 32, gap: 8, textAlign: "center" }}>
        <Heading level={2} style={{ color: "#ffffff", fontSize: 22 }}>Full-bleed band</Heading>
        <Text style={{ color: "#94a3b8" }}>Its background reaches the window's edges.</Text>
      </Section>
    </Email>
  );
}

Reference

A band across the whole window, directly in an Email or Page: its background spans the window, its children are stacked at the content width.

Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html. Drawn in: email, page.

style:

  • color: color (inherited)
  • fontFamily: fontFamily (inherited)
  • fontSize: a length (a number of px) (inherited)
  • fontWeight: fontWeight (inherited)
  • fontStyle: one of “normal”, “italic” (inherited)
  • lineHeight: lineHeight (inherited)
  • letterSpacing: a length (a number of px) (inherited)
  • textAlign: one of “left”, “center”, “right”, “justify” (inherited)
  • textTransform: one of “none”, “uppercase”, “lowercase”, “capitalize” (inherited)
  • backgroundColor: color
  • padding: insets
  • border: border
  • gap: a length (a number of px). Space between children.
  • alignItems: one of “start”, “center”, “end”, “stretch”. Where children sit across the layout’s direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.

mobile (on phones): fontSize, lineHeight, letterSpacing, textAlign, padding, border, gap.