Breakdance Elements include a Section element, but it is not recommended for use in Oxygen. Oxygen is a class-based system, and the Breakdance Section cannot be fully styled using classes due to its internal structure. This can lead to inconsistent styling and make it harder to maintain a clean design system.

Instead, sections should be created using native Oxygen elements. This approach gives you full control, keeps your styles consistent, and aligns with how Oxygen is designed to work.

Recommended structure

A section should be built using two Container elements:

• An outer wrapper (full width, handles spacing and layout)
• An inner container (controls content width and layout)

Step-by-step

1. Add the outer wrapper

• Add a Container element
• Set the HTML tag to section
• Add the class: outer-wrapper

Apply the following styles to the class:

• Width: 100%
• Display: flex
• Flex Direction: column
• Justify Content: center
• Align Items: center
• Padding top: 6rem
• Padding bottom: 6rem (or use “apply opposite”)

This creates a full-width section with vertical spacing and centers the inner content.

2. Add the inner container

• Add another Container inside the outer wrapper
• Add the class: inner-container

Apply the following styles:

• Width: 100%
• Max width: 1120px (or your preferred page width)
• Padding: 1.5rem (or your preferred padding value. Apply to all sides)
• Display: flex
• Flex direction: column

This keeps your content aligned, prevents it from stretching too wide, and allows you to stack elements vertically in a consistent layout.

Why this approach

This method:

• Works fully with Oxygen’s class system
• Avoids styling limitations of Breakdance Elements
• Keeps your layout predictable and reusable
• Matches common layout patterns used in modern development

Video