◆ Hermod Mail is pre-v0.1 — release acceptance is still in progress Read the release status →
Components Templates Pricing Docs Guides Changelog Contact Read the docs
← All components
DATA DISPLAY

Code

Since pre-v0.1 · Maizzle source

A selectable monospace value rendered as a PIN panel, wrapping block, or inline code chip.

<!-- src/components/Code.vue -->

<Code value="__HERMOD_CODE__" label="Verification code" variant="pin" />

Props

Prop Type Default Description
value string — Displayed value. Required.
label string — Optional caption above PIN and block variants.
variant 'pin' | 'block' | 'inline' 'pin' Display treatment.
DO
✓Repeat the code in the preheader so it is visible in the notification.
✓State the expiry in the same sentence as the code.
DON'T
✗Do not split the value into separate digit cells; keep it as one selectable text node.
✗Do not render as an image; images are blocked by default in Outlook.
ACCESSIBILITY
—The value remains one text node rather than separate digit cells.
—Expiry is real text, not a graphic.

Build Laravel email locally

Start with eight MIT Core templates. Pro licensing and stable release are still prelaunch.

Read setup guide Contact
Docs Contact