Hyper Elementsv0.3
Get started

Blocks

Image

An image in the content. Without a width it takes its own size, no wider than its parent.

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

Example

Show the code
image.tsx
import { Column, Email, Image, 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 }}>
        <Image
          src={{ src: "https://hyperelements.dev/img/event-hero.png", width: 1200, height: 600 }}
          alt="Lumen Conf 2027"
          style={{ borderRadius: 10 }}
        />
        <Text style={{ fontSize: 13, color: "#64748b", textAlign: "center" }}>1200 × 600 file, shown at the column's width.</Text>
      </Column>
    </Email>
  );
}

Reference

An image in the content. Without a width it takes its own size, no wider than its parent.

Holds: nothing. Drawn in: email, page.

Props:

  • src: asset (required)
  • alt: text (default ""). Read out by screen readers, and shown where images don’t load.
  • title: text. Shown as a tooltip by mail clients and browsers that show one.

style:

  • width: a length (a number of px, %)
  • maxWidth: a length (a number of px, %)
  • height: a length (a number of px)
  • border: border
  • borderRadius: radius
  • flex: flex. In a Row: its share of the width left after children with a width (default 1); “none” takes its own size.
  • alignSelf: one of “start”, “center”, “end”. Where it sits in its stack on phones, where that’s another place than on desktop.
  • verticalAlign: one of “top”, “middle”. Where it sits in a line of text it’s in.

mobile (on phones): width, maxWidth, border, alignSelf.