The template's identifier can be copied with the button in the template's row of the templates list
Types of template structure items
Block
The basic template structure item with no predefined behavior. It is used as a container for laying out and styling arbitrary nested content. It can contain template structure items of any type
Element
A template structure item that must be assigned an element from the list below. Each such element has its own built-in dynamic behavior and data binding
The list of all elements:
"Custom HTML" - shows arbitrary HTML or text specified in the template's field
"Custom pictures" - the container of the template's uploaded images. For each image it shows a child element
"Custom image" - one of the images from the parent element's list. When the "entities" function is called via the SDK, the dictionary it returns gets the "image" key
"Icon" - shows one icon of the library, picked in the "Icon" field. Drawn in the text color, 1em square until its own width and height are set
"Search" - the search box
"Search clearing" - clears the search box on click. If the search applies automatically - the results update right away, otherwise - after clicking the "Applying" element
"Filters" - the container of all the template's filters. For each filter it shows a child structure
"Filter" - one filter. When the "entities" function is called via the SDK, the dictionary it returns gets the "filter" key
"Filter title" - the filter's label
"Filter options" - the list of the filter's options (only for filters of the "Checkboxes" or "Radio buttons" type). For each option it shows a child element
"Filter option" - one filter option. When the "entities" function is called via the SDK, the dictionary it returns gets the "filterOption" key
"Option input" - the checkbox or radio button of the filter option
"Option label" - the filter option's label
"Option count" - the number of search results for this filter option
"Nested options" - the child options of the filter
"Options search" - search among the filter's options (only for filters of the "Checkboxes" or "Radio buttons" type)
"Options search clearing" - clears the search among this filter's options on click
"No options found" - the message when the search among the filter's options gave no results
"Number filter" - a filter of the "Numeric" type
"Number value" - the exact value field of a filter of the "Numeric" type
"Number minimum" - the minimum value field of a filter of the "Numeric" type
"Number maximum" - the maximum value field of a filter of the "Numeric" type
"Range slider" - a slider for choosing a range of values of a filter of the "Numeric" type. It is synchronized with the "Number minimum" and "Number maximum" fields
"Applied filters" - shown only when at least one filter is applied
"Applied search" - the applied search query - shown only while there is one
"Applied search value" - the applied search query's text
"Applied search removal" - removes the search query and empties the search box on click
"Applied filters list" - the list of the applied filters. For each one it shows a child element. When the "entities" function is called via the SDK, the dictionary it returns gets the "appliedFilters" key
"Applied filter" - one applied filter. When the "entities" function is called via the SDK, the dictionary it returns gets the "appliedFilter" and "appliedFilterOptions" keys
"Applied filter title" - the applied filter's label
"Applied number" - the applied value of a filter of the "Numeric" type: the exact number or a range of values. Shown only for filters of the "Numeric" type
"Applied exact number" - the typed exact number - shown only while there is one. For the template structure items nested in it, when the "entities" function is called via the SDK, the dictionary it returns gets the "appliedFilterNumber" key
"Applied minimum" - the typed minimum - shown only while there is one and no exact number (an exact number takes precedence over the range). For the template structure items nested in it, when the "entities" function is called via the SDK, the dictionary it returns gets the "appliedFilterNumber" key
"Applied maximum" - the typed maximum - shown only while there is one and no exact number (an exact number takes precedence over the range). For the template structure items nested in it, when the "entities" function is called via the SDK, the dictionary it returns gets the "appliedFilterNumber" key
"Applied number label" - the number of the "Applied exact number", "Applied minimum" or "Applied maximum" element it is in - always a number
"Applied number removal" - removes the value of a filter of the "Numeric" type on click - the exact number, the minimum and the maximum
"Applied filter values" - the list of the filter's applied values
"Applied filter value" - one applied value of the filter. When the "entities" function is called via the SDK, the dictionary it returns gets the "appliedFilterOption" key
"Applied filter value label" - the applied filter value's label
"Applied value removal" - removes this particular applied filter value on click
"Resetting" - cancels the not yet applied changes of the search and filters on click, returning them to the last applied values
"Clearing" - immediately clears all filters and applies the search on click. Inside a "Filter" element - only that filter
"Applying" - applies the entered search and the selected filters on click
"Pending results count" - the number of results that will be found after applying the not yet confirmed search/filters. Shown only while there is such a change. With child elements it shows them instead - the number itself is then the "Pending results number" element among them
"Pending results number" - the number itself inside a "Pending results count" element with child elements
"Sorting" - the dropdown list of the results sorting. When the "entities" function is called via the SDK, the dictionary it returns gets the "sortOptions" key
"Objects limit" - the dropdown list of the number of results per page
"Objects views" - the switch of the results view
"Results count" - the total number of found results
"Loading more" - loads the next page of results without replacing the current ones on click
"Pagination" - the pagination container
"Previous page" - goes to the previous page on click. When the "entities" function is called via the SDK, the dictionary it returns gets the "paginationItems" key
"Pagination list" - the list of pagination items. For each one it shows a child element. When the "entities" function is called via the SDK, the dictionary it returns gets the "paginationItems" key
"Pagination item" - one pagination item - a page number or a separator. The item of the page shown carries the lur_page__current class. When the "entities" function is called via the SDK, the dictionary it returns gets the "paginationItem" key
"Page number" - the page number. A click goes to it
"Pagination ellipsis" - the separator between page numbers
"Page select" - the dropdown list for going to any page. When the "entities" function is called via the SDK, the dictionary it returns gets the "paginationItems" key
"Next page" - goes to the next page on click. When the "entities" function is called via the SDK, the dictionary it returns gets the "paginationItems" key
"Objects" - the container of the search results. For each result it shows a child element
"Object" - one search result. When the "entities" function is called via the SDK, the dictionary it returns gets the "object" key
"Object field: Selectors" - the object's field of the "Single selector" or "Multi selector" type. For each option of the object it shows the child elements, in the order of the options in the structure. For the template structure items nested in it, when the "entities" function is called via the SDK, the dictionary it returns gets the "objectSelector" key
"Selector" - the label of the option the "Object field: Selectors" element is shown for
"Object field: String" - the object's text field
"Object field: Textarea" - the object's multi-line text field
"Object field: Number" - the object's numeric field
"Object field: Date" - the object's date field
"Object field: Image" - the object's images field. For each image it shows a child element
"Object image" - one image of the object. When the "entities" function is called via the SDK, the dictionary it returns gets the "image" key
"No objects found" - the message when no search results were found
"Loader" - the loading indicator of the search results
"Slot" - a place inside a component whose content is set separately for each insertion of the component: having selected the slot's row in an inserted component, a block, an element or another component is added into it - they are shown in this insertion only. The slot's own child units are the default content, when the insertion added nothing. The slot is transparent for the nesting rules - its content is checked against the slot's parent unit. Outside a component the slot is rendered as a plain block
Component
A template structure item that is a reference to a separately created and named hierarchy of template structure items. One component can be inserted into a template an unlimited number of times - changes in it are reflected immediately in all places of use. A component is created with the "Create component" action and inserted with the "Insert component" action. Styles are set inside the component, the inserted unit has no styles of its own. The "Slot" element inside a component marks a place whose content can be set separately for each insertion
Template import
The "Import template" action inserts into the selected template structure item one of the ready-made Lurazon templates - a whole page or a part of it, from the same list as when creating a template. The imported template becomes the first child unit of the selected one
Fields of template structure items
Settings
General
The values of the global fields are set in only one place in the template: when the root template structure item is selected
The "Custom API", "Options API" and "Results API" fields
The value of the "Custom API" field decides where the template takes both its base settings and its search results from: from Lurazon, or from a custom backend
The "Custom API" field has the following possible values: "No", "Yes". If the "Yes" value is selected, two additional fields appear - "Options API" and "Results API", in which the links to the APIs of the backend must be specified: the template requests its base settings from the first one and its search results from the second one
With the "Yes" value the site's routes are not used: the template is built on any page that carries its tag, and the backend receives the page's path with every request, so the page routing is done on the client's backend side. With the "No" value the "Return all object fields" field appears
The "Return all object fields" field
This field is available only when the "No" value is selected in the "Custom API" field, and it has the following possible values: "No", "Yes". With "No" the search returns only the object fields the template's elements show, which keeps the responses light. With "Yes" the search returns all object fields, and all of them become available for reading via the SDK
The "Breakpoints" field
This field takes 2 values that define the template's main breakpoints. Two screen widths at which the template's layout must change need to be specified:
- the width from which the layout for desktop devices starts
- the width from which the layout for tablet devices starts
All generated responsive layout uses the "min-width" rule
The "Unit limits" field
The maximum screen width for which the fluid layout is applied must be specified. The given value must not be less than the desktop breakpoint set in the "Breakpoints" field
The "Search auto apply" field
This field has the following possible values: "Yes", "No"
If the template has a search box, new search results are fetched automatically only if the value of this field is set to "Yes" for the breakpoint the user is on
The "Filters auto apply" field
This field has the following possible values: "Yes", "No"
If the template has at least one filter, new search results are fetched automatically only if the value of this field is set to "Yes" for the breakpoint the user is on
The "Minimal loading delay" field
Even if the search results arrive as fast as possible, the value of this field forces the loading indicator to be shown for at least as long as specified in the field. The value of this field is set in milliseconds
The "Search debounce" field
The value of this field is the delay (in milliseconds) before sending the search request after its last change in the search box
The "URL Storing" field
This field has the following possible values: "Yes", "No". When "Yes" is selected, the settings of which data is stored in the page link and how become available
The "Store search" and "Search key" fields
The "Store search" field has the following possible values: "Yes", "No". If the "Yes" value is selected, an additional "Search key" field appears, in which the key must be specified under which the search box's value is stored, if it is set up for the template
The "Store filters", "Checkboxes joiner" and "Numbers range joiner" fields
The "Store filters" field has the following possible values: "Yes", "No". If the "Yes" value is selected, the additional "Checkboxes joiner" and "Numbers range joiner" fields appear
The value of the "Checkboxes joiner" field is responsible for the character that joins the values of a filter of the "Checkboxes" type
The value of the "Numbers range joiner" field is responsible for the character that joins the values of a filter of the "Numeric" type, when a number range is specified
The "Store sort" and "Sort key" fields
The "Store sort" field has the following possible values: "Yes", "No". If the "Yes" value is selected, an additional "Sort key" field appears, in which the key must be specified under which the sorting value is stored, if sorting is set up for the template
The "Store pagination", "Page key" and "Limit key" fields
The "Store pagination" field has the following possible values: "Yes", "No". If the "Yes" value is selected, the additional "Page key" and "Limit key" fields appear
The value of the "Page key" field is the key under which the page value is stored, if limits are set up in the template
The value of the "Limit key" field is the key under which the value of the number of shown results is stored, if limits are set up in the template
The "Store objects view" and "Objects view key" fields
The "Store objects view" field has the following possible values: "Yes", "No". If the "Yes" value is selected, an additional "Objects view key" field appears, in which the key must be specified under which the value of the search results view is stored, if views are set up in the "Objects views" field of the template
The "Enable facets", "Child facet fallback" and "Parent facet fallback" fields
The "Enable facets" field has the following possible values: "Yes", "No". With the "Yes" value facets can be shown in the filters, and the additional "Child facet fallback" and "Parent facet fallback" fields appear
The "Child facet fallback" field applies to the facets that have no child facets and for which no value was calculated. It has the following possible values:
"Display 'O' instead" - "0" is shown
"Do not render" - nothing is shown
The "Parent facet fallback" field applies to the facets that have child facets and for which no value was calculated. It has the following possible values:
"Calculate from child facets" - the sum of all child values is shown
"Display 'O' instead" - "0" is shown
"Do not render" - nothing is shown
The "Scroll to", "Scroll to gap type" and "Scroll to gap value" fields
These fields are responsible for the scrolling settings after new search results are received. In the "Scroll to" field, the target template structure item to the top of which the scrolling happens must be selected
The "Scroll to" field has the following possible values:
"No" - the page is not scrolled
All other values - the list of the template's structure items
If the selected value is not "No", the additional "Scroll to gap type" and "Scroll to gap value" fields appear, which are responsible for the setting of an additional gap to the scrolling target
The "Infinity scroll target", "Infinity scroll gap type" and "Infinity scroll gap value" fields
These fields are responsible for the settings of fetching new search results automatically while the page is scrolled. In the "Infinity scroll target" field, the target template structure item on reaching the bottom of which the loading happens must be selected
The "Infinity scroll target" field has the following possible values:
"No" - loading search results while the page is scrolled does not happen
All other values - the list of the template's structure items
If the selected value is not "No", the additional "Infinity scroll gap type" and "Infinity scroll gap value" fields appear, which are responsible for the setting of the gap from the bottom of the target template structure item that serves as the trigger for loading more search results
The "Objects views" field
This field holds the list of the ways of showing the search results. Each item of this field contains a key and a label. The first item is applied by default. The list is shown by the template element of the same name, "Objects views" - a switch with the labels of the list's items
The selected view does not change the template's structure, it only adds to the "Objects" element the modifier class "lur_objects__<key>" - the difference in appearance is set with styles and states. The current value is stored in the URL by the "Store objects view" and "Objects view key" fields, and is read and changed via the SDK functions "view" and "viewValue"
The "Pages shown around current" field
This field is available only when the selected template structure item is a "Pagination" element, and it takes numeric values for each breakpoint. The value for a given breakpoint is responsible for the number of "Pagination item" elements shown around the current page value
If the current page is 50 and the value of this field for the current breakpoint is 3, the following structure is generated: ..., 47, 48, 49, 50, 51, 52, 53, ...
The "Display edge pages" field
This field is available only when the selected template structure item is a "Pagination" element, and it takes numeric values for each breakpoint. The value for a given breakpoint is responsible for the number of "Pagination item" elements shown after the first or before the last "Pagination item" element respectively
If the search result has 100 pages and the value of this field for the current breakpoint is 2, the following structure is generated at the beginning of the pagination: 1, 2, 3, ... , and at the end: ..., 98, 99, 100
The "Avoid single-page dots" field
This field is available only when the selected template structure item is a "Pagination" element, and it has the following possible values: "Yes", "No" for each breakpoint
When, for example, the following structure is generated from "Pagination item" elements: 1, 2, ... , 4, 5, ... and the "Yes" value of this field is selected for the current breakpoint, the following structure is shown: 1, 2, 3, 4, 5, ... - that is, a "Pagination item" element leading to page 3 is added
The "Keep the length" field
This field is available only when the selected template structure item is a "Pagination" element, and it has the following possible values: "Yes", "No" for each breakpoint
With "Yes" the pagination has the same number of "Pagination item" elements on every page: the edge pages, the current one with the pages around it and two "Pagination ellipsis" elements. Near the beginning or the end the missing ones are filled with pages, and an ellipsis always hides at least two pages. For 36 pages, 2 pages around the current one and 1 edge page: 1, 2, 3, 4, 5, 6, 7, ... , 36 on the first page, 1, ... , 4, 5, 6, 7, 8, ... , 36 on the sixth, 1, ... , 30, 31, 32, 33, 34, 35, 36 on the last
The "Ellipsis label" field
This field is available only when the selected template structure item is a "Pagination ellipsis" element, and it takes a text value that shows the gap between the template structure items that are "Pagination" elements
The "Clear the search too" field
This field is available only when the selected template structure item is a "Clearing" element, and it has the following possible values: "Yes", "No". With "Yes" the element empties the search box together with the filters
The "Range end as placeholder" field
This field is available only when the selected template structure item is a "Number minimum" or a "Number maximum" element, and it has the following possible values: "Yes", "No". With "Yes" an empty input shows its end of the filter's range as a hint (the placeholder): the minimum shows the lowest value of the filter, the maximum - the highest one. The hint appears only while the range of the filter is known. If a "placeholder" attribute is already set for the input in the "Attributes" field, that one is shown instead. An empty input means no limit
The "Slider step" field
This field is available only when the selected template structure item is a "Range slider" element. The value of this field is the step a value is rounded to while a handle of the slider is dragged and by which it changes on an arrow key press. When the field is empty, the step is set automatically - from the size of the filter's range
The "Slider keyboard delay" field
This field is available only when the selected template structure item is a "Range slider" element. The value of this field is the delay (in milliseconds) before the new range is applied after the last press of an arrow key on a focused handle of the slider. The handle moves on every press right away, and the filter is applied once, with the final value
The "Option trigger" field
This field has the following possible values: "Yes", "No". When the "Yes" value is selected and this template structure item is a child of, or is itself, the "Filter options" element, a click on this template structure item changes the value of the corresponding checkbox or radio button
Content
The "Custom HTML", "Custom pictures" and "Icon" elements
These elements can be added as children inside any block - for example, inside "Resetting", "Clearing", "Loading more", "Loader", "No objects found" - to show custom content instead of (or next to) the standard one:
"Custom HTML" - shows arbitrary HTML/text entered in the "HTML" field
"Custom pictures" - the images uploaded in the "Images" field. Each image is shown by a child "Custom image" element added inside "Custom pictures" - it can be wrapped in an arbitrary structure
"Icon" - an icon of the library, picked in the "Icon" field. A new element gets a random one. It takes the text color and is 1em square until its own width and height are set
The "String source" and "String custom ID" fields
These fields are available only when the selected template structure item is an "Object field: String" element
The "String source" field has the following possible values:
"Lorem" - a test value
"Custom" - a unique field
The list of all object fields of the "String" type
If the "Custom" value is selected, an additional "String custom ID" field appears, in which the identifier of the unique field must be specified
The "Textarea source" and "Textarea custom ID" fields
These fields are available only when the selected template structure item is an "Object field: Textarea" element
The "Textarea source" field has the following possible values:
"Lorem" - a test value
"Custom" - a unique field
The list of all object fields of the "Textarea" type
If the "Custom" value is selected, an additional "Textarea custom ID" field appears, in which the identifier of the unique field must be specified
The "Number source" and "Number custom ID" fields
These fields are available only when the selected template structure item is an "Object field: Number" element
The "Number source" field has the following possible values:
"Lorem" - a test value
"Custom" - a unique field
The list of all object fields of the "Number" type
If the "Custom" value is selected, an additional "Number custom ID" field appears, in which the identifier of the unique field must be specified
The "Number thousands separator" field
This field is available only when the selected template structure item is an "Object field: Number" element, and it defines how thousands are separated in the number - regardless of where it comes from. It has the following possible values: "None", "Space", "Comma", "Dot", "Apostrophe". The thousands separator also picks the decimal separator: a comma or an apostrophe goes with a decimal point, a space or a dot with a decimal comma
The "Number decimal places" field
This field is available only when the selected template structure item is an "Object field: Number" element, and it has the following possible values: "As is" - the decimals are shown as they come, "0", "1" or "2" - the number is rounded to that many decimal places
The "Date source" and "Date custom ID" fields
These fields are available only when the selected template structure item is an "Object field: Date" element
The "Date source" field has the following possible values:
"Lorem" - a test value
"Custom" - a unique field
The list of all object fields of the "Date" type
If the "Custom" value is selected, an additional "Date custom ID" field appears, in which the identifier of the unique field must be specified
The "Date format" and "Date custom format" fields
These fields are available only when the selected template structure item is an "Object field: Date" element, and they define the format in which the date is shown - regardless of the source selected in the "Date source" field
The "Date format" field has the following possible values:
"D/M/YYYY", "DD/MM/YYYY", "DD.MM.YYYY", "MM/DD/YYYY", "YYYY-MM-DD", "DD/MM/YYYY HH:mm", "YYYY-MM-DD HH:mm:ss", "HH:mm", "hh:mm A" - ready-made date and/or time formats
"Custom" - a custom format
If the "Custom" value is selected, an additional "Date custom format" field appears, in which the custom format must be specified with tokens: YYYY - year (4 digits), YY - year (2 digits), MM - month (2 digits), M - month (no leading zero), DD - day (2 digits), D - day (no leading zero), HH - hour 24h (2 digits), H - hour 24h (no leading zero), hh - hour 12h (2 digits), h - hour 12h (no leading zero), mm - minutes (2 digits), m - minutes (no leading zero), ss - seconds (2 digits), s - seconds (no leading zero), A - AM/PM, a - am/pm. For example, the value "DD.MM.YYYY HH:mm" shows the date as "05.09.2026 14:30"
The "Image source" and "Image custom ID" fields
These fields are available only when the selected template structure item is an "Object field: Image" element
The "Image source" field has the following possible values:
"Lorem" - a test value
"Custom" - a unique field
The list of all object fields of the "Image" type
If the "Custom" value is selected, an additional "Image custom ID" field appears, in which the identifier of the unique field must be specified
The "Show images" field - "All": every image of the object's field, "First": only the first one. It applies to any value of the "Image source" field
HTML/CSS/JS
The "Tag" and "Custom tag" fields
The "Tag" field has the following possible values:
"Auto" - the default tag is applied
"Custom" - a unique tag is applied. If this value is selected, an additional "Custom tag" field appears for entering the unique value
"a", "div", "section", "article", "button", "p", "span", "h1", "h2", "h3", "h4", "h5", "h6" - the corresponding tag is applied
The "Link source", "Link value", "Link object field", "Link object field custom ID" and "Link target" fields
The "Link source" and "Link target" fields appear when the value of the "Tag" field equals "a"
The "Link source" field has the following possible values: "Custom value" and "Object field"
The "Link value" field appears when the value of the "Link source" field equals "Custom value". This field takes the value of a unique link
The "Link object field" field appears when the value of the "Link source" field equals "Object field". This field has the following possible values:
"Lorem" - a test value
"Custom" - the unique identifier of an object field. If this value is selected, an additional "Link object field custom ID" field appears for entering the unique value
The list of all object fields of the "String" type
The "Attributes" field
This field is responsible for adding extra HTML attributes to the template structure item. Each item of the field is an attribute's key and value. The key is required and must be a valid attribute name. It is possible to add only the attribute's key, without its value - such an attribute is output empty. The "class" attribute does not replace the generated classes of the template structure item, it is added to them
The "CSS" field
This field takes CSS code, which is added to the template unchanged. The code must contain full CSS rules - a selector and styles, not just the styles for the current template structure item. For the selector, an attribute added in the "Attributes" field or the generated class of the template structure item "lur_item__13" (where "13" is its identifier) can be used, for example:
The following fields are direct analogues of the corresponding CSS styles:
Layout
"Display"
"Flex settings" - the direction (flex-direction), horizontal and vertical alignment (justify-content / align-items) and line wrapping (flex-wrap)
"Grid flow", "Grid columns", "Grid rows"
"Position"
"Inset" - the offset from the container's edges for positioned elements (inset, or top / right / bottom / left separately)
"Z-index"
"Order" - the element's order inside a flex/grid container
"Width", "Maximum width", "Minimum width"
"Height", "Maximum height", "Minimum height"
"Margin"
"Padding"
"Gap"
"Scroll X", "Scroll Y"
"Scroll snap" - while the element is scrolled horizontally or vertically, it stops with one of its nested elements at the start (e.g. the images of a card, one at a time)
Appearance
"Background color"
"Border width", "Border style", "Border color"
"Border radius"
"Opacity"
"Cursor"
"Pointer events" - "None": the element does not react to the cursor - no hover, no click (e.g. a button that does nothing in the current state)
"Native style" - "None" drops the browser's own look of a native element
"Focus outline" - "None" drops the browser's focus outline of a field, a select or a button
"Object fit" - available only for the "Custom image" and "Object image" elements
"Background image" - an uploaded image or a link. After it is added, "Background size", "Background position" and "Background repeat" appear
"Background gradient" - a linear gradient of two colors at an angle, if set together with an image, the gradient is drawn over it
"Box shadow" - the X/Y offset, blur, spread, color and inner shadow
"Transform" - the X/Y offset, scale and rotation, assembled into one CSS style transform: translate() scale() rotate()
"Transition" - a list of transitions: the property, the duration in ms, the easing function and the delay
Typography
"Font family"
"Font size"
"Font weight"
"Font style"
"Line height"
"Letter spacing"
"Text align"
"Text transform"
"Text decoration"
"Text shadow" - the X/Y offset, blur and color
"Color"
Range slider
The following fields are available only for the "Range slider" element. Each of them has a starting value, so the slider is visible right after it is added:
"Track height", "Track radius", "Track color" - how the slider's track looks
"Fill color" - the color of the part of the track between the handles
"Handle size", "Handle radius", "Handle color" - how the slider's handles look
"Handle border width", "Handle border color" - the border of the slider's handles
Styling
Besides the style fields of a single template structure item, the editor has three tools that act on several units or templates at once: variables and mixins - shared by all templates of the site, and states - within one template
Variables
A variable is a named value of one of the types: color, size (a value with a unit) or number. Each type is a separate group of the "Variables" tab. Variables belong to the site: the same variable is available in all of its templates
A style field of the corresponding type is bound to a variable with the button in the field's header - instead of its own value the field shows the variable. The binding is removed by the cross on the variable's chip: the field keeps its current value. A variable can be deleted only when no field of the site's templates and no mixin uses it
Mixins
A mixin is a named set of style fields that is applied to any number of blocks and elements. Like variables, mixins belong to the site and are edited with the same fields as a template structure item
A mixin is applied to the selected unit with the "Add a mixin" field under the state row of the "Styles" tab. The applied mixins are shown as chips in cascade order - a later one overrides an earlier one, the order is changed by dragging. The unit's own field values take priority over the mixin. A mixin can be deleted only when no unit of the site's saved templates applies it
States and actions
Every style field has variants by the unit's state: the "State:" row above the fields of the "Styles" tab switches which state the values are entered for. The values for a non-default state apply only while the state is on and complement the "Default" values. The available states:
For any template structure item: "Default", "Hovered", "No results" - the search found nothing, "Not applied" - the typed search or the chosen filters are not applied yet (when they are not applied automatically), as well as the declared custom states
For filter options: "Checked", "Indeterminate", as well as "Checkbox", "Radio", "Checkbox checked" and "Radio checked", which tell the option's input apart by its type
For a filter option: "Not found" - the option does not match the search among the filter's options. It is hidden only by the template's style for this state
For a filter: "Filter set" - a value is chosen in the filter, "Filter pending" - a dependent filter whose parent filter's option is chosen but not applied yet, "Filter unavailable" - a dependent filter whose parent filter does not have its option chosen. A filter in this state is hidden only by the template's style for it
For the pagination: "Current page" - the pagination item of the shown page, "Disabled" - the "Previous page" and "Next page" elements when there are no pages that way
Custom states are declared with the "States" field (the "Settings" tab → "General") - a list of names. While a state is on, the template structure item it is declared on gets the class "lur_state__<state identifier>". Styles by a declared state can also be set for other template structure items: the button next to the "State:" row opens the "When:" row, where the template structure item whose state is the condition is chosen. It can be the item itself or any template structure item that contains it
The "On click" field defines how a state changes on a click on the template structure item. Each action consists of a state and a mode: "Toggle" - turns the state on if it is off and off if it is on, "On" - only turns it on, "Off" - only turns it off. The state can be one declared on the item itself or on a template structure item that contains it. This way, for example, expanding a group of filters or a mobile filters menu can be made without custom JS
