Oxygen’s design system is centered around classes. After you add a class to an element, you’ll then be able to modify the styles of the class. Classes may be applied to more than one element, and an element may have more than one class.

All classes added in Oxygen may be managed through the Selectors Panel.

Adding a Class

To add one or more classes to an element:

1. Click into the Classes control or click the ∨ icon in the Properties panel.
2. Type or paste the class name.
3. Press Enter.

You can also add multiple classes at once by entering a space-separated list. For example:

pad-2 max-width text-alt heading-font

Oxygen will add each class separately. After a class is added, the input stays active so you can continue adding classes without clicking back into the field.

Styling a Class

When a class is selected, there will be various styling options available in the Controls List of the Properties panel. Those properties are a 1 to 1 match with CSS properties, like we explain in the video below.

Class Actions

There are several Class Actions available when clicking the ∨ icon next to the Class.

• Rename: Change the name of the class.
• Duplicate: Create a new class with the same design settings as the current class.
• Set Condition: Apply the class only when specific conditions are met, such as on certain pages, templates, or content types. Conditional classes also include an in-builder preview toggle.
• Remove: Removes the class from the currently selected element.
• Delete: This will delete the class from Oxygen entirely.
• Lock/Unlock: Locks the class so it is no longer editable.
• States: States will allow you to work with pseudo-classes for the selected class.
  • &:hover: This state will allow you to set the hover styles for the class.
  • &:active: This state allows you to control the class when the element is activated by the user.
  • &:focus: This state lets you set the class design when it has focus.
  • &:focus-within: matches an element if the element or any of its descendants are focused.
  • &:focus-visible: Useful for when an element has focus and the user agent identifies that the element should be visibly focused.
• Nested Selectors: Nested selectors allow you to create and manage nested selectors for the class. Nested selectors are useful for creating additional pseudo-classes or targeting classes of sub elements within a container.