How to insert variable into href path?

hello @nigelwhite

It is great to have you as an user. I understand you are a site builder rather than a developer, so sorry if my answer is too technical.

Direct answer

Each node's title is used as a url alias, so node/2 has an alias of /honey.

I will not advice doing that, recreating the path from other fields. Drupal already know the path and can retrieve and inject it for you, i will propose something later in the message.

Putting the variable {{title}} in there breaks it, whatever I try.

Usually, using pattern fields to feed HTML elements attributes, like anchor href attribute, is OK. You just need to be careful you are sending pure textual data and not a renderable array or object.

Where are you retrieving your node title from? A field formatter? if so, use a field formatter like the "Plain text" (string) formatter provided by Core. If I remember right, this formatter will inject only the text value of the node, and it will work as expected.

Better proposal

There are 2 things wrong about my direct answer:

• as previously say, you are not really injecting the node link, but are trying to rebuilding it in the Twig template
• when using a visual page builder, like the layout builder module, you also need to be careful because the preview markup will also be injected and may break stuff.

If it is your case, and if you have the ability to change the card CSS, i will inject the link element itself instead of just the URL, and start something like that (not tested proposal):

<div {{ attributes.addClass('card') }}>
  ...
  <div class="card__link">{{ link }}</div>
</div>

:not(.layout-builder__section)  .card__link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
:not(.layout-builder__section) .card__link a {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

And then, use the same "Plain text" (string) formatter and check the " Link to the Content" setting. It will produce a HTML link element markup, which will be managed correctly.

I don't know what this CSS does

This CSS was an untested idea (I am not a front dev) and related to Layout Builder. You are using Display Suite instead, which is using the admin theme, so forget everything I said about using a visual page builder.

The only field formatter provided by core on the title field is "Default".

If this formatter is producing raw text value instead of markup, it is OK.

The link is placed on only the title. It should be on the whole card.

Maybe it is a pure "CSS in the browser" issue? Do you have an HTML link (injected in image, title or badge) into an HTML link (the wrapper)? I tcan turn the browsers crazy.

To answer your original question, there are multiple ways to solve your issue:

• Putting your link drupal field in your url pattern field using a Formatter that only renders the URL. This need to choose the "Only content" option in the "Field template" setting to avoid having the markup around your content. This doesn't need anything else than UI Patterns but the downside of this method is that ALL your fields will be rendered without wrappers and labels.
  
  
• Creating an extra field in the code that only returns the value without any wrapper and put it in the url pattern field. It needs the patch from #3311088: Add extra field support to be applied on UI Patterns and to know how to code a bit to create the extra field.
• Use the UI Patterns Settings module to define the url not as a pattern field but as a pattern setting and to allow using tokens to define this settings. This needs an additional module and some understanding of tokens but it's the easiest way to get it done.
  
  

Quick update: I just discovered the No Markup module that could be an addition to the first option I described above. Instead of marking all fields as not having markup, you can use this module to do it field by field.

The questions has been answered. Do not hesitate to reopen if needed.

Updating issue credits.