Skip to content


Use this component if you have a diagram or image that is much larger than our available space and you would like users to view the full image in another tab. This adds a link to “View full image” with an external link indicator under the bottom-right corner of the image. It takes in a src and alt, just like a normal img element.

To use it, your docs page must be in .mdx format. Please change the format from .md to .mdx if necessary. All your existing markdown will still be supported without issue.


Import the LargeImg component like so:

import { LargeImg } from "@interledger/docs-design-system";

Use the <LargeImg> component within your content like so:

<LargeImg src="/img/OMG_A_GIGANTIC_IMG.png" alt="A really large diagram" />

By default, there will be a border around the image, but if you want to remove the border, pass in a hasBorder={false} attribute.

alt="A really large diagram"

For user doc diagrams, be sure to include the docs folder in the path.

<LargeImg src="/img/docs/OMG_A_GIGANTIC_IMG.png" alt="A really large diagram" />

Working example