Click on a feature above to see details and tutorials.

Stephen @stepocampbell_

I am very very impressed with this Mark. Thank you for sharing.

Dru Riley @DruRly

These pricing tables and the premise of the site 🔥🔥

Andrew @atsaotsao

This is such a great and useful resource 🔥

Ecwid shop widget

You can add a shop to a Carrd page with a widget from Ecwid.com.

Note: The shop below is a test version only, please do not enter any credit card details.

Instagram gallery

By combining this Elfsight widget with Carrd, you could make a beautiful gallery website just from your Instagram feed (example).

Cost: $5/mo to remove the Elfsight badge (you’ll get $15 off via my link).

Visual lists

I created these box styles as there’s no native way to add static, coloured blocks in Carrd. Find out how to implement them below.

Style 1

  • Create a Container element with 4 columns.

  • Add a Text element in the first column with your label.

  • Under Settings > Styles add this CSS to the element:

background-color: #b11c3c;
padding: 20px;
border-radius: 100px;

  • Duplicate the Text element into the other columns and change the CSS colour and text for each one, as needed.

Label

Label

Label

Label

Label

Label

Label

Label

Style 2

  • Create a Container element with 4 columns.

  • Add a Text element in the first column, with a title.

  • Under Settings > Styles add this CSS to the element:

border-top-left-radius: .2rem;
border-top-right-radius: .2rem;
background: #d14422;
padding: 1rem .5rem;

  • Add another Text element under the first, with some content.

  • Under Settings > Styles add this CSS to the element:

border-bottom-left-radius: .2rem;
border-bottom-right-radius: .2rem;
background: #f1f1f1;
padding: 1rem .5rem;

  • Duplicate the pair of Text elements into the other columns and change the CSS colour and text for each one, as needed.

  • Note: you will need to make sure the Container element has Spacing set to 0.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pricing tables

There are two ways of doing pricing tables (see below). You can create them Carrd (with a bit of extra work) or with an external widget.

Carrd version

Find out how to implement the below Carrd version on my tutorial page.

FREE

$0/mo

  • 1 user

  • 5 GB secure storage

  • Knowledge base support

Basic

$19/mo

  • Unlimited users

  • 100 GB secure storage

  • Business hours phone support

  • Analytics

Pro

$59/mo

  • All Basic features

  • Unlimited secure storage

  • Advanced branding

Widget method

Below is a screenshot of a pricing table built in Elfsight which can be embedded as a widget in Carrd. The design is fully customisable and includes a year/month toggle. It costs $5/mo to remove the Elfsight badge (get $15 off via my link).

See the live demo here.

Elfsight pricing table

Testimonials

If you want to create a visually consistent gallery of quotes, there are two ways of doing this in Carrd (see below).

Carrd version

This version is manually built in Carrd, and can take quotes from any source. Find out how to implement it on my tutorial page.

Stephen @stepocampbell_

I am very very impressed with this Mark. Thank you for sharing.

Dru Riley @DruRly

These pricing tables and the premise of the site 🔥🔥

Andrew @atsaotsao

This is such a great and useful resource 🔥

Credit: Avatar images from randomuser.me

Widget method

This gallery of tweets is built in Elfsight and embedded as a widget in Carrd. The benefit of this is that they take the content from live tweets but strip out any images. You also don't have to upload the avatars, and you can add the star rating.

It costs $5/mo to remove the Elfsight logo (get $15 off via my link).

Hover effects

CSS animations are fairly easy to add in Carrd, using a little code and an Embed element. Find out how to implement this one on my tutorial page.

Mouse over the image below to see a CSS hover effect.

Maker badge

If you want to add a ‘made by’ badge to your site, you can follow my tutorial. You can see this live in the bottom left corner of this site.

It’s adapted from the code and setup suggested by @levelsio.

Mobile nav menu

If you have a number of jump links, you’ll know the lack of a mobile menu in Carrd is frustrating. I’ve got one working using code embeds. Find out how to implement it on my tutorial page.

View this site on a mobile to see my mobile menu working in the header.

Hero sections

These seamless, impactful sections are achievable using the native Carrd styling. Below are some example sections and the steps to achieve them.

  • Set a Container element to Full Width and add a background image.

  • Add your content, and adjust the Container margin/width to position it.

  • Note: you will need to make sure the Page element has Spacing set to 0.

Section heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Other tips

These are other people’s tips and resources I’ve found online.

Test page

This page exists only to test the mobile menu.
Hit the hamburger icon again to return to the main page.

Pricing table widget demo

Below is a demo of a pricing table built in Elfsight which can be embedded as a widget in Carrd.

It costs $5/mo to remove the Elfsight badge (get $15 off via my link).