How do I make a card clickable in Webflow?

Wrap the card in a link block

A link block is a box, like a div, with one extra rule: the area inside it is a link. That is the element to use when the whole card should be clickable, including the image, the title, and the empty padding around them. A text link only covers the words. A button only covers the button.

If the card is already a div, select it on the canvas. Right-click, hover over Wrap in, and click Link block. The shortcut is Command + Option + A on Mac, or Control + Alt + A on Windows. Webflow selects the new link block and expands it in the Navigator. Press Command + Enter on Mac, or Control + Enter on Windows, if you want to name the class immediately.

You can also right-click the div and convert it to a link block. Conversion fails when the div already contains a link. A button, a text link, or a nested link block all count. Remove those links first, or convert them to divs, then convert the card. You can wrap an element that is bound to the CMS, a component instance, and an element inside a component. You cannot wrap a main component.

Example: a blog list shows three cards. Each card is an image, a title, and a date. Wrap each card once. Do not add a separate Read more link inside the card. A text block can look like a button. A real second link cannot live in the same block.

Point the whole card at one place

Select the link block and open Element settings, then Link settings. Link blocks use the same types as text links and buttons: URL, page, Collection page, page section, email, phone, and file. Pick one type for the card.

On a Collection list, choose Collection page. Each card then opens the item it belongs to, or the Collection page of a referenced item. A static page or a pasted URL sends every card to the same address, which is a common surprise after the layout looks right.

Check Open in a new tab only when the destination is outside the site. An internal card should stay in the same tab. File links are a paid-plan option. Image and document files open in the same tab unless that checkbox is on. Other file types download.

If the card should jump to a section on the same page, choose Page section and pick the section. A section on a different page needs a URL instead.

Remove the blue underline

Text inside a new link block turns blue and underlined. That is the All links tag, not a class you typed. Clearing the decoration on the heading or the paragraph will not remove it. Webflow's link block article says the underline has to be styled on the link block itself.

Select the link block. In the Style panel, set text decoration to none, and set the font color to the color the card should use, often black or your body color. The heading can still have its own size. The link color and the underline belong to the block.

Give the link block a class such as Post card before you do this, so the next card you wrap can reuse the same reset. If one card stays blue, that card is not using the class, or a more specific class on the heading is painting its own color on top.

Add a hover state

A card that looks like a static box will not tell people it is clickable, even after the link works. Webflow recommends a hover style on the link block. Select the link block, open States, and choose Hover. Add a box shadow, or change the background. Then go back to the None state and add a transition for the property you changed, so the shadow does not pop.

A background image can change on hover the same way. Set the image on the link block, switch to Hover, choose the second image, return to None, and add a transition for the background image.

Keep the hover on the link block, not on a different element for each card, unless one card truly needs its own look. A combo class can hold that exception. The base card class should carry the underline reset and the hover, so a new post picks them up when you apply the class.

Publish and click the padding

Publish and open the list on the live site. Click the image, the title, and a blank part of the card padding. All three should open the same destination. If only the title works, the title is its own link and the card around it is still a div.

On a Collection list, click two different cards. They should open two different items. If they match, change the link type to Collection page and publish again.

Tab to the card with the keyboard. The focus ring should land on one element, the link block, not on a title link plus a button. If the browser jumps to two stops inside one card, a nested link is still in the Navigator. Remove it, publish, and tab through the row again.