Fixed001 Navigation

• Buy Now

Fixed Navigation001

Always part of your site.

This plugin keeps your navigation seamlessly fixed at the top of the screen. No need to worry about whether your site has a hero section before the navigation—it will adjust and staying where it should.You can use it with the Fixed Menu Plugin to enhance its functionality.
-
Not ready for this? ▶ Widget - Fixed Navigation

• Seasoning ▼

• Leaving ▲

Ingredients: CSS, JavaScript

▼ Single License - $30 USD
▼ Unlimited License - $300 USD

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

launched
2025-02-24

Clip002

Expand and manage your content easily

Click Expand to see it in action

• Expand ▼

This plugin allows you to manage and display page content more dynamically. It also supports multiple column layouts.Heads-up: sounds effect is not included.
-
Not ready for this? ▶ Widget - (Un)fold

Ingredients: CSS, JavaScript

▼ Single License - $15 USD
▼ Unlimited License - $150 USD

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

• Buy Now

• Collapse ▲

Shimmer003

Add a small touch

Add a shimmer effect to target images as they enter the screen to make them visually attractive. You can adjust the color, width, animation start and end points, and choose whether to sync it with scrolling.

Ingredients: GSAP, CSS, JavaScript

▼ Free - receive TXT files and a PDF guide.

You'll need at least the Carrd Pro Plus Plan (with the embeds feature and advanced setting feature) to use this plugin.

Hyper Accordion005

• Buy Now

Hyper Accordion005

Working with Elements on the Same Level

With this plugin, you can easily manage and showcase website content by turning elements into a 2 or 3-level accordion. It’s not limited to text—it works with same-level elements and even entire containers. This helps reduce endless scrolling and improves content organization.Use cases: FAQs section, Theme Toggle Demo-
Not ready for this? ▶ Widget - (Un)fold

Ingredients: CSS, JavaScript

▼ Single License - $30 USD
▼ Unlimited License - $300 USD

You'll need at least the Carrd Pro Plus Plan (with the embeds feature and advanced setting feature) to use this plugin.

launched
2025-03-11

Dual Tooltip007

• Buy Now

Dual Tooltip007

for ss(Text)tt(Text, Table, List, Links, Gallery Caption)ee and Non-Text elements

With this plugin, you can add extra information to your content when users hover or click an element. It works on both text and ss(non-text elements.)tt(Icons, Buttons, Timer, Image, Gallery, Slideshow)ee
You can also customize its style to fit your page design.
-
Not ready for this? ▶ Tip - Set Tooltip for Desktop

Ingredients: CSS, JavaScript

▼ Single License - $30 USD
▼ Unlimited License - $300 USD

You'll need at least the Carrd Pro Plus Plan (with the embeds feature and advanced setting feature) to use this plugin.

launched
2025-03-16

Rotating Badge Text008

Rotating
Badge Text008

Typography in Motion

With this plugin, you can transform the Gallery element into a Rotating Badge Text and customize its style to match your website.

Ingredients: CSS, JavaScript

▼ Free - receive TXT files and a PDF guide.

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

launched
2025-03-19

Swipe Scroller011

Flexible Element Count

Convert your container content into a horizontal scroller to showcase services or images. There is no limit on the number of elements.

Ingredients: CSS, JavaScript

▼ Single License - $15 USD
▼ Unlimited License - $150 USD

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

launched
2025-04-02

• Buy Now

Magnifier013

Hover over the image to see it in action ▼

This plugin allows you to magnify images—including galleries and slideshows—to size you prefer. It also supports external image URLs as zoom sources.

Magnify. Focus. Discover.

Ingredients: CSS, JavaScript

• Buy Now

▼ Single License - $30 USD
▼ Unlimited License - $300 USD

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

launched
2025-04-12

Floaty BG014

Floaty BG014

For the Background Pattern

Add a floating animation effect to your page or container background pattern that responds to user cursor movement.

Ingredients: CSS, JavaScript

▼ Free - receive TXT files and a PDF guide.

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

Break free from layout limits.

Quisque ligula nullam lectus taciti donec volutpat porttitor cursus ante. Vehicula in vel inceptos quis tristique si dictumst nam adipiscing quam.

Designed for flexibility and control.

Go beyond static displays.

Mix content and media effortlessly.

Quisque ligula nullam lectus taciti donec volutpat porttitor cursus ante.

• Template
• Back

Bring interactivity to your visuals.

Your gallery, your way.

• Top
• Back

Price Switch017

• Price1
• Button
• Price2

Lite$price^{• unlimited projects
• email support
• access to all templates
• basic analytics
• cancel anytime}

Premium$price^{• unlimited projects
• priority support
• access to all templates
• advanced analytics
• save 17% compared to lite}

▲ Toggle the Switch

This plugin adds a price switch feature to your container columns.
Simply design your column content using Carrd’s native elements — the plugin will handle the logic for the switch functionality automatically.

Ingredients: CSS, JavaScript

▼ Free - receive TXT files and a PDF guide.

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

launched
2025-08-02

• Chevron Left
• Chevron Right

Carousel ∞018

Infinite Loop

This plugin transforms your content into a seamlessly looping card carousel, automatically connecting the first and last slides to deliver a smooth, continuous browsing experience.
— Perfect for showcasing your services, features in a dynamic and engaging way.

Ingredients: CSS, JavaScript

▼ Single License - $30 USD
▼ Unlimited License - $300 USD

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

launched
2025-08-22

• Buy Now

Carousel ∞

4

1

2

3

{ WIDGET }Use the Action Button to preview the widget. Click the Widget Title to see and copy the code snippet.

• Action

<style>
[#image05] img {
animation: spin 15s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>


• Copied
• Copy

1. Replace [#image05] with the actual ID of your Image element.
2. Adjust 15s to change the rotation speed.
3. Change 360 to -360 to spin counter-clockwise instead of clockwise.

• Action

<style>
<style>
[#buttons04] .switch a {
cursor: pointer;
max-width: 3.5rem !important;
}
[#buttons04] svg {
display: none !important;
}
[#buttons04] .switch svg {
width: 100% !important;
margin: 0 !important;
display: block !important;
transform: translateX(-50%);
transition: transform 0.5s ease !important;
}
[#buttons04] svg.state-on {
transform: translateX(50%) !important;
}
</style>
<script>
const target = document.querySelector('[#buttons04] li:nth-of-type(2)');
const circle = target.querySelector('svg');
target.classList.add('switch');
target.addEventListener('click', () => {
circle.classList.toggle('state-on');
});
</script>


• Copied
• Copy

1. Create a Buttons element and add a total of 3 buttons.
2. Set each button’s URL to browser:none.
3. Change the middle button’s icon to a circle.
4. Set the first and third button’s background to transparent.
5. In the style options:
- Select Solid.
- Enable Icon + Label.
- Uncheck Span multiple lines.
- Set the Width to Auto and adjust Corner Rounding to the maximum.
6. Set Mobile layout to Default.
7. Replace [#buttons04] in your code with the actual ID of your Buttons element.

• Action

<style>
[#buttons03] > li > a {
cursor: pointer;
background: linear-gradient(to top right, #111, #112);
background-size: 0% 100%;
background-repeat: no-repeat;
transition: background-size 0.4s ease, color 0.4s ease;
}
[#buttons03] > li > a:hover {
background-size: 100% 100%;
}
</style>


• Copied
• Copy

1. Replace [#buttons03] with the actual ID or class of your target element. This can also be an icon.
2. Adjust the color values in the linear-gradient to achieve your desired effect. Make sure the two hex color values are different.

• Action

<style>
[.element] > *:first-child,
[.element]:not(:has(*)) {
cursor: pointer;
background-image: linear-gradient(to right, black, black);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 0% 2px;
transition: background-size 0.4s ease;
}
[.element] > *:first-child:hover,
[.element]:not(:has(*)):hover {
background-size: 100% 2px;
}
</style>


• Copied
• Copy

1. Replace [.element] with the actual ID or class of your target element.
2. Adjust the values in the linear-gradient to get the color you want.
3. Depending on your layout, you may need to tweak the element’s width to make the underline well-positioned.

• Action

<!------ Inline ------>
<div id="burger-x">
<span></span>
<span></span>
<span></span>
</div>
<!------ Head ------>
<style>
#burger-x {
width: 30px;
height: 24px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 1000;
}
#burger-x span {
display: block;
height: 4px;
background: #333;
border-radius: 2px;
transition: all 0.3s ease;
}
#burger-x.active span:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}
#burger-x.active span:nth-child(2) {
opacity: 0;
}
#burger-x.active span:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
}
</style>
<!------ Body End ------>
<script>
const burger = document.getElementById('burger-x');
burger.addEventListener('click', () => {
burger.classList.toggle('active');
});
</script>


• Copied
• Copy

Replace background: #333 with your desired color.

• Action

<style>
.floatingchat-container-wrap {
right: -100px;
left: unset;
}
.floatingchat-container-wrap-mobi {
right: -100px;
bottom: 0px;
left: unset;
}
.floatingchat-container-wrap-mobi iframe {
position: unset !important;
}
.floating-chat-kofi-popup-iframe{
right: 16px;
left: unset;
}
</style>


• Copied
• Copy

1. Copy and paste your Ko-fi floating button code into a Carrd Embed element.
2. Remove any text inside floating-chat.donateButton.text.
3. Set floating-chat.donateButton.background-color to "transparent".
4. Paste the additional customization code (above) into the same Embed element.

• Action

<details style="text-align: left;">
<summary style="cursor: pointer;">[Unfold]</summary>
[<ul style="display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; ">
<li><a>link</a><li>
<li><a>link</a><li>
<li><a>link</a><li>
</ul>]
</details>


• Copied
• Copy

1. Replace [Unfold] with your desired title.
2. Replace the entire [<ul> ... </ul>] block with your own HTML content.

• Action

<style>
[#text09] [strong] {
background: linear-gradient(90deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>


• Copied
• Copy

1. Add your text content.
2. Replace [ #text09 ] with your actual text ID.
3. Use strong for bold, em for italic, u for underline, and a for links.
4. Replace the #..... hex color code with one that matches your style.

• Action

<style>
[#container05] {
position: fixed;
top: 0;
left: 0;
z-index: 20;
}
[#container06] {
visibility: hidden;
}
</style>


• Copied
• Copy

1. Create your custom navigation container.
2. Duplicate it to make a second one.
3. Place both containers just before the #header control break.
4. Replace [ #container05 ] and [ #container06 ] with the actual IDs of your containers.
5. If it isn’t fixed, set its position: fixed !important;.

• Action

<style>
[#icons01] {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 10;
}
</style>


• Copied
• Copy

1. Create your custom icon.
2. Place the icon just before the #header or after the #footer control break.
3. Replace [ #icons01 ] with your icon’s actual ID.

• Action

<style>
@keyframes breathe {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1.1);
}
}
[#buttons01] {
animation: breathe [2s] ease-in-out alternate infinite;
}
</style>


• Copied
• Copy

1. Replace [#buttons01] with your element’s ID.
2. Modify [ 2s ] to control the animation duration.

• Action

<style>
@keyframes marquee {
to {
transform: translateX(-50%);
}
}
[#container05] > .wrapper {
overflow: clip;
}
[#container05] > .wrapper > .inner {
min-width: max-content !important;
animation: marquee [20s] linear infinite;
padding-left: calc(var(--gutters, 0px) - var(--padding-horizontal, 0px));
}
</style>


• Copied
• Copy

1. Set up a container with two columns.
2. Add marquee text and duplicate it into the second column.
3. Replace [ #container05 ] with your container’s ID.
4. Modify [ 20s ] to control the animation duration.

{ TIPS }The kitchen sink of tips — in the making.

• Quickly Find Fonts & Icons ▼ 2025.08

When I first started using Carrd, one thing bothered me: it took a long time to scroll just to find the font or icon I wanted.
Later I realized you can simply type the beginning letter of the font or icon name after the list appears—making the search much faster.

• ▲ Collapse

• Set Tooltip for Desktop Devices ▼ 2025.08

const element = document.querySelector('#text38');
element.setAttribute('title', 'tooltip content... ...');
1. Here, we use JavaScript select the element with the ID text38 and store it in the variable element.
2. Then, we set its title attribute to the desired tooltip content using setAttribute.
3. The browser’s built-in behavior automatically displays a default tooltip when the user hovers over the element on a desktop device.
4. If you have a Carrd Pro Plus account, you can add an attribute directly in the element settings (gear icon), for example: title=your tooltip content

• ▲ Collapse

• Commonly Used CSS Properties ▼ 2025.08

#text01 {
opacity: 0.8;
padding: 0 0 1rem 1rem;
background-color: #216E5B;
border: 1px solid #FFFFFF;
border-radius: 0 0 16px 16px;
}1. Here, we're selecting the #text1 element as the target.
2. opacity accepts values from 0 (fully transparent) to 1 (fully opaque).
3. padding uses four values in the order: top, right, bottom, left.
4. Instead of a solid color, you can also use a gradient like: background: linear-gradient(90deg, #color1, #color2);
5. border combines thickness, style (e.g. solid), and color.
6. border-radius with four values sets the corner radius in this order: top-left, top-right, bottom-right, bottom-left.

• ▲ Collapse

• How to Select a Column in CSS ▼ 2025.08

#container22 > .wrapper > .inner > :nth-child(2) {
... ...
}1. Here, we’re selecting the second column inside #container22.
2. To target a different container or column, simply update the container ID and adjust the :nth-child() selector accordingly.

• ▲ Collapse

• Add a Class to an Element in JS ▼ 2025.07

icon.addEventListener('click', () => {
icon.classList.add('rotate');
});1. Assume you have already selected the icon element and want to add the rotate class when it’s clicked.
2. We use addEventListener to listen for the click event, and classList.add to add the rotate class.
3. You can also add browser:none to the icon in Carrd’s URL column.

• ▲ Collapse

• Selecting an Element in JavaScript ▼ 2025.07

const icon = document.getElementById('icons01');1. The code on the right side of the equals sign selects an element by its ID. In this case, icons01 refers to the element's ID, which you can find in the gear icon settings.
2. The selected element is stored in the variable icon, so you can now use icon to reference that element in your code.

• ▲ Collapse

• Create a Column-Like Layout ▼ 2025.07

• ▲ Collapse

• Code Block Embed Position ▼ 2025.07

• ▲ Collapse

• Standard
• Free

• Plus
• $69
• Manual

• Standard
• Free

• Plus
• $49
• Manual

• Lite
• Free

• Standard
• Free