LogoLogo
GitHub repository
GitHub repository
    Documentation
  • Overview
  • Getting Started

  • Guides

  • Hooks

  • Components

    • AsyncButton
    • AsyncIconButton
    • CodeBlock
    • CopyButton
    • Enumeration
    • ExampleCard
    • Icon
    • InlineCode
    • Logo
    • PageLoadingIndicator
    • PageOverview
    • Paragraph
    • QuoteBlock
    • SmartImage
    • SmartLink
    • StyleLink

ExampleCard

A card showing code and its output, useful for documentation pages.
Note: This component is only supported as a React Server Component, meaning it can not be re-rendered on the client.

Props

The same as Joy UI's Card component, as well as:
  • children: The output content to display in the card.
  • expandContent: Whether to expand the output content to the card border by default. Defaults to false.
  • code: The code to display.
  • language: The language of the code. Defaults to no syntax highlighting.
  • codeBlockProps: Optional additional props to pass to the CodeBlock component.

Examples

Different code & output

The code and output don't need to align; in fact, quite often they don't!
1def func():
2  return "This code could be anything; it's not actually run."
1def func():
2  return "This code could be anything; it's not actually run."
1<ExampleCard
2  language="python"
3  code={deindent`
4    def func():
5      return "This code could be anything; it's not actually run."
6  `}
7>
8  <Paragraph box>
9    The code and output don&apos;t need to align; in fact, quite often they don&apos;t!
10  </Paragraph>
11</ExampleCard>
1<ExampleCard
2  language="python"
3  code={deindent`
4    def func():
5      return "This code could be anything; it's not actually run."
6  `}
7>
8  <Paragraph box>
9    The code and output don&apos;t need to align; in fact, quite often they don&apos;t!
10  </Paragraph>
11</ExampleCard>