Anchor

<a>Clickable link that can wrap text, images, or entire cards.

This page shows you how to use the Anchor block to create links that wrap any content — text, images, or full cards.

What it does

The Anchor block creates an <a> element. Unlike a simple text link, it can wrap anything: a line of text, an image, or an entire card layout. You control where the link points and what it contains by nesting other blocks inside it.

When to use it

• Navigation links — menu items, breadcrumbs
• Button-style links — styled as buttons but semantically links
• Card links — make an entire card clickable
• Icon links — social icons, action links

Key attributes

Attribute	Purpose	Example
href	Link destination	/about, https://...
target	Where to open	_blank for new tab
rel	Link relationship	noopener noreferrer
title	Tooltip text	Learn more about us
aria-label	Accessible name for icon-only links	Open menu

Anchor without href

An <a> without href is valid HTML but not focusable or keyboard-accessible — screen readers announce it inconsistently. If an element triggers an action without navigating, use a <button> instead. The main use case is a placeholder link (disabled nav item, current breadcrumb, pagination active page), though <span> is often cleaner.

Dynamic links

Use expressions to set the destination from your data:

<a href="{{ post.url }}">Read more</a>
<a href="{{ term.url }}">{{ term.name }}</a>

Clickable card pattern

Wrap an entire card layout to make it one big link:

<a href="{{ post.url }}" class="card">
  <img src="{{ post.thumbnail.url }}" alt="">
  <h3>{{ post.title }}</h3>
  <p>{{ post.excerpt }}</p>
</a>

Build this by nesting an Image block, a Heading block, and a Paragraph block inside the Anchor block.

Common mistake

Don't put an Anchor block inside another Anchor block. Nested <a> tags are invalid HTML — browsers handle them unpredictably and screen readers cannot parse them correctly.

Next steps

• SVG block — for icon links
• Div block — for non-clickable wrappers