Blueprint

GuidesFoundationComponentsReleases
⌘K

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 '@hover/blueprint';

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>