Skip to main contentGatsby themeĀ Carbon

Art Direction

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

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, 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>