All you need are two images for the front and back of your business card. Any resolution is accepted, though a ratio of 3:2 is recommended. The formats supported are SVG, PNG, and JPG.
Here's what's included in the sample:

Everything is in the "bizcard" folder. All assets for the business card are stored in "card/". The sections below will explain in depth all the needed assets.

The widget can be found in two sections located in "bizcard.html".
"bizcard.html", "bizcard-multiple.html", and "bizcard-sideways.html" are all examples. The first section contains the following:

• A link to the base stylesheet, "card/style.css"
• The stylesheet responsible for loading images, "card/images.css".
• Stylesheets for different effects: "noborder.css", "sideways.css".

As explained above, there are three CSS files included in the assets folder: The base stylesheet "style.css", the two others responsible for loading images, "images.css", "images-multiple.css", "noborder.css", and "sideways.css".

Select the "card/" assets folder and copy it over to the folder that contains the html file you want to insert the business card.

Open up the html page you want the business card inserted.
Each section of the business card is separated by a "BEGIN" and "END" comments.

First, select the top-most section (containing the stylesheets and example images), and copy it over to the header section of your html page.

Then, select the bottom-most section (containing the actual card html), and copy it to your choice of section in your html page.

Go over to the copied "card/" folder.

Delete the example images ("front.svg", "front2.svg", "back.svg", and "back2.svg").
Select the images you want for your business card.
(Keep in mind your images must be named "back" and "front".)
Copy the images over to the assets folder.

Refresh your page, and you should see the card on your page!
Feel free to modify at your heart's content.

You can add more than one instance a card in the same page, but if you want separate designs, you're going to have to do the following:

First, add the two images (front/back) for the second card to the card/ folder. (e.g. "front2.png" and "back2.png").

Go into the html code of the page you've already added a card to. Select and copy the bottom section of html code which contains the first card, and paste it to where ever you want the second card to be.

Add an id for your second card within both the "front" and "back" figure elements.

Open up the stylesheet for loading images (e.g. "images.css"), and copy-paste the existing code.

Add the id name you assigned the second card to the front and back selectors of the copied code.

Change the filenames to in the "url" image loaders in the copied css code to the images you're designating for the second card. (You should delete all but one "url" loader for each side of the card.)

Refresh your page and you should see a second card with separate images. Ultimately, you can use "bizcard-multiple.html" and "images-multiple.css" as models for how to get it done.