Documentation-based practice example; check the controls in your installed Oxygen version.
What it does and when to use it
Create text, headings and lists using one flexible native element. 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 heading system with correct document structure
Scenario: A heading system with correct document structure. The goal is a useful result on a real project, not a claim that this scenario was a completed client project.
- Add the page title as an H1 Text element and an introduction as a paragraph.
- Use H2 elements for sections and H3 elements for subsections.
- Apply a shared typography class and a fluid size to the heading; visual size should not determine heading level.
Fluid heading class
.guide-title {
font-size: clamp(2rem, 1.428571rem + 2.857143vw, 4rem);
line-height: 1.12;
}The expression maps 32–64px across 320–1440px at a 16px root. Keep the actual heading tag appropriate to its place in the document.
Expected result
You should have a heading system with correct document structure. 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 a heading looks too large, change its class styling rather than changing H2 to a paragraph. Inspect the rendered tags when the document outline seems wrong.
Checks before publishing
Choose heading levels for document structure, then control their visual size independently. Do not make every large line an h1.
- 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 Text Element 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.