Advanced

Add CSS classes and IDs, or change a supported component’s HTML tag

Every built-in component provides Classes and ID fields. Components that support a semantic wrapper also provide HTML Tag controls.

Classes

Classes is blank by default. Add space-separated CSS class names without a leading dot:

rounded-lg shadow-lg

Elements supports Tailwind utility classes and classes supplied by your own CSS. Use Tailwind CSS documentation to confirm syntax.

Utility classes can conflict with Inspector-generated classes. Test custom classes at every breakpoint and prefer the Inspector when it already provides the setting.

ID

ID is blank by default and is not responsive. Enter the value without #:

about-section

Use short, unique IDs containing letters, numbers, hyphens, or underscores. Do not reuse an ID on the same page.

IDs can:

• Create an anchor destination.
• Target a component with CSS or JavaScript.
• Identify the hover parent used by Effects, Filters, and Transforms.

HTML Tag

HTML Tag is available only on components that support changing their wrapper.

Tag defaults to Default (set by the component). Options are:

• Div
• Span
• Section
• Article
• Aside
• Header
• Footer
• Nav
• Main
• Custom

Custom reveals a text field that defaults to div. Enter only the tag name, without angle brackets.

Choose tags for meaning, not appearance. A page should normally have one Main region, navigation belongs in Nav, and Section or Article should be used only when the content forms a meaningful document section.

Custom Attributes

Some components, including Container, provide an additional Custom Attributes collection. Each item has an Attribute and Value. Use valid HTML attributes and do not duplicate attributes already generated by Elements.