States

To add interactivity to your elements, you can change the way they look and behave in different states. As you're styling an element, clicking the States menu lets you select between the various states, like Hover and Pressed, you can access and style.

States

There are four states that you can set for any element:

• None
• Hover
• Pressed
• Focused
• Visited

Good to know

You can also style the placeholder state of form fields. Learn more about styling forms and the placeholder state.

None state

The None state is the default state of elements.

Hover state

The hover state shows when you hover your mouse pointer on an element. It’s not possible to hover on touch devices so be aware of this when designing for smaller breakpoints.

Pressed state

The pressed or active state is the state that shows when you click or press on an element. This state inherits styles from the Hover state cascade down.

Focused state

It’s possible to focus on certain elements, like input fields in a form, before activating them by pressing the Tab key on the keyboard. The focus state emulates this state and is often styled for input fields and links.

Visited state

The visited state is the state of a link that's been visited. This state inherits styles from the None state.

Styling states

When you select a state from the states menu, a green state class, also called pseudo-class, will appear at the end of the selector field. This indicates that you are now styling that state of your element.

You can make any number of styling choices. The styling changes you make here are what users will see when they interact with this element.

Good to know

For the visited state, you can only style the text color, the background color, and the border color. Background color will only appear if it is already set in a different state.

All states inherit styles from the None state. Pressed also inherits styles from the Hover state. You can see from where styles are being inherited using the Inheritance Menu on the right of the selector field.

Whatever state you're in, the changes you make will be visible on the canvas until you deselect or otherwise leave the state.

After you have added styles to a state and open the States menu, you will see blue circles indicating that there are local styles on that state. Orange circles indicate that there are inherited styles.

When you’ve finished styling your states, you can go back to the default None state by doing any of the following:

• Select None from the States menu
• Press the green checkmark icon next to the States menu
• Press ESC on the keyboard (this also deselects the current element)
• Select a different element
  

Current State

The Current state is automatically added to the class of a selected link element when this element is linked to the current page, section, or tab.

Current Link

To access the Current state for any link block, text link or button:

• Select any link element
• Navigate to the element’s Settings (Shortcut: D)
• Navigate to the Link Settings section
• Select the Page option
• Select the current page from the dropdown (if your link is on the home page, select the home page)
• Go to the Style Tab and you will see that the green Current state is activated in the Selector field

You can also select the Page Section option in the Link Settings. The Current state will appear in the Selector field for that element when you are in that section of the page. This is useful for styling buttons or links that are fixed as you scroll.

Current Tab

To access the Current state for Tab Links, select the Tab Link for the current visible tab and add a class. The Current state will automatically appear. Learn more about styling current Tab Links.

Styling the Current state

The Current state inherits all styles from the default state. When you add custom styling on the Current state, it will reflect how your link element looks when a user is on that state..

There are several ways to remove the Current state, when you want to style the default state:

• Select the default class in the Inheritance menu

• Temporarily remove the link to the current page/section.
• Duplicate the element, remove the page/section settings, edit the class and then delete the duplicate element when you’re done.