welcome to

stack

break your barriors

advanced building

step up your game.

MonoDeaf - Musician, Web Designer"I first started out in web design with Carrd, as my record label needed a website. Instead of hiring someone to build one for us, I thought about diving into the project first hand, and immediately fell in love with it. Carrd opened the doors to creating worlds of art and creativity and before I knew it, I was learning code languages to add super cool things in my Carrds to make them stand out. I later used more advanced web builders and started to really understand the structure of websites. Since then, I have created many advanced projects for fun, built dashboards and components, and so much more, and I wouldn't have been here if it wasn't for Carrd."

WHAT'S IN HERE?

TL:DR = COOL SH*T IS IN HERE

components.

the "2 column" idea

Carrd users often want to create layouts that are too complex for Carrd's focus. One of these is having two columns side by side.

Lorem ipsum odor amet, consectetuer adipiscing elit. Nulla dapibus adipiscing duis nostra libero; ligula fermentum nec. Curabitur ac class congue; fusce adipiscing sollicitudin erat. Eu ultricies neque dis porta magna eros porta lobortis. Pharetra neque egestas tincidunt semper natoque nam himenaeos pharetra. Enim maecenas cubilia vitae eleifend venenatis blandit interdum mattis! Parturient diam eleifend pretium; iaculis gravida dapibus tempus risus. Ridiculus mollis tincidunt natoque suscipit, cubilia aptent justo. Integer etiam rhoncus senectus cursus commodo eu.

• Button

Carrd is designed for simplicity, enabling users to create one-page websites quickly and easily. However, users sometimes try to build complex layouts that aren't directly supported by Carrd’s features. A common request, for instance, is to place two containers side by side. While Carrd doesn’t support side-by-side containers, there is a workaround that achieves a similar effect by customizing div blocks within columns.


Understanding Containers and Div Blocks:In Carrd, a container is meant to hold content like text, images, and links, but it’s arranged in a single-column layout by default. However, when you add multiple columns within a container, Carrd generates each of these columns as <div> blocks in the HTML code.A <div> block is essentially a section that can contain various elements, such as:
- Text
- Images
- Links
- ButtonsThese blocks are stacked side by side when columns are used, but they aren't containers themselves—they're building blocks within the layout.

Customizing Div Blocks with CSS:To make these <div> blocks appear as individual containers, users can apply custom CSS to them. Here’s how:

1. Inspecting the Layout: By using the “Inspect” tool in a browser (right-click on the page and select “Inspect”), users can view the HTML structure. They can identify the specific <div> blocks created for each column.2. Applying Custom CSS: With the correct <div> block identified, users can return to Carrd and use custom CSS inside of an embed element to adjust styling, such as adding padding, background colors, or borders. This makes each column appear as if it’s its own container, even though it’s technically part of a larger container.This approach allows for more flexibility and styling within Carrd’s structure, helping users create more dynamic layouts while staying within Carrd's design capabilities.For the example above, here are image references and the entire CSS code to create the infamous "2 column" effect.

<style>
#container21.columns > .wrapper > .inner {
justify-content: space-between;
height: 100%;
}
#container21.columns > .wrapper > .inner > div:first-child {
background-image: url("https://images.unsplash.com/photo-1518965539400-77d851d65c43?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-repeat: no-repeat;
padding: 1rem;
overflow: hidden;
width: 49%;
height: 100%;
border: 1px solid #1E1E1E;
}
#container21.columns > .wrapper > .inner > div:last-child {
background-image: url("https://images.unsplash.com/photo-1519638399535-1b036603ac77?q=80&w=2662&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-repeat: no-repeat;
padding: 1rem;
overflow: hidden;
width: 49%;
height: 100%;
border: 1px solid #1E1E1E;
}
</style>

Facebook sharing button

If a user really enjoys your website and would like to share it to some friends on X (Twitter) or Facebook, lets take a look at the steps needed to share your website.1. Copy the websites URL from the browsers address bar.2. Close out of the browser.3. Open the application.4. Select the option to create a new post in the application.5. Paste the copied URL into the text field of the post.If this seems tedious, thats because it is. Users would have to be die-hard fans in order to go through this process just to share your website to friends on X or Facebook, but what If I told you that this can all be done with one click? and better yet, involves not even a single line of code?One of the most overlooked techniques to increase visibility of a website is by adding share buttons. These are commonly seen on websites with news articles or blogs, where users can quickly share a websites article to social media. Allowing users to quickly and efficiently share your website can be very beneficial to grow your websites reach to new eyes. Let's go over this popular technique — Share Buttons.Let’s go over a Facebook share button. Add a button element to the page, and add the label for the button, “Facebook”. You may also just use an Icon element, using the Facebook Icon if you’d like to. Next, we will need to adjust a specific URL that we will be using as the button’s URL. This URL is:https://www.facebook.com/sharer.php?u=example.comAt the end of this link (after the ‘u=’), replace the example URL with your websites URL. Once that is done, it is a good idea to include “||blank” at the very end, as this will open the application in a new tab, preventing your website from being overridden by Facebook, causing users to lose your website.If done correctly, the link you'll be placing in your button is:https://www.facebook.com/sharer.php?u=yourwebsitehere.com||blankPublish your changes and check out your new Facebook share button. Once clicked, it should open the Facebook webpage or application (users must be logged in), and display a prefilled post containing the link to your website that is ready to share. This can be a substantial time saver for users who want to spread the word of your awesome Carrd website, and add an extra touch of intractability.

Step 1
Add a button element to the page.

Step 2
Apply the adjusted URL -https://www.facebook.com/sharer.php?u=yourwebsitehere.com||blank - to the button or icon element.

Step 3
Publish the website and test.

scrolling box for text

Creating a scrolling text box in Carrd can be a simple and effective way to display lengthy content within a small, scrollable area. Because the text element is inside of a <div> tag, we can set the height of the text block and use CSS to control the overflow behavior to add a scrollbar and even style it to match the rest of your design. Here’s a step-by-step guide to doing this with CSS in the text element’s advanced settings.Step 1: Add a Text Element
1. In your Carrd editor, add a Text element where you want the scrolling text box to appear.Step 2: Access Advanced Settings
1. Click on the Text element.
2. Go to Settings (Gear Icon).Step 3: Customize CSS for Scrolling
To create the scrolling effect, we’ll add custom CSS in the Style settings:1. Set the Box Height – Define a height to limit the text area. This must be smaller than the total height that the text reaches to, or else the scrollbar will not appear. For example, If the content in the text reaches 5rem in height, you must define the height less than 5rem.2. Enable Scrolling – Use overflow: auto to allow scrolling within the box.3. Add Custom Styling (optional) – You can add styling such as borders or background color to enhance the look.

Example Styles:
- height: 150px;: Sets a fixed height for the text box. Adjust this to your desired height.
- overflow: auto;: Allows the text box to scroll if the content exceeds the set height.
- border: 1px solid #ccc;: Adds a 1-pixel border around the box in a light gray color.
- padding: 10px;: Adds space inside the box for readability.
- background-color: #f9f9f9;: Sets a light gray background for the text box.
-border-radius: 8px;: Adds rounded borders to the edges of the text box.With these simple adjustments in Carrd's text element settings, you’ll have a clean, scrollable text box that’s both functional and visually appealing.

SCROLL METext element > Settings > Style > Default > Text =
overflow: auto;
height: 20rem;Lorem ipsum odor amet, consectetuer adipiscing elit. Curae risus fames tempor aliquam dui pretium arcu amet. Ad mattis id luctus aenean quam ante est. In lacinia nunc risus ac venenatis litora. Metus penatibus in erat habitasse tortor praesent ornare dapibus. Elit dis conubia aliquam ultricies congue curae gravida iaculis. Vivamus nostra ullamcorper maecenas blandit elementum sed pellentesque nunc. Vel imperdiet erat risus dignissim venenatis. Praesent nullam aenean; adipiscing tempus bibendum curabitur.Et mattis nam aliquet fringilla etiam. Felis cubilia lectus dui dignissim mus efficitur porttitor quam. Velit ornare urna velit aliquet posuere. Varius tincidunt eget lacinia accumsan scelerisque ex pharetra felis fringilla. Eros tincidunt aptent tortor molestie neque per maecenas nibh. Ullamcorper congue leo neque diam; sit magnis commodo. Curae nulla litora aptent nulla nibh posuere.Ante condimentum at magnis commodo sodales elit congue. Fames luctus aenean lacus inceptos hac. Aliquam tellus lacinia sit commodo sagittis himenaeos tincidunt ad. Dignissim ut egestas urna at sapien. Pellentesque ipsum tristique nisi dictum suscipit inceptos cursus netus. Morbi aliquet ligula sit praesent ultrices facilisi? Fermentum senectus id torquent justo felis elementum? Mus magna dignissim turpis porttitor venenatis aliquam pharetra rhoncus. Ligula a vestibulum bibendum finibus massa lacinia. Lacinia gravida eget duis quam ridiculus vulputate viverra.Platea litora sed sollicitudin commodo senectus habitasse pharetra. Vestibulum mollis in netus netus vel. Commodo eget taciti adipiscing, malesuada cras ultricies in. Primis imperdiet magnis leo etiam elementum accumsan magna mi. Class egestas pretium curae natoque ridiculus? Interdum aptent ante efficitur ullamcorper risus litora lacus venenatis. Ipsum ultricies lectus varius vehicula maecenas.Phasellus curabitur ligula auctor, vestibulum ultricies efficitur conubia. Cursus etiam vitae gravida velit dolor. Nascetur in urna cursus quam blandit risus euismod. Urna lacus nulla venenatis adipiscing vestibulum scelerisque. Nascetur semper pulvinar tristique faucibus; placerat hac. Efficitur quis hendrerit himenaeos class fames donec. Posuere sollicitudin per diam conubia vitae justo. Dignissim tempus pretium pretium tempor posuere imperdiet.

SCROLL METext element > Settings > Style > Default > Text =
overflow: auto;
height: 20rem;
border: 1px solid #505050;
padding: 1rem;Lorem ipsum odor amet, consectetuer adipiscing elit. Curae risus fames tempor aliquam dui pretium arcu amet. Ad mattis id luctus aenean quam ante est. In lacinia nunc risus ac venenatis litora. Metus penatibus in erat habitasse tortor praesent ornare dapibus. Elit dis conubia aliquam ultricies congue curae gravida iaculis. Vivamus nostra ullamcorper maecenas blandit elementum sed pellentesque nunc. Vel imperdiet erat risus dignissim venenatis. Praesent nullam aenean; adipiscing tempus bibendum curabitur.Et mattis nam aliquet fringilla etiam. Felis cubilia lectus dui dignissim mus efficitur porttitor quam. Velit ornare urna velit aliquet posuere. Varius tincidunt eget lacinia accumsan scelerisque ex pharetra felis fringilla. Eros tincidunt aptent tortor molestie neque per maecenas nibh. Ullamcorper congue leo neque diam; sit magnis commodo. Curae nulla litora aptent nulla nibh posuere.Ante condimentum at magnis commodo sodales elit congue. Fames luctus aenean lacus inceptos hac. Aliquam tellus lacinia sit commodo sagittis himenaeos tincidunt ad. Dignissim ut egestas urna at sapien. Pellentesque ipsum tristique nisi dictum suscipit inceptos cursus netus. Morbi aliquet ligula sit praesent ultrices facilisi? Fermentum senectus id torquent justo felis elementum? Mus magna dignissim turpis porttitor venenatis aliquam pharetra rhoncus. Ligula a vestibulum bibendum finibus massa lacinia. Lacinia gravida eget duis quam ridiculus vulputate viverra.Platea litora sed sollicitudin commodo senectus habitasse pharetra. Vestibulum mollis in netus netus vel. Commodo eget taciti adipiscing, malesuada cras ultricies in. Primis imperdiet magnis leo etiam elementum accumsan magna mi. Class egestas pretium curae natoque ridiculus? Interdum aptent ante efficitur ullamcorper risus litora lacus venenatis. Ipsum ultricies lectus varius vehicula maecenas.Phasellus curabitur ligula auctor, vestibulum ultricies efficitur conubia. Cursus etiam vitae gravida velit dolor. Nascetur in urna cursus quam blandit risus euismod. Urna lacus nulla venenatis adipiscing vestibulum scelerisque. Nascetur semper pulvinar tristique faucibus; placerat hac. Efficitur quis hendrerit himenaeos class fames donec. Posuere sollicitudin per diam conubia vitae justo. Dignissim tempus pretium pretium tempor posuere imperdiet.

custom scroll bar

Browsers use built-in scroll bars to navigate horizontally or vertically through webpages. A custom scroll bar on a website enhances user experience by aligning with the overall design aesthetic, creating a cohesive and visually appealing interface. It allows brands to reinforce their identity through unique colors, styles, or animations, making the site more memorable. By tailoring this often-overlooked element, websites can elevate both form and function, leaving a lasting impression on users.

Step 1
Add an embed element anywhere on the page, preferably at the top so it doesn't get lost in content.

Step 2
Leave the 'Type' setting to Code, and set the 'Style' to Hidden > Head.

Step 2
Apply the code (given below) to 'Code' field.

<style>
* {
scrollbar-width: thin;
scrollbar-color: #101010;
}
*::-webkit-scrollbar {
width: 10px;
}
*::-webkit-scrollbar-track {
background: #000000;
}
*::-webkit-scrollbar-thumb {
background-color: #101010;
}
*::-webkit-scrollbar-button {
display: none;
}
</style>

Step 4
Customize the look with different colors, width, height and adding border-radius.

tilting element on hover

Animation on elements can be in any movement and form. One popular animation effect often used by webflow's platform users, is a mouse animation. Elements with this animation interacts with the cursor's position on the screen, creating captivating and intriguing effects. We can leverage JavaScript in the embed element to target a separate element with a specific ID, and apply a cursor interactive animation to the element.

Step 1
Add an Image element to the page (can be any element that you would like to be given the hover affect).

Step 2
Open the element's settings menu by selecting the gear icon. Give the element a unique ID, such as "hover-effect".

Step 3
Add an embed element anywhere on the page, preferably nearby the element that will be affected.

Step 4
Leave the 'Type' setting to Code, and set the 'Style' to Hidden > Head.

Step 5
Apply the code (given below) to 'Code' field.

<script>
function applyTiltEffectToId(elementId, options = {}) {
console.log(`Attempting to apply tilt effect to element with ID="${elementId}"`);const defaults = {
maxTilt: 15,
scale: 1.05,
speed: 150,
shadowAmount: 30
};
const settings = { ...defaults, ...options };const element = document.getElementById(elementId);
if (!element) {
console.error(`No element found with ID="${elementId}"`);
return;
}console.log(`Found element:`, element);let originalTransform = window.getComputedStyle(element).transform;
if (originalTransform === 'none') originalTransform = '';console.log(`Original transform: ${originalTransform}`);element.style.transition = `transform ${settings.speed}ms ease-out, box-shadow ${settings.speed}ms ease-out`;function handleMouseMove(e) {
const { left, top, width, height } = element.getBoundingClientRect();
const centerX = left + width / 2;
const centerY = top + height / 2;
const deltaX = (e.clientX - centerX) / (width / 2);
const deltaY = (e.clientY - centerY) / (height / 2);
const rotationY = deltaX * settings.maxTilt;
const rotationX = -deltaY * settings.maxTilt;// Calculate shadow offset (inverted from tilt direction)
const shadowX = -deltaX * settings.shadowAmount;
const shadowY = -deltaY * settings.shadowAmount;const newTransform = `${originalTransform} scale(${settings.scale}) rotateY(${rotationY}deg) rotateX(${rotationX}deg)`;
element.style.transform = newTransform;
element.style.boxShadow = `${shadowX}px ${shadowY}px ${settings.shadowAmount}px rgba(0, 0, 0, 0.5)`;
}function handleMouseLeave() {
console.log(`Mouse left element, resetting transform`);
element.style.transform = originalTransform;
element.style.boxShadow = '';
}element.addEventListener('mousemove', handleMouseMove);
element.addEventListener('mouseleave', handleMouseLeave);console.log(`Tilt effect applied successfully to element`);
}document.addEventListener('DOMContentLoaded', function() {
console.log('DOM fully loaded and parsed');
applyTiltEffectToId('hover-effect');
});
</script>

Step 6
Publish and test the hover effect. If the hovering effect is not working correctly, check that the element's ID matches the ID at the bottom of the script, located after applyTiltEffectToId('YourElementsIdGoesHere')

Step 7
To customize the look and feel of the hovering effect, the script offers a few adjustable parameters near the beginning, just under - const defaults.maxTilt = The amount of tilt that will be applied to the element when hovered. The higher the number, the larger the effect.Scale = The amount of size increase that will be applied to the element when hovered. The higher the number, the larger the element will become.Speed = The speed at which the effect will happen. Lower numbers offer a slower, smooth experience. Higher numbers offer a faster, responsive experience.ShadowAmount = The amount of background shadow that will be applied behind the element when hovered. The higher the number, the larger the shadow will become.

parallax backgrounds

A parallax background is a perspective effect where the background moves at a slower rate than the scrolling speed of the webpage, increasing the effect of distance between the content and background. While Carrd provides an easy way to apply parallax to containers, it is currently not possible to apply a parallax effect to the background of the website. Let's utilize the power of CSS to create a full background parallax effect.

Step 1
Add a container to the website, preferably at the top.

Step 2
Be sure that this container's style set to None. This container will be used as the background.

Step 3
Set the container's background to Image, and choose an image.

Step 4
Set the image's position to Top, the size to Fill, and the parallax to Slow.

Step 5
Open the container's settings menu by selecting the gear icon. Under Style and Default, apply the CSS (given below) into the custom CSS field.

position: fixed;
top: 0;
left: 0;
min-width: 100vw;
min-height: 100vh;
z-index: -1;

Step 6
The container should now be in the background with the width and height set to the screens appropriate width and height. The container's parallax image should still be responsive to the scrolling position, moving slower than the scrolling speed.Keep In Mind:• The page's background will be hidden by the container.• Use a fairly good high resolution image for the background, as it will be zoomed in for the parallax effect. A good place to look for images is on Unsplash.

fonts.

Type to test

Manrope - Regular

Manrope - Semi Bold

Manrope - Heavy

Monsterrat - Regular

Monsterrat - Semi Bold

Monsterrat - Heavy

Poppins - Regular

Poppins - Semi Bold

Poppins - Heavy

Inter - Regular

Inter - Semi Bold

Inter - Heavy

Suse - Regular

Suse - Semi Bold

Suse - Heavy

knowledge base.

sizing In Carrd

Carrd is designed to make one-page websites look polished and perform well across all device sizes, from desktop to mobile. One of the key ways Carrd achieves this is by using a modern sizing unit called "REM" (root em). This unit is a CSS measurement based on the root font size, making it easier to keep elements and text proportional and consistent on different screen sizes.What is REM?
The REM unit stands for "root em" and is based on the font size set for the root of the document—usually the <html> element in a webpage. By default, this root font size is set to 16 pixels in most browsers. When we say "1rem = 16px," we mean that 1 REM unit will equal 16 pixels if no changes are made to the root font size. Carrd leverages this by sizing elements in REMs so that all components scale relative to this root size.For example:If you set a heading size in Carrd to 2rem, it would equal 32px (2 times the root size of 16px).
Setting text to 0.75rem would make it 12px (0.75 times 16px).
This makes it easy to maintain consistent scaling throughout the site. If the root font size is adjusted (say to 18px for accessibility), every REM-based element scales automatically without extra changes needed.Why REM Is Ideal for Responsive Design:
One of the biggest advantages of using REM units is the flexibility it provides for responsive design. Carrd’s use of REM means:Consistency Across Devices:
Because REM sizes are based on a single root font size, elements retain their proportions on screens of any size, from mobile phones to large monitors.Accessibility:
Users who adjust font sizes in their browser settings for better readability will find REM-based designs automatically scale to match those adjustments.Simple, Scalable Sizing:
REM units let you define sizes once, and they’ll remain proportionate, creating a harmonious look across the site without needing device-specific adjustments.How Carrd Users Can Benefit from Understanding REM:
For Carrd users looking to take advantage of custom styling, understanding REM can be especially powerful. You can apply custom CSS in Carrd’s Embed element to add your own components or style adjustments. Using REM units in your code means your additions will seamlessly adapt to Carrd’s layout and stay consistent across devices. This approach maintains a modern, responsive design standard and ensures that your customizations look natural within Carrd's framework.In essence, Carrd’s use of REM units ensures that all the elements on your site—from text to buttons and layout components—scale gracefully, providing a smooth experience for visitors on any screen size. By using REM, Carrd gives users a responsive foundation to build professional, adaptable landing pages that look clean and consistent everywhere.

marketing.

code.