Hedia Hexagon module

Extra large hexagons

Hexagons can have content at the top, middle and bottom. This is useful for making icons of modules and services.

import { HexagonColor, HexagonGridType, HexagonSize } from "@hedia/hexagon/css";
import { emptyCell, hexagon, hexagonContent, hexagonGrid, hexagonRow } from "@hedia/hexagon/html";

hexagonGrid(
	{ size: HexagonSize.ExtraLarge, type: HexagonGridType.Inverted },
	hexagonRow(
		hexagon({ color: HexagonColor.Red }, hexagonContent({ middle: "W", bottom: "windfall" })),
		hexagon(
			{ color: HexagonColor.Blue },
			hexagonContent({ top: "6869", middle: "De", bottom: "developers" }),
		),
		hexagon(
			{ color: HexagonColor.Purple },
			hexagonContent({ top: "6682", middle: "Br", bottom: "brevo" }),
		),
	),
	hexagonRow(
		emptyCell(),
		hexagon(
			{ color: HexagonColor.Blue },
			hexagonContent({ top: "7368", middle: "Id", bottom: "identity" }),
		),
	),
),

Large hexagons

Hexagons are aligned within a hexagon grid.

import { HexagonGridType, HexagonSize } from "@hedia/hexagon/css";
import { hexagon, hexagonContent, hexagonGrid, hexagonRow } from "@hedia/hexagon/html";

hexagonGrid(
	{ size: HexagonSize.Large, type: HexagonGridType.Classic, padBottom: true },
	hexagonRow(
		hexagon({}, hexagonContent({ middle: "1 , 1" })),
		hexagon({}, hexagonContent({ middle: "1 , 2" })),
		hexagon({}, hexagonContent({ middle: "1 , 3" })),
		hexagon({}, hexagonContent({ middle: "1 , 4" })),
	),
	hexagonRow(
		hexagon({}, hexagonContent({ middle: "2 , 1" })),
		hexagon({}, hexagonContent({ middle: "2 , 2" })),
		hexagon({}, hexagonContent({ middle: "2 , 3" })),
		hexagon({}, hexagonContent({ middle: "2 , 4" })),
	),
),

Medium hexagons

All the usual colors are available for hexagons.

import { HexagonGridType, HexagonSize } from "@hedia/hexagon/css";
import { hexagon, hexagonContent, hexagonGrid, hexagonRow } from "@hedia/hexagon/html";

hexagonGrid(
	{ size: HexagonSize.Medium, type: HexagonGridType.Classic, padBottom: true },
	hexagonRow(
		hexagon({ color: HexagonColor.Gray }, hexagonContent({ top: "Gray" })),
		hexagon({ color: HexagonColor.Yellow }, hexagonContent({ top: "Yellow" })),
		hexagon({ color: HexagonColor.Teal }, hexagonContent({ top: "Teal" })),
		hexagon({ color: HexagonColor.Indigo }, hexagonContent({ top: "Indigo" })),
	),
	hexagonRow(
		hexagon({ color: HexagonColor.Red }, hexagonContent({ top: "Red" })),
		hexagon({ color: HexagonColor.Green }, hexagonContent({ top: "Green" })),
		hexagon({ color: HexagonColor.Blue }, hexagonContent({ top: "Blue" })),
		hexagon({ color: HexagonColor.Purple }, hexagonContent({ top: "Purple" })),
		hexagon({ color: HexagonColor.Pink }, hexagonContent({ top: "Pink" })),
	),
),

Small hexagons

Even if you only want one hexagon, you must still put it within a hexagon row in a hexagon grid.

import { HexagonSize } from "@hedia/hexagon/css";
import { hexagon, hexagonContent, hexagonGrid, hexagonRow } from "@hedia/hexagon/html";

hexagonGrid(
	{ size: HexagonSize.Small },
	hexagonRow(hexagon({}, hexagonContent({ middle: "Sc", bottom: "scalingo" }))),
),

Extra small hexagons

A hexagon grid can have unlimited columns and rows. Use empty cells to create gaps.

If Classic type is not working for you, try Inverted. It's all about where the first hexagon starts.

import { HexagonGridType, HexagonSize } from "@hedia/hexagon/css";
import { emptyCell, hexagon, hexagonContent, hexagonGrid, hexagonRow } from "@hedia/hexagon/html";

hexagonGrid(
	{ size: HexagonSize.ExtraSmall, type: HexagonGridType.Inverted, padBottom: true },
	hexagonRow(
		hexagon({}, hexagonContent({ middle: "1" })),
		hexagon({}, hexagonContent({ middle: "2" })),
		hexagon({}, hexagonContent({ middle: "3" })),
		hexagon({}, hexagonContent({ middle: "4" })),
		hexagon({}, hexagonContent({ middle: "5" })),
		hexagon({}, hexagonContent({ middle: "6" })),
		hexagon({}, hexagonContent({ middle: "7" })),
		hexagon({}, hexagonContent({ middle: "8" })),
		hexagon({}, hexagonContent({ middle: "9" })),
		emptyCell(),
		hexagon({}, hexagonContent({ middle: "10" })),
		hexagon({}, hexagonContent({ middle: "11" })),
		hexagon({}, hexagonContent({ middle: "12" })),
		hexagon({}, hexagonContent({ middle: "13" })),
	),
	hexagonRow(
		hexagon({}, hexagonContent({ middle: "14" })),
		emptyCell(),
		emptyCell(),
		hexagon({}, hexagonContent({ middle: "15" })),
	),
	hexagonRow(
		emptyCell(),
		hexagon({}, hexagonContent({ middle: "16" })),
		emptyCell(),
		emptyCell(),
		hexagon({}, hexagonContent({ middle: "17" })),
		hexagon({}, hexagonContent({ middle: "18" })),
		hexagon({}, hexagonContent({ middle: "19" })),
		hexagon({}, hexagonContent({ middle: "20" })),
	),
	hexagonRow(
		emptyCell(),
		emptyCell(),
		emptyCell(),
		emptyCell(),
		emptyCell(),
		hexagon({}, hexagonContent({ middle: "21" })),
		emptyCell(),
		emptyCell(),
		hexagon({}, hexagonContent({ middle: "22" })),
	),
),

Alternative content in hexagons

Of course, you can put anything you like inside a hexagon. Pictures, background gradients, emoji ...!

😋

🙋‍♀️

import { HexagonColor, HexagonGridType, HexagonSize } from "@hedia/hexagon/css";
import { hexagon, hexagonContent, hexagonGrid, hexagonRow } from "@hedia/hexagon/html";
import { img } from "@hedia/html/elements";
import { BackgroundContext, BackgroundHeight, BackgroundVariation } from "@hedia/windfall/css/backgrounds";
import { background } from "@hedia/windfall/html/backgrounds";

hexagonGrid(
	{ size: HexagonSize.ExtraLarge, type: HexagonGridType.Classic, padBottom: true },
	hexagonRow(
		hexagon({}, img({ src: "https://picsum.photos/256/256", alt: "Picture" })),
		hexagon({}, img({ src: "https://picsum.photos/257/257", alt: "Another Picture" })),
	),
	hexagonRow(
		hexagon(
			{ color: HexagonColor.Pink },
			hexagonContent({ middle: "😋" }),
			background({
				context: BackgroundContext.Product,
				variation: BackgroundVariation.Three,
				height: BackgroundHeight.Full,
			}),
		),
		hexagon(
			{ color: HexagonColor.Purple },
			hexagonContent({ middle: "🙋‍♀️" }),
			background({
				context: BackgroundContext.Product,
				variation: BackgroundVariation.One,
				height: BackgroundHeight.Full,
			}),
		),
	),
),