Anchor, classes & attributes

Every element can get an anchor ID to link to it, CSS classes, and HTML attributes. You find these in the Behaviour tab, in Anchor & classes and Attributes.

Anchor ID: link to a section

To link to a section of a page, for example from a menu item or a button:

1. Select the section and open Behaviour → Anchor & classes.
2. Type an Anchor ID, for example contact (letters, numbers and hyphens, no #).
3. Link to it with #contact on the same page, or /your-page/#contact from other pages.

With Smooth scrolling on in the Design System, the page glides to the section and stops below a sticky header. Elements have no ID unless you set one here, and each ID must be unique on the page.

CSS classes

CSS classes in Anchor & classes adds your own class names, separated by spaces, for example my-card is-featured. Use them to target the element from a popup trigger, an interaction, your theme's stylesheet or scripts from other plugins.

Every element already has two classes you can use: urmi-{type} (for example urmi-heading) and urmi-{id} with its unique ID.

These are plain class names. To share a style between elements, use classes in the Design tab instead.

Custom attributes

Custom attributes in Attributes adds HTML attributes to the element, one per line, as key|value:

data-track|hero-button
aria-label|Open the gallery
title|Our latest projects

Event handlers such as onclick are not allowed. Links have their own Custom attributes option in the link settings (the gear next to a link field).

Related