Illustration

Matchbox provides a few illustrations to enhance the experience of a UI.


To use matchbox illustrations, you can either install the @sparkpost/matchbox-media package, or reference images directly via UNPKG.

npm i @sparkpost/matchbox-media
import Image from '@sparkpost/matchbox-media/images/Accounts.png';
<img src={Image} />;

or

<img
src="https://unpkg.com/@sparkpost/matchbox-media@4.1.0/images/Accounts.jpg"
/>

All images are available as .png, .jpg, or .webp.

All images are also available at @small (50%) and @medium (70%) sizes. Append @small or @medium to the filenames, and do not append anything for the largest size. For example, a medium png for the accounts image would look like:

import Image from '@sparkpost/matchbox-media/images/Accounts@medium.png';
Accounts
import Accounts from '@sparkpost/matchbox-media/images/Accounts.jpg';
Billing
import Billing from '@sparkpost/matchbox-media/images/Billing.jpg';
Configuration
import Configuration from '@sparkpost/matchbox-media/images/Configuration.jpg';
Email Template
import Email from '@sparkpost/matchbox-media/images/Email-Template.jpg';
Error
import Error from '@sparkpost/matchbox-media/images/Error.jpg';
Flagging
import Flagging from '@sparkpost/matchbox-media/images/Flagging.jpg';
Sending Mail
import Mail from '@sparkpost/matchbox-media/images/Sending-Mail.jpg';
Analytics
import Analytics from '@sparkpost/matchbox-media/images/Analytics.jpg';
Sign up
import Signup from '@sparkpost/matchbox-media/images/Signup.jpg';
Recipient Validation
import RV from '@sparkpost/matchbox-media/images/Recipient-Validation.jpg';