NoML Overview

A high-level list of NoML tags and their Arguments, with a brief explanation of their functionality

Overview

Block Tags

Block tags are the editor-enabled containers for your Unstack sections, allowing you to add toolbars and controls to areas of your content. They include:

  • Section
  • Layout (version 2)
  • Box

Inline Tags

Inline tags allow you to add smart components to your content, which bring editor-enabled controls for managing the specific types of content. Inline tags available in Unstack are:

  • Media
  • Media Instance
  • Code (version 2)
  • Richtext
  • Plaintext
  • Actions

Basic Tags

Basic tags allow you to print values and literals to your HTML templates.

  • Values
  • Literals

Generators

Generators are a special type of tag that can be used in a for operator to generate arrays of items to receive a treatment, and be rendered in your HTML as a list, table, flexbox, or grid.

  • Collection
  • Articles
  • Range (version 2)

Operators

Operators are special logic tags that work like control structures for your NoML code.

  • For
  • If (version 2)

Block Tags

Section Tag

The Section tag is required for all components. It is a block-level tag that renders as a <section> element in the outputted HTML.

{{ section(element, [className, classes, enableHeader,
defaultBoxPaddingTop, defaultBoxPaddingRight, defaultBoxPaddingBottom,

defaultBoxPaddingLeft, defaultBoxMaxWidth, defaultBoxAlignment]) }}

Section Tag Arguments:

  • element: DataLocator - the data-element storing the Section's configuration
  • className: string (optional) - a hard-coded class name to add to the rendered element
  • classes: Array<[string]> (optional) - a select-list of class names to offer to content authors to select from, to allow multiple UI variants of a single Component
  • enableHeader: boolean (optional) - when true, allows content authors to add a section-header to this section type
  • defaultBoxPaddingTop: number (optional) - A number from 0-10 indicating the default top padding of the Section Box-Wrapper (Default 8)
  • defaultBoxPaddingRight: number (optional) - A number from 0-10 indicating the default right padding of the Section Box-Wrapper (Default 2)
  • defaultBoxPaddingBottom: number (optional) - A number from 0-10 indicating the default bottom padding of the Section Box-Wrapper (Default 8)
  • defaultBoxPaddingLeft: number (optional) - A number from 0-10 indicating the default left padding of the Section Box-Wrapper (Default 2)
  • defaultBoxMaxWidth: number (optional) - A number indicating the default max width in px of the Section Box-Wrapper (Default: 1200)
  • defaultBoxAlignment: string (optional) - A string ("left", "right", or "center") indicating the default alignment of the Section Box-Wrapper (Default "center')

Layout Tag (coming in version 2)

The Layout tag allows you to create user-friendly flexbox and grid layouts that can be sortable and resizable using our built-in editor controls.

{{ layout(element, [className, type, columns, rows, 
enableSorting, enableResizing
]) }}

Layout Tag Arguments:

  • element: DataLocator - the data-element storing the Layout's configuration
  • className: string (optional) - a hard-coded class name to add to the rendered element
  • type: string (optional) - type type of collection - "flex" or "grid". (Default "grid")
  • columns: number (optional) - when set, defines the number of columns for a given layout
  • rows: number (optional) - when set, defines the number of rows for a given layout
  • enableSorting: boolean (optional) - when True, allows authors to resort elements in a layout with a drag-and-drop UI
  • enableResizing: boolean (optional) - when True, allows authors to resize elements in a layout using a dragbar UI

Box Tag

The Box tag is a special type of block-level element, which acts as a configurable container, as well as a child element of Layouts, or Collections defining a specific item in the defined layout that inherits properties from its parent.

{{ box(element, [className, defaultPaddingTop, defaultPaddingRight, 
defaultPaddingBottom, defaultPaddingLeft, defaultMaxWidth,
defaultAlignment, enableAlignment]) }}

Box Tag Arguments:

  • element: DataLocator - the data-element storing the Box's configuration
  • className: string (optional) - a hard-coded class name to add to the rendered element
  • defaultPaddingTop: number (optional) - A number from 0-10 indicating the default top padding of this Box (Default 8)
  • defaultPaddingRight: number (optional) - A number from 0-10 indicating the default right padding of this Box (Default 2)
  • defaultPaddingBottom: number (optional) - A number from 0-10 indicating the default bottom padding of this Box (Default 8)
  • defaultPaddingLeft: number (optional) - A number from 0-10 indicating the default left padding of this Box (Default 2)
  • defaultMaxWidth: number (optional) - A number indicating the default max width in px of this box (Default: 1200)
  • defaultAlignment: string (optional) - A string ("left", "right", or "center") indicating the default alignment of this box (Default "center')
  • enableAlignment: boolean (optional) - When true, allows the user to select alignment

Inline Tags

Media Tag

The Media Tag enables your content authors to add media to pages, augmented with full editor controls for linking, resizing, and media library management, and can be programmed to constrain the media output to specific dimensions, quality, etc.

{{ media(element, category, [className, aspectRatio, crop, quality,
enableResizing, enableLinking, enableVideos
]) }}

Media Tag Arguments:

  • element: DataLocator - the data-element storing the Media's configuration
  • className: string (optional) - a hard-coded class name to add to the rendered element
  • category: string (optional) - a string ("image" or "icon") indicating the category in which to store the attached media. Note: "video" and "pdf" media will be segregated by their mime types.
  • aspectRatio: number (optional) - an expression indicating the desired proportions of the resized media on output, e.g. "1x1", "4x3" or "16x9". (Default: none)
  • crop: string (optional) -an expression indicating the desired cropping of the resized media on output, e.g. "topleft", "topcenter', or "middlecenter" (Default: none)
  • quality: number (optional) - a number from 1-100 indicating the compression quality of the media for output formats that support it (default 80)
  • enableResizing: boolean (optional) - when True, allows the media to be resized using a bounding box UI (Default: False)
  • enableLinking: boolean (optional) - when True, allows the media to be embedded in a link using the Smart URL input UI (Default: True)
  • enableVideos: boolean (optional) - when True, allows video media to be uploaded into this area (Default: False)

Media Instance Tag

The Media Instance tag allows you to create instances of media attached to a given object type. This is currently used only within the context of the Articles generator, for referencing the featured image media for each article in the generator.

{{ media_instance(element, src, [className, alt, aspectRatio, crop, quality]) }}

Media Instance Tag Arguments:

  • element: DataLocator - the data-element storing the Media Instance's configuration
  • className: string (optional) - a hard-coded class name to add to the rendered element
  • src: DataLocator (optional) - a reference to the src locator for this media in the data
  • alt: DataLocator (optional) - a reference to the alt locator for this media in the data
  • aspectRatio: number (optional) - an expression indicating the desired proportions of the resized media instance on output, e.g. "1x1", "4x3" or "16x9". (Default: none)
  • crop: string (optional) - an expression indicating the desired cropping of the resized media instance on output, e.g. "topleft", "topcenter', or "middlecenter" (Default: none)
  • quality: number (optional) - a number from 1-100 indicating the compression quality of the media for output formats that support it (default 80)

Code Tag (coming in version 2)

{{ code(element, [type]) }}

Code Tag Arguments:

  • element: DataLocator - the data-element storing the Code tag's configuration
  • type: string (optional) - ???

Plaintext Tag

The Plaintext tag allows you to create a simple text entry input in the editor, which can also be associated with a given HTML tag, without giving your users full richtext capabilities.

{{ plaintext(element, tagName, [className, maWwords, placeholder, 
renderEmptyElement
]) }}
Plaintext Tag Arguments:
  • element: DataLocator - the data-element storing the Plaintext tag's configuration
  • tagName: string - a hard-coded tag name for the rendered element
  • className: string (optional) - a hard-coded class name to add to the rendered element
  • maxWords: number (optional) - the maximum number of words allowed in this field
  • placeholder: string (optional) - placeholder text to display in the editor when empty
  • renderEmptyElement: string (optional) - when set to True, will render the tag in tagName when there is no content defined by the author (Default: False)

Richtext Tag

The Richtext tag is a very powerful tool for adding fully content-editable text areas to your sections, which can also be augmented with embedding tools for even richer media content.

{{ richtext(element, [startTag, className, maxWords, 
enableAlignment, enableHtml, enableEmbeds
]) }}

Richtext Tag Arguments:

  • element: DataLocator - the data-element storing the Richtext tag's configuration
  • startTag: string (optional) - the initial tag to start the richtext block with (default "p")
  • className: string (optional) - a hard-coded class name to add to the rendered element
  • maxWords: number (optional) - the maximum number of words allowed in this field
  • placeholder: string (optional) - placeholder text to display in the editor when empty
  • enableAlignment: boolean (optional) - when true, allows content authors to align individual areas of the text within the rich text block (Default: True)
  • enableHtml: boolean (optional) - when True, allows content authors to create HTML conetnt (Default: True)
  • enableEmbeds: boolean (optional) - when true, allows content to embed media, forms, or 3rd-party content (e.g. embedded videos from other platforms) into the content (Default: False)

Actions Tag

The Actions tag allows you to add buttons and forms to your section.

{{ actions(element, [className, enableForms]) }}

Actions Tag Arguments:

  • element: DataLocator - the data-element storing the Actions tag's configuration
  • className: string (optional) - a hard-coded class name to add to the rendered element
  • enableForms: boolean (optional) - when True, allows content authors to add forms (Default: True)

Values

The Value tag will print the value of a data-element. This is useful when referencing the value of a system variable or predefined value, e.g. to print the index of a generator from within a for operator.

{{ element }}

Value Arguments:

  • element: DataLocator - the data-element storing the value to be printed

Literals

Literals are any raw HTML content to be printed within a Component template. They will not be interpreted at all, and will be rendered verbatim in the Component's output.

<div>Hello</div>

Generators

Collection Generator

The Collection generator allows your users to create lists or grids of repeatable blocks of code, each with powerful UI tools for adding, removing, and sorting. These are useful for creating complex multi-element section types like testimonials, FAQs, etc.

{{ collection(element, [tagName, className, min, max, default, 
enableSorting, enableControls
]) }}

Collection Tag Arguments:

  • element: DataLocator - the data-element storing the Collection's configuration
  • tagName: string (optional) - a hard-coded tag name for the rendered element
  • className: string (optional) - a hard-coded class name to add to the rendered element
  • minItems: number (optional) - the minumum # of items allowed in this collection (Default: 1)
  • maxItems: number (optional) - the maximum # of items allowed in this collection (Default: 10)
  • defaultItems: number (optional) - the starting # of items in this collection on creation
  • enableSorting: boolean (optional) - when True, allows content authors to drag-and-drop resort items in this collection
  • enableControls: boolean (optional) - when True, will display collection-specific controls in the editor UI

Articles Generator

The Articles generator allows you to create components powered by dynamic blog content. Users can optionally filter, sort, and pin articles to a given section using this component, giving them the flexibility to selectively display editorial content throughout your site.

{{ articles(element, [tagName, className, minItems, maxItems, defaultItems, 
enablePinning, enableFiltering, enableSorting
]) }}

Articles Tag Arguments:

  • element: DataLocator - the data-element storing the Articles collection's configuration
  • tagName: string (optional) - a hard-coded tag name for the rendered element
  • className: string (optional) - a hard-coded class name to add to the rendered element
  • minItems: number (optional) - the minumum # of items allowed in this collection (Default: 1)
  • maxItems: number (optional) - the maximum # of items allowed in this collection (Default: 10)
  • defaultItems: number (optional) - the starting # of items in this collection on creation
  • enablePinning: boolean (optional) - when True, allows content authors to pin specific articles to this list semi-permanently, until unpinned (Default: True)
  • enableFiltering: boolean (optional) - when True, allows content authors to select the blog, category, or tags by which to filter articles for this list (Default: True)
  • enableSorting: boolean (optional) - when True, allows content authors to select the sorting order by which to filter articles for this list (Default: True)

Range Generator (coming in version 2)

The Range tag allows you to create a simple loop generator, which will repeat a the contained code a given number of times.

{{ range(max, [min]) }}

Range Tag Arguments:

  • element: DataLocator - the data-element storing the Range collection's configuration
  • className: string (optional) - a hard-coded class name to add to the rendered element
  • max: number - the upper bound of the range
  • min: number (optional) - the lower bound of the range (Default: 1)

Operators

For Operator

{% for item[, i] in generator %}
<div>
Repeated operations contained within
</div>
{% endfor %}

For Operator Args:

  • item: DataLocator - the name given to each item as it is retrieved from the generator
  • i: DataLocator (optional) - the name given to the index (1-based) for each item as retrieved from the generator
  • generator: Generator - a Collection, Articles, or Range generator (as defined above)

If Operator (coming in version 2)

{% if condition %}
<div>
Conditional operations contained within
</div>
{% endif %}

If Operator Args:

  • condition: Expression - a boolean expression