Hyper Elementsv0.3
Get started

Sections and layout

Row

Lays its children out side by side. A child takes its width, or a share of what's left (its flex, 1 by default).

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

Example

Show the code
row.tsx
import { Column, Email, Text, Row } 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 }}>
      <Column style={{ padding: 24, gap: 16 }}>
        <Row style={{ gap: 12 }}>
          <Column style={{ width: 140, backgroundColor: "#fee2e2", borderRadius: 8, padding: 16 }}>
            <Text style={{ fontWeight: 700 }}>140px</Text>
          </Column>
          <Column style={{ flex: 2, backgroundColor: "#e0e7ff", borderRadius: 8, padding: 16 }}>
            <Text style={{ fontWeight: 700 }}>flex: 2</Text>
          </Column>
          <Column style={{ backgroundColor: "#dcfce7", borderRadius: 8, padding: 16 }}>
            <Text style={{ fontWeight: 700 }}>flex: 1</Text>
          </Column>
        </Row>
      </Column>
    </Email>
  );
}

Reference

Lays its children out side by side. A child takes its width, or a share of what’s left (its flex, 1 by default).

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

Props:

  • stackOnMobile: true or false (default true). Its children stack full-width on phones (in an Email or a Page).
  • dir: one of “ltr”, “rtl”, “auto”. Its text’s direction, where it differs from the template’s; it starts on that side unless aligned otherwise.

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)
  • width: a length (a number of px, %)
  • minWidth: a length (a number of px, %)
  • maxWidth: a length (a number of px, %)
  • height: a length (a number of px)
  • padding: insets
  • backgroundColor: color
  • border: border
  • borderRadius: radius
  • overflow: one of “visible”, “hidden”. Whether content past a set height is cut off.
  • 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.
  • justifyContent: one of “start”, “center”, “end”, “space-between”. Where children sit along the layout’s direction, as CSS justify-content.
  • flexWrap: one of “nowrap”, “wrap”, “words”. “wrap”: children that don’t fit wrap onto another line, as CSS flex-wrap (in an email, in a Row kept side by side on phones, with no gap between the lines). “words”: in an email, also a space of the text’s font apart, on lines at least as tall as its, as words are.
  • flex: flex. In a Row: its share of the width left after children with a width (default 1); “none” takes its own size.

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