Documentation-based practice example; check the controls in your installed Oxygen version.
What it does and when to use it
Reuse a centrally maintained design in multiple places. 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 reusable guide card
Scenario: A reusable guide card. The goal is a useful result on a real project, not a claim that this scenario was a completed client project.
- Create one Component containing the guide title, summary and link.
- Bind those fields dynamically when the Component is used inside a post loop.
- Add it to the loop, then change a spacing class in the source and check that all instances update.
Expected result
You should have a reusable guide card. 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 every instance repeats identical text, separate shared design from instance data. Use dynamic fields or supported editable properties for the values that differ.
Checks before publishing
Bind per-post values dynamically in repeated items. Use editable properties when instances need controlled differences.
- 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 Component 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.