Skip to content
GitHub

LargeImg

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.

Usage

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.

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

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