* These sites are templates or demos

The deck gets shuffled every now and then, so please keep showing us your Carrd sites.

Please note we're looking for high level designs to show here, so we can't make any promises your Carrd site will appear in our deck. Sorry โ€“ house rules ๐Ÿ˜Ž

Please note weโ€™re looking for high level designs to show here, so we can't make any promises your Carrd site will appear in our deck. Sorry โ€“ house rules ๐Ÿ˜Ž


How this site works

Adding to the gallery

The main database of sites shown in our gallery is stored in Airtable.

Capturing new site suggestions:

  1. Visitors suggest sites using the button and form, which adds a record directly to the Airtable base, for review

  2. My own suggestions are added using Airtable's Web Clipper, which automatically adds a record for each site to the table, for me to review later

Adding to the gallery:

  • New site suggestions are reviewed once a week

  • I create screenshots of the best ones and make a composite browser image in Photoshop and export to JPG

  • These JPGs can then be added to the Carrd gallery, along with their URL from the Airtable

What didn't work

I tried a couple of automated ways to create the composite browser images you see in the gallery, but they weren't very suitable. These were based on adding screenshots to the Airtable records, then trying the following:

  1. Using Page Designer in Airtable. This method is slow as you need to first have the screenshot at exact dimensions, and Page Designer only outputs to a multi-page PDF which needs splitting into JPGs

  2. Using Bannerbear and Zapier. This also required the screenshots to be exact dimensions, but did at least output ready-to-use JPGs.

Overall I decided that some quick work in Photoshop* was far quicker than these methods, much as I would have preferred to automate.

*Even though I used Photoshop, there are plenty of other apps that could also be used.


The hover effect

Youโ€™ll notice the gallery images have an animation on hover, which isn't standard in Carrd. It uses CSS, and if you want to do the same, it works like this:

The steps

  1. Add a class name in the Settings tab of your element. e.g hover-image.

  2. Add a hidden embed element somewhere in your website.

  3. Add the code opposite (change the class name to what you're using).

The code

<style>
.hover-image {
transition: transform .2s;
}
.hover-image:hover {
transform: scale(1.05);
}
</style>