S2 Attributes

S2 Attributes — easy-to-use and powerful attributes to help you work faster.

S2 Attributes is a lightweight library of pre-defined attributes. The concept is similar to utility classes in Tailwind CSS but tailored for Webflow in the form of attributes.

Take [opacity="1"] as an example, when applying this attribute to an element on the Designer panel, opacity is the attribute name and 1 is the attribute value.

Attributes can exist without a value. However, in some cases, custom elements and elements within them require attributes to have a value. We can type in something like true and it should work fine.

Learning S2 Attributes

The best way to understand attributes is to read the CSS, visit: https://github.com/realanthonyc/S2-Framework/blob/main/webflow/01_framework/1_attributes.css

The codes on the GitHub repository can be a bit behind the latest version of the framework.

We strongly recommend that you DO NOT add new attributes to the S2 Attributes nor rename any attributes. If the S2 Attributes do not perfectly match your desired style, create combo classes or use utility classes to style instead. You may update the attribute values according to your needs though. For example, to change [font="strong"] { font-weight: 700; } into font-weight: 600;.