On the web, art direction refers to changing the image rendered at different display sizes. The ArtDirection component allows you to provide multiple images achieve this goal.

Example

Code

You can place up to three images inside of the ArtDirection component. The first will be used for mobile, the second for tablet, and the third for desktop. If only two images are provided, the second image will be used for both tablet and desktop.

components/ArtDirection.js
<ArtDirection>

![Mobile image](./mobile.jpg)

![Tablet image](./tablet.jpg)

![Desktop image](./desktop.jpg)

</ArtDirection>
Copy to clipboard

Edit this page on GitHub

Components: AnchorLinks

Components: ArticleCard

Art Direction

Example

Code