Art Direction

On the web, art direction refers to changing the image rendered at different display sizes. The ArtDirection component allows you to 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.png)
![Tablet image](./tablet.png)
![Desktop image](./desktop.png)
</ArtDirection>

Edit this page on GitHub

Components: Accordion

Components: DoDontExample