Components / Brand
Product lockup
A product's name with its gem, for headers and sign-in.
@fabrials/ui
SpanreedUsage and costSylFabrials UI
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { ProductLockup, FabrialsGem } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
product | string | The product name, set in Plex Sans Condensed. |
gem | GemName | The product's gem. |
tagline | string | Optional second line. |
size | sm | md | lg | Scale. |
Behavior
The gem signs the mark and nothing else; it is never a status or a button colour.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.