Cards

Generate and embed digital cards featuring custom images and text.

Getting a card

Send a GET request to https://cards.breq.dev/card with some of the following parameters:

Parameter Description
format Format of the returned card (html, png, jpeg)
template Template used to generate the card (background-image, basic)

In addition, each template has some of its own parameters. For instance, the background-image template takes:

name Name printed in large text on the card
bio Description printed in smaller text
background_image Image in the top half of the card

Freezing a card

If you send a POST to that URL instead, your card will be “frozen”: rendered on the server and stored there. The server will send back a JSON response with {"card_id": 130810678565865982} (or whatever your ID is). Then, send a GET to https://cards.breq.dev/card/<id>.html or .png or .jpg to get the card.

Freezing cards is a good idea. It will reduce the server load, since the server won’t have to re-render the card every time it gets served. It will also speed up your app, since it won’t have to wait for the server to render the card before displaying it to the user.

Try it


Embedding a card

Can you use HTML? - Include an IFrame linking to the card.

<iframe height="300" width="500" src="https://cards.breq.dev/card?format=html&template=background-image&name=IFrame Card&bio=Card embedded in a webpage using an iframe.&background_image=https://breq.dev/assets/images/pansexual.png"></iframe>

Otherwise, use images - Use a basic <img> tag, or markdown.

![](https://cards.breq.dev/card?format=png&template=background-image&name=Rendered Card&bio=Card rendered on the server and included as a PNG.&background_image=https://breq.dev/assets/images/pansexual.png)

If you can, use IFrames. This reduces server-side load, speeding up your app.

Styling Tips

Add a border-radius: 15px to the IFrame for some nice, rounded corners: