Documentation-based practice example; check the controls in your installed Oxygen version.
What it does and when to use it
Make an entire group of content one clickable link. This example focuses on one achievable outcome rather than listing every possible setting.
Before you start
Start with a test page and the data or assets described in the example. The values below are starting points, not universal design defaults.
Worked example: A project card with one destination
Scenario: A project card with one destination. The goal is a useful result on a real project, not a claim that this scenario was a completed client project.
- Choose a project detail page as the card destination.
- Place its screenshot, title and short summary inside one Container Link.
- Remove links and buttons from the children; use a clear focus outline on the outer link.
Live linked-card illustration · HTML/CSS
CSS Clamp GeneratorOpen the real tool. This entire card has one destination.
Example card structure
<a class="project-card" href="/projects/example/">
<h3>Example project</h3>
<p>A concise description of its outcome.</p>
</a>This is the intended HTML relationship, not a URL that exists on this site. Replace the destination with your real project page and let Container Link provide the outer anchor.
Expected result
You should have a project card with one destination. Verify the result on the frontend using the same content or object described in the steps. A correct builder preview alone does not establish that links, data or interactions work for visitors.
Troubleshooting
If the card contains another anchor, split the actions into separate containers. A clickable card should have one clear destination, not competing nested links.
Checks before publishing
Nested links are invalid HTML. Keep the label meaningful and provide a visible keyboard focus state.
- Compare desktop and narrow-screen layouts using actual content.
- Follow every destination and operate interactive controls with a keyboard where applicable.
- Check an empty or unavailable-data state when the element depends on a provider.
Official reference and version notes
Official Container Link reference provides the current provider information. This is independent, AI-assisted documentation on Benjamin Olsen’s website; examples are clearly identified as practice recipes.
The native references were checked against the site’s Oxygen 6.2.0-beta.9 installation and public documentation. Individual recipes should still be validated in your project.