Elements

Elements are the basic building blocks that make up the interface of your page or component in Nordcraft. They create the structure, content, and interactive parts of your application that users see and interact with.

Elements

Live

In Nordcraft, like in HTML, elements exist in a hierarchical structure. Each element (except for the root element) has a parent element, and many elements can contain children elements. This parent-child relationship creates what we call an element tree, with ancestor elements containing descendant elements.

There are three types of elements that you can add to your pages and components:

• HTML elements
• Text elements
• Components

HTML elements are the most common type of element used in Nordcraft. These elements are native to the browser, which means the browser understands how to render and interact with them by default.

HTML elements are identified by their names or tags, each with specific meanings and behaviors, for example:

• Some tags like <video>, <audio>, and <img> have built-in functionality for displaying media
• Tags like <button>, <input>, and <select> provide default functionality for user input and interaction
• Tags such as <h1>, <header>, and <li> have semantic meaning that communicates the purpose of the content

HTML elements can be configured using attributes. These provide additional information or modify the element's behavior:

• Common attributes like id and class can be applied to nearly all elements
• Element-specific attributes like src for media elements or type for input elements define their unique properties

You can modify an element's attributes in the attributes tab of the element panel.

HTML elements can respond to user interactions through events. You can listen to all standard events on any element, and the editor allows you to add non-standard events if needed.

Events are configured in the events tab of the element panel.

Text elements in Nordcraft are specialized elements designed specifically for displaying text content only.

Key characteristics of text elements include:

• They can contain text only and cannot have child elements
• They do not have attributes and cannot trigger events directly
• They inherit text styling from their parent element and cannot be styled directly
• When selected, their content can be edited directly in the element panel
• Their content can be bound to variables or formulas for dynamic data display
• They can be conditionally displayed using the show/hide formula

Components are reusable custom elements that encapsulate their own structure, styling and behavior. They can be configured through attributes, styled with CSS and CSS variables, and can emit events to communicate with parent elements.

For more information, see the components description in building blocks and the Components pages of the documentation.

There are several important limitations to be aware of when working with elements in Nordcraft:

• Text elements cannot have children
• Some HTML elements, such as <img>, <input> and <br>, are void (self-closing) and cannot contain child elements - see void element on MDN