Typography

Code and Kbd

Inline code for commands, fields and file names; Kbd for keys.

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

Examples

Inline

Install with npm install -g resume-cli, then press Ctrl + C to stop the server.

code/inline.tsx

import { Code, Kbd, Text } from '@jsonresume/ui';

export default function InlineCode() {
  return (
    <Text>
      Install with <Code>npm install -g resume-cli</Code>, then press{' '}
      <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to stop the server.
    </Text>
  );
}

Accessibility

Long identifiers wrap anywhere instead of overflowing the line.

Props

<Code>

No props of its own; accepts the attributes of the element it renders.

<Kbd>

No props of its own; accepts the attributes of the element it renders.