Code

A typography primitiving for displaying inline code snippets with a monospace font. This component provides all relevant typographic styles such as font-family, line-height and font-size.

Code

React

Code composes Box so you can use all the style props and add responsive styles as well.

import { Code } from '@hoverinc/design-system-react-web';

live

<Code>{'const code = () => {}'}</Code>

Size

Code defaults to size 500, pass the size prop to set a custom a size.

Correct Sizing

The size of Code should always be controlled via the size prop, not by setting fontSize or lineHeight

live

<Stack alignItems="start" spacing="400">
  <Code size={600}>Code 600</Code>
  <Code size={500}>Code 500</Code>
  <Code size={400}>Code 400</Code>
  <Code size={300}>Code 300</Code>
  <Code size={200}>Code 200</Code>
</Stack>

Text Styles

Body typographic styles can also be applied via textStyles to other elements and in component theming.

live

<Stack>
  <system.code textStyle="code600">code600</system.code>
  <system.code textStyle="code500">code500</system.code>
  <system.code textStyle="code400">code400</system.code>
  <system.code textStyle="code300">code300</system.code>
  <system.code textStyle="code200">code200</system.code>
</Stack>

Color Schemes

Code is available in all system color schemes.

live

<Stack alignItems="start">
  <Code colorScheme="neutral">Color Neutral</Code>
  <Code colorScheme="primary">Color Primary</Code>
  <Code colorScheme="success">Color Success</Code>
  <Code colorScheme="warning">Color Warning</Code>
  <Code colorScheme="danger">Color Danger</Code>
  <Code colorScheme="primary">Color Brand Primary</Code>
  <Code colorScheme="brandGreen">Color Brand Green</Code>
  <Code colorScheme="brandOrange">Color Brand Orange</Code>
  <Code colorScheme="brandYellow">Color Brand Yellow</Code>
  <Code colorScheme="brandTan">Color Brand Tan</Code>
  <Code colorScheme="brandNavy">Color Brand Navy</Code>
  <Code colorScheme="brandRed">Color Brand Red</Code>
</Stack>

Color Inheritance

When used within components like Alert and Blockquote, Code will inherit its colorScheme.

Alert

live

() => {
  const CodeInAlert = ({ status }) => (
    <Alert status={status}>
      A wild code appeared&nbsp;&nbsp;
      <Code size={500}>const id = a => a</Code>
    </Alert>
  );
  return (
    <Stack alignItems="start" spacing="400">
      <CodeInAlert status="info" />
      <CodeInAlert status="error" />
      <CodeInAlert status="warning" />
      <CodeInAlert status="success" />
    </Stack>
  );
};

Blockquote

live

() => {
  const CodeInBlockquote = ({ colorScheme }) => (
    <Blockquote colorScheme={colorScheme} width="auto">
      And we implement&nbsp;
      <Code size={500}>identity</Code>
      &nbsp;like so&nbsp;
      <Code size={500}>const id = a => a</Code>
    </Blockquote>
  );
  return (
    <Stack alignItems="start" spacing="400">
      <CodeInBlockquote colorScheme="neutral" />
      <CodeInBlockquote colorScheme="primary" />
      <CodeInBlockquote colorScheme="success" />
      <CodeInBlockquote colorScheme="warning" />
      <CodeInBlockquote colorScheme="danger" />
      <CodeInBlockquote colorScheme="primary" />
      <CodeInBlockquote colorScheme="brandGreen" />
      <CodeInBlockquote colorScheme="brandOrange" />
      <CodeInBlockquote colorScheme="brandYellow" />
      <CodeInBlockquote colorScheme="brandTan" />
      <CodeInBlockquote colorScheme="brandNavy" />
      <CodeInBlockquote colorScheme="brandRed" />
    </Stack>
  );
};

Truncation

If you'd like to truncate the text after a specific number of lines, pass the noOfLines prop. This will render an ellipsis when the text exceeds the width of the viewport or maxWidth prop.

live

<Stack maxWidth="750">
  {/* Basic */}
  <Code noOfLines={1}>
    {`
    const object = {
      foo: 'foo',
      bar: 'bar',
      baz: 'baz',
    }
    `}
  </Code>
  {/* Responsive */}
  <Code noOfLines={{ base: 1, tablet: 2, desktop: 3 }}>
    {`
    const object = {
      foo: 'foo',
      bar: 'bar',
      baz: 'baz',
    }
    `}
  </Code>
</Stack>

Semantic Element

The Code component renders a code tag by default. To override the element that gets rendered, pass the as prop.

live

<Stack alignItems="start">
  <Code as="kbd">{'<kbd />'}</Code>
  <Code as="pre">{'<pre />'}</Code>
  <Code as="samp">{'<samp />'}</Code>
  <Code as="tt">{'<tt />'}</Code>
</Stack>

CheckButton

Container