Skip to content

Fields.md

Latest commit

 

History

History
138 lines (111 loc) · 3.84 KB

Fields.md

File metadata and controls

138 lines (111 loc) · 3.84 KB

Fields

Fields represent the individual pieces of content within a node. They define the data a node contains and are used to populate different parts of the client-facing interface.

🧲 Types

When defining fields as attributes, all field names must be prefixed with "np-".

Title

The title field is required for all nodes. It must be a string with a maximum length of 65 characters.

  • Required: Yes
  • Max Length: 65
  • Structure: String

Example

<article 
np-node="primary"
np-title="...">
    <h1>...</h1>
    <p> ... </p>
</article>

Description

The description field is required for all nodes. It must be a string with a maximum length of 120 characters.

  • Required: Yes
  • Max Length: 120
  • Structure: String

Example

<article 
np-node="primary"
np-desc="...">
    <h1>...</h1>
    <p> ... </p>
</article>

Image

The img attribute defines images associated with a node and is typically used with the gallery view type.

  • Required: No
  • Max Length: N/A
  • Structure: URL

Example

<article 
np-node="primary"
np-img="https://example.com/link_to_image.png">
    <h1>...</h1>
    <p> ... </p>
</article>

Article

The article attribute is similar to description, but while title and description are displayed together as a unit, article renders as a separate element within the node.

  • Required: No
  • Max Length: 200
  • Structure: String

Example

<article 
np-node="primary"
np-article="...">
    <h1>...</h1>
    <p> ... </p>
</article>

Action

The action field adds a clickable button to the node, allowing users to navigate to a specified destination or trigger a defined behavior.

  • Required: No
  • Max Length: 30 (on Label)
  • Structure: label > URL

Example

<article 
np-node="primary"
np-action="See More > https://example.com/webpage">
    <h1>...</h1>
    <p> ... </p>
</article>

Input

The input field renders an input box within the node. When multiple input fields are present in the same node, they must all share the same action or URL. If any input field defines a different action, the entire group becomes invalid, and no input fields will be displayed.

  • Required: No
  • Max Length: N/A
  • Structure: Label > [Text | Number | Email]

Example

<article 
np-node="primary"
np-action="User Name > Text">
    <h1>...</h1>
    <p> ... </p>
</article>

👇 Explicit Definitions

Explicitly defined field attribute use the values within its definition as the values for the field. This allows nodes to contain different or more curated data for the node than what shows up on the webpage, allowing for more control.

<article np-node="primary">
    <h1 np-title="John Mayer: Grammy-Winning Music Icon">John Mayer: Grammy-Winning Music Icon and Guitar Virtuoso</h1>
    ...
</article>

💨 Implicit Definitions

Implicit definitions will use the values within the inner section of the element it's declared in as its value. This can be used for data consistency, but keep in mind the character limits of the fields you decide to use.

<article np-node="primary">
    <h1 np-title>John Mayer: Grammy-Winning Music Icon and Guitar Virtuoso</h1>
    ...
</article>

Some Implicitly defined field attributes only work with specific elements:

Field Tag Details
title, description, article Any tag Can use any HTML tag as its value
img <img> Will use the src attribute as its value
action <a> Will use the href attribute and the innertext as its value

⏮️ Back To Index