UI Components for Carrd

Note: while these templates are completely free to use, pro standard and up is required for all of them.

Collapsable Menu

Collapsable Menu

Testimonials

Testimonials

Tabs

Tabbed Content

Responsive Menu

Responsive Menu

Collapsable Menu

Filtered Gallery

FAQ Dropdowns

FAQ Dropdowns

Responsive Menu

Gallery Carousel

Changelog

Changelog

Responsive Menu

Gallery Carousel 2

Changelog

Changelog

This is completely free to use but requires pro plus .

Aug 11, 2021

Each container for this style should have the class cl-style3.

These classes can be added by clicking on the element and going to the advanced settings tab (gear icon) in the settings panel.

Aug 10, 2021

There are 3 layout styles included. Click Here for a demo.

Gallery Carousel

Gallery Carousel

This is completely free to use but requires pro standard .

How it works

1. Insert a Gallery element and upload your images.

2. Set the Gallery Style to Fixed.

3. Style the images, captions and images however you like.

4. Go to the advanced settings tab (gear icon) and note the gallery ID.

5. Click on the JS embed and change #gallery01 to match the ID of your gallery. You shouldn't have to modify anything else in that embed or the included CSS.

Horizontal Gallery Carousel

Horizontal Gallery Carousel

This is completely free to use but requires pro standard .

Gallery Heading

How it works

1. Add a Container and style it however you wish. Then go to the advanced settings tab (gear icon) and note the ID of your container.

2. Add a Text element for your headline. Change the Text attribute to Subheading, this will assign it the H3 tag which is positioned with the included CSS.

3. Add an Icons element, with your desired left and right icon. Set the URL for both icons to #. Style them however you like, just remember the 1st icon is previous and 2nd is next.

4. Add a Gallery Element, upload all of your images and set your desired options. Then go to the gallery Appearance tab (paintbrush icon), and set the style to either Fit or Default. IMO Fit works best.

5. Click the included JS embed and modify this line var pyxGallery = $('#container01');. Change #container01 to the ID from step 1.

6. Note: The amount of visible images, is controlled via the included CSS. For desktop view look for this line flex-basis: calc(25% - 1rem);. The 25% signifies that the container will be divided by 4, so it will show 4 images. Further down you will see flex-basis: calc(33% - 1rem);. This is the mobile breakpoint and will divide the container by 3, therefore showing 3 images.

7. Pro Plus users can add multiple sliders per page. To do this, just add the same class to each container in the advanced settings tab. Then in step 5 instead of using the container ID use the container .classname.

Testimonials

Testimonials

This is completely free to use but requires pro standard .

Testimonials

John Doe

CEO Acme Inc.


"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat metus et sem consectetur."

Testimonials

John Doe

CEO Acme Inc.


"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat metus et sem consectetur."

Testimonials

John Doe

CEO Acme Inc.


"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat metus et sem consectetur."

Testimonials

John Doe

CEO Acme Inc.


"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat metus et sem consectetur."

Testimonials

John Doe

CEO Acme Inc.


"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat metus et sem consectetur."


How it works

1. Create your testimonials, one container per testimonial and style it however you like.

2. Add an embed element above the first testimonial. Set the style to inline and for the code enter<div>. Then go to the advanced settings tab (gear icon) and note the ID.

3. Add an embed element below the last testimonial. Set the style to inline and for the code enter</div>.

4. Modify the included JS embed and update this line: $testimonial = $('#embed04'); #embed04 should be changed to the embed ID from step 2.

5. Modify the included CSS if necessary.

Tabbed Content

Tabbed Content

This is completely free to use but requires pro plus .

Tab 1 Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet posuere urna. Praesent varius turpis nulla, ac vestibulum diam laoreet vitae. Ut nec porta nibh. Cras pretium lacus congue, congue sem ut, elementum metus. Vestibulum purus purus, pulvinar non nunc sit amet, posuere tincidunt dolor. Mauris sed velit aliquam, pharetra mi sit amet, luctus nibh. Aliquam erat volutpat. Cras in facilisis lorem.

Tab 2 Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet posuere urna. Praesent varius turpis nulla, ac vestibulum diam laoreet vitae. Ut nec porta nibh. Cras pretium lacus congue, congue sem ut, elementum metus. Vestibulum purus purus, pulvinar non nunc sit amet, posuere tincidunt dolor. Mauris sed velit aliquam, pharetra mi sit amet, luctus nibh. Aliquam erat volutpat. Cras in facilisis lorem.

Tabbed Content

Tab 3 Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet posuere urna. Praesent varius turpis nulla, ac vestibulum diam laoreet vitae. Ut nec porta nibh. Cras pretium lacus congue, congue sem ut, elementum metus. Vestibulum purus purus, pulvinar non nunc sit amet, posuere tincidunt dolor. Mauris sed velit aliquam, pharetra mi sit amet, luctus nibh. Aliquam erat volutpat. Cras in facilisis lorem.

How it works

1. Insert a buttons element , go to the advanced settings tab (gear icon) and add the class tabs.

2. Add you buttons(tabs) and style them however you like.

3. Add a container for each tab, go to the advanced settings tab (gear icon) and add the the class tab. You will also need to add another class that matches your button Label (in lowercase). Also add the class active to the container you wish to show up first. Note: spaces will be removed from the Label, so your classname should contain no spaces.

4. Adjust the CSS embed to match the style of your buttons (tabs).