Hyper Elementsv0.3
Get started

Sections and layout

Layer

Its children over each other, in one box as tall as the tallest: an image with words on it. In an email, an Image with one child over it.

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

Example

Show the code
layer.tsx
import { Column, Email, Heading, Image, Layer, Text } 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 }}>
        <Layer style={{ borderRadius: 12, alignItems: "end" }}>
          <Image src={{ src: "https://hyperelements.dev/img/gradient.png", width: 1200, height: 500 }} alt="" />
          <Column style={{ padding: 24, gap: 4 }}>
            <Text style={{ color: "#ef4638", fontSize: 12, fontWeight: 700 }}>LIVE ON MARCH 18</Text>
            <Heading level={2} style={{ color: "#ffffff", fontSize: 24 }}>Text over the picture</Heading>
          </Column>
        </Layer>
      </Column>
    </Email>
  );
}

Reference

Its children over each other, in one box as tall as the tallest: an image with words on it. In an email, an Image with one child over it.

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)
  • width: a length (a number of px, %)
  • minWidth: a length (a number of px, %)
  • maxWidth: a length (a number of px, %)
  • backgroundColor: color
  • border: border
  • borderRadius: radius
  • height: a length (a number of px). Its height: the image under its children covers it, cut at its sides or its top and bottom.
  • alignItems: one of “start”, “center”, “end”, “stretch” (default "start"). Where its children sit in its height, as CSS align-items.
  • justifyItems: one of “start”, “center”, “end”, “stretch” (default "stretch"). Where its children sit across its width, as CSS justify-items: stretched to it by default.
  • 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, border.