BrandMark

The spaced-out J A R V I S wordmark in muted text, with an optional MK XLII subline. Use it as the brand in a top bar or a status dock.

import { BrandMark } from 'jarvis-react-ui';

Wordmark

Without props it renders the wordmark only. sub adds the subline below it.

import { BrandMark } from 'jarvis-react-ui';

export default function Basic() {
    return (
        <div className="flex items-center gap-16">
            <BrandMark />
            <BrandMark sub />
        </div>
    );
}

In a top bar

The mark is centered in its own box, so it fits any slot of a TopBar.

import { BrandMark, Pill, TopBar } from 'jarvis-react-ui';

export default function InTopBar() {
    return (
        <TopBar
            position="static"
            left={<span className="text-[11px] text-text">09:04:17</span>}
            center={<BrandMark sub />}
            right={<Pill variant="ok">Online</Pill>}
        />
    );
}

Accessibility

• Renders a <div> with two <span>s and no role.
• The letters are separated by spaces, so screen readers read them one by one ("J, A, R, V, I, S"). When the brand name matters to the user, provide it elsewhere as text, for example in the page title.

API