Items

Items are the main building blocks that make up a section. Each type of item is presented differently and has slightly different properties and functionality.

Types of items

Shared Item Properties

uuid

string

The unique identifier of the item.

type

string

The type of the item.

sectionId

string

The unique identifier of the section the item belongs to.

displayOrder

number

The order of the item in the section.

shortId

string

The date and time the item was created.

version

string

The date and time the item was last updated.

kitId

string

The date and time the item was last updated.

data

string

The date and time the item was last updated.

status

string

The date and time the item was last updated.

Headings

Items with type heading are used to create heirarchy in a section. They are included in the kit outline and displayed in the kit navigation panel in the Lingo app.

Heading Properties

data.content

string

The string value for the heading.

Create a heading

Create a heading item in a given section. The new item will be appended to the end of the section.

const item = await lingo.createHeading({
  content: "My Heading",
  kitId: "kit-id",
  sectionId: "section-id",
});
 
console.log(`Created heading ${item.data.content}`);

Arguments

content

string

The string value for the heading.

kitId

string • required

The kit id. This must match the kit id of the section.

sectionId

string • required

The section id to add the heading to.

displayOrder

string | number

The relative position of the item in the section. (Default append)

Inline Notes

Items with type note are used to add text content along side your other content. The text content of a note can contain formatting which is a subset of standard markdown.

Inline Note Properties

data.content

string

The string value for the note.

Create a note

Create a note item in a given section. The new item will be appended to the end of the section.

Create a heading item in a given section. The new item will be appended to the end of the section.

const item = await lingo.createNote({
  content: "Welcome to our brand kit",
  kitId: "kit-id",
  sectionId: "section-id",
});
 
console.log(`Created note with message: ${item.data.content}`);

Arguments

content

string • required

The string value for the note. This can contain markdown formatting.

kitId

string • required

The kit id. This must match the kit id of the section.

sectionId

string • required

The section id to add the note to.

displayOrder

string | number

The relative position of the item in the section. (Default append)

Guides

Items with type guide are used to provide guidance about how content should be used. Guides can be a do or a don't and can be text only or include an image.

For guides that have an image, the image is stored as an asset however these assets can only be of type: PNG or JPG and they are not included in the library.

Guide properties

data.title

string

The "Do" or "Don't" title.

data.color

string

The color of the guide. "red" or "green".

data.content

string

The text content for the guide.

data.displayStyle

string

"text_only" or "image". If image the guide will also include an asset.

assetId

string

The id of the asset used for the guide image, if any.

asset

Asset

The asset used for the guide image, if any.

Create a guide

Create a guide item in a given section. The new item will be appended to the end of the section.

const item = await lingo.createGuide({
  title: "Do",
  content: "Keep accesibility in mind.",
  kitId: "kit-id",
  sectionId: "section-id",
  title: "Do";
});
 
console.log(`Created ${item.data.title} guide`);

Arguments

title

Do | Don't • required

The title of the guide. `Do` or `Don't`

content

string • required

The text content of the guide.

file

string

A filepath to a JPG or PNG file

kitId

string • required

The kit id. This must match the kit id of the section.

sectionId

string • required

The section id to add the heading to.

displayOrder

string | number

The relative position of the item in the section. (Default append)

Supporting Content

Items with type supporting_content are used to provide present visual content that supports the content in the section.

Supporting content images are stored as assets however these assets can only be of type: PNG, JPG, or video types and they are not included in the library.

These item properties are identical to regular assets except for item.type.

Supporting Content Properties

asset_uuid

string

The id of the related asset.

asset

Asset

The asset for the supporting content.

Create supporting content

Create a supporting content item in a given section. The new item will be appended to the end of the section.

const item = await lingo.createSupportingContent({
  file: "./path/to/file.jpg",
  kitId: "kit-id",
  sectionId: "section-id",
});
 
console.log(`Created supporting content with a ${item.asset.type} asset.`);

Arguments

file

string

A filepath to a JPG, PNG, or supported video file.

displayOrder

string | number

The relative position of the item in the section. (Default append)

kitId

string • required

The kit id. This must match the kit id of the section.

sectionId

string • required

The section id to add the supporting content to.

Code snippets

Items with type code_snippet render code in Lingo. They can contain any text content but also support syntax highlighting and an option to copy the

Code Snippet Item.data Properties

data.content

string

The string value for the code.

data.codeLanguage

string

The coding language for syntax highlighting

Create code snippet

Create a heading item in a given section. The new item will be appended to the end of the section.

const item = await lingo.createCodeSnippet({
  content: "const foo = 'bar'",
  language: "javascript",
  kitId: "kit-id",
  sectionId: "section-id",
);

Arguments

content

string • required

The string value for the note. This can contain markdown formatting.

language

string

The coding language for syntax highlighting. (Default auto)

kitId

string • required

The kit id. This must match the kit id of the section.

sectionId

string • required

The section id to add the heading to.

displayOrder

string | number

The relative position of the item in the section. (Default append)

Assets

Items with type asset are used to reference assets from your library. Items simply place assets into kits.

For more details about assets, see the Assets section.

Asset Item Properties

assetId

string

The string value for the note.

asset

Asset

The string value for the note.

data.displayStyle

Asset

Either `image` or `full_width`.

Create an asset

For more information on creating assets, see the Assets section.

Sections Assets