| description | 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 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.
{% hint style="warning" %} Utility classes can conflict with Inspector-generated classes. Test custom classes at every breakpoint and prefer the Inspector when it already provides the setting. {% endhint %}
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.
{% embed url="https://www.youtube.com/watch?v=VEqrlcXydTs" %}
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.
{% hint style="info" %} 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. {% endhint %}
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.