Updated Jun 29, 2021

Illustrations

RESOURCES

Matchbox illustrations are used to enhance the experience of a UI.

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

You can use these illustrations one of three ways:

Through the NPM package, @sparkpost/matchbox-media
Through UNPKG
By downloading the images directly from our shared drive.

Through NPM

npm i @sparkpost/matchbox-media

import Image from '@sparkpost/matchbox-media/images/Accounts.png';

const Component = () => {
  return <img src={Image} />;
}

Through UNPKG

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

Referencing Images

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.

List of Available Images

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';

Error

import ErrorImage from '@sparkpost/matchbox-media/images/Error.jpg';

Flagging

import Flagging from '@sparkpost/matchbox-media/images/Flagging.jpg';

Mail

import Mail from '@sparkpost/matchbox-media/images/Sending-Mail.jpg';

Analytics

import Analytics from '@sparkpost/matchbox-media/images/Analytics.jpg';

import Signup from '@sparkpost/matchbox-media/images/Signup.jpg';

Recipient Validation

import RV from '@sparkpost/matchbox-media/images/Recipient-Validation.jpg';