Hyper Elementsv0.3
Get started

Blocks

Social

Links to social profiles: a line of the networks' icons, each linked to its profile.

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

Example

Show the code
social.tsx
import { Column, Email, Social } 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 }}>
        <Social
          icons={[
            { name: "X", href: "https://x.com/example" },
            { name: "GitHub", href: "https://github.com/example" },
            { name: "LinkedIn", href: "https://linkedin.com/company/example" },
            { name: "YouTube", href: "https://youtube.com/@example" },
          ]}
          iconType="rounded"
          size={32}
          style={{ gap: 10 }}
        />
      </Column>
    </Email>
  );
}

Reference

Links to social profiles: a line of the networks’ icons, each linked to its profile.

Holds: nothing. Drawn in: email, page.

Props:

  • icons: a list of icons, each { name, href } (required). Each network by name (“Instagram”, “LinkedIn”) and the link to its profile.
  • iconType: one of “circle”, “rounded”, “squared” (default "circle")
  • size: an integer from 1 (default 32). Each icon’s width and height, in px.

style:

  • gap: a length (a number of px) (default 5). Space between children.
  • justifyContent: one of “start”, “center”, “end” (default "center"). Where the icons sit across the line.
  • 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): gap.