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

Desktop image

Code

You can place up to three images inside of the ArtDirection component. The first will be used for mobile, the second for tablet, the third for desktop. The largest available image will be used if one is not provided at a given size.

components/ArtDirection.js
<ArtDirection>
![Mobile image](./mobile.png)
![Tablet image](./tablet.png)
![Desktop image](./desktop.png)
</ArtDirection>
Edit this page on GitHub
Previous
Components: Accordion
Next
Components: DoDontExample