Site

Logo

The "JSON Resume" wordmark in Ubuntu Bold, optionally with the document mark.

import { Logo } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Sizes and mark

logo/sizes.tsx

import { Logo, Stack } from '@jsonresume/ui';

export default function LogoSizes() {
  return (
    <Stack direction="row" gap={8} align="center" wrap>
      <Logo size="sm" />
      <Logo />
      <Logo size="lg" mark />
    </Stack>
  );
}

Usage

Do

Keep the wordmark black on yellow or white.
Link it to the home page.

Don’t

Recolor, stretch or outline the wordmark.
Set it in another typeface.

Accessibility

The mark is decorative; the link name is the wordmark text.

Props

<Logo>

Also accepts the attributes of the element Logo renders.
Prop	Type	Default	Description
asChild	boolean	false
mark	boolean	false	Show the document mark beside the wordmark.
size	smmdlg	md