Vessel mark

On this page

The vessel mark at its four sizes, in the theme the site is set to.

Code

import { VesselMark } from "@bosunkit/components/vessel-mark";
import type { ReactElement } from "react";

export const description: string =
  "The four sizes, in em of the text around them: small beside a name, medium in a header, large and extra large on their own.";

export default function Sizes(): ReactElement {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: "var(--space-lg)" }}>
      <VesselMark size="sm" />
      <VesselMark size="md" />
      <VesselMark size="lg" />
      <VesselMark size="xl" />
    </div>
  );
}

The vessel mark is the vessel in the accent on a square tile tinted from the accent toward blue, with a hairline in the accent. It marks the vessel's own identity, beside its name in the navigation or at the top of the situation board. It is sized in em of the text around it, so it grows with the size class, and its corners take steps of the radius scale. Beside the name it is decorative; on its own it is an image named by its label. The marks and their clear space are in Logos.

Examples

Beside the vessel's name

SV Althea

Beside the vessel's name, as at the top of the navigation: the mark is decorative there, and the name is what a screen reader reads.

Code

import { VesselMark } from "@bosunkit/components/vessel-mark";
import type { ReactElement } from "react";

export const description: string =
  "Beside the vessel's name, as at the top of the navigation: the mark is decorative there, and the name is what a screen reader reads.";

export default function BesideName(): ReactElement {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: "var(--space-sm)", font: "var(--bk-type-label)" }}>
      <VesselMark />
      <span>SV Althea</span>
    </div>
  );
}

On its own

On its own, as on a sign-in screen: the mark is then an image named by its label, the vessel's name.

Code

import { VesselMark } from "@bosunkit/components/vessel-mark";
import type { ReactElement } from "react";

export const description: string =
  "On its own, as on a sign-in screen: the mark is then an image named by its label, the vessel's name.";

export default function Alone(): ReactElement {
  return <VesselMark size="lg" label="SV Althea" />;
}

Props

Prop	Type	Default	Description
size	VesselMarkSize \| undefined	"sm"	How large the tile is, in em of the text around it; `sm`, the size beside a vessel's name, by default.
label	string \| undefined	–	The vessel's name for a screen reader ("SV Althea"), translated by the caller, when the mark stands alone. Unset, the mark is decorative, as it is beside the name it belongs to.
className	string \| undefined	–	Classes added to the tile's own.
testId	string \| undefined	–	Becomes `data-testid` on the tile.
ref	Ref<HTMLSpanElement> \| undefined	–	The tile element.

Logos: the marks, their sizes and the identity tints.
Vessel overview: the vessel's name and particulars at the top of the situation board.
Logo: the bosun mark and name.

Examples

Beside the vessel's name

On its own

Props

Related