Basic Snippet Example

Render of the Snippet:

The Hyper Text Markup Language (HTML) is mainly used for writing web pages.

Direct render from the Liquid collection, using this code:

<p><strong>{{snippetExample['name']}}</strong></p>
<div>{{snippetExample['content']}}</div>

DEMO HTML Snippet

The Hyper Text Markup Language (HTML) is mainly used for writing web pages.

Liquid Output

{
  "Parent": {
    "Value": {
      "Id": 2232,
      "ModuleLayoutName": "Page Detail",
      "Enabled": true,
      "ReleaseDate": "2018-11-24T18:00:00",
      "ExpiryDate": "2099-12-10T18:00:00",
      "Weighting": 0,
      "Item_Rating": 0,
      "CodeEditor": true,
      "ExternalId": 0,
      "DisableForSiteSearch": false,
      "Author_Name": null,
      "Author_Url": null,
      "Author": 0,
      "SEOTitle": null,
      "CustomProperties": "{}",
      "LastUpdatedDate": "2019-02-28T20:45:35",
      "Module_Alias": "Page",
      "Module_Id": 1522,
      "ParentName": "demo-cs",
      "ParentUrl": "/demo-cs",
      "CreatedByMemberId": 0,
      "Name": "Snippet Example",
      "UrlSlug": "snippet-example",
      "Url": "/demo-cs/snippet-example",
      "MetaDescription": null,
      "ShowPageForSearchEngine": true,
      "CanonicalLink": null,
      "MetaTitle": null,
      "ParentId": 2224,
      "Url_List": [
        "/demo-cs/snippet-example"
      ],
      "ParentId_List": [
        2224
      ],
      "EnableAMP": false,
      "AMPContent": null,
      "SocialMetaTags": null,
      "OpenGraphPropertiesValue": null,
      "SeoPriority": 0.0,
      "Description": "{% component type: \"snippet\", alias: \"demo_html_snippet\", collectionVariable: \"snippetExample\" %}\r\n\r\n<h1>Basic Snippet Example</h1>\r\n<div class=\"grid-x grid-padding-x\">\r\n    <div class=\"cell medium-6\">\r\n        <h3>Render of the Snippet:</h3>\r\n        <div style=\"border:1px solid green;\">{% component type: \"snippet\", alias: \"demo_html_snippet\" %}</div>\r\n        <hr>\r\n{% capture snippetcode %}{% raw %}<p><strong>{{snippetExample['name']}}</strong></p>\r\n<div>{{snippetExample['content']}}</div>{% endraw %}{% endcapture %}\r\n        <h3>Direct render from the Liquid collection, using this code:</h3>\r\n        <pre>{{snippetcode | escape}}</pre>\r\n        <p><strong>{{snippetExample['name']}}</strong></p>\r\n        <div>{{snippetExample['content']}}</div>\r\n    </div>\r\n    <div class=\"cell medium-6\">\r\n        <ul class=\"tabs\" data-tabs id=\"code-tabs\">\r\n            <li class=\"tabs-title is-active\"><a href=\"#panel1\" aria-selected=\"true\">Liquid Output</a></li>\r\n        </ul>\r\n        <div class=\"tabs-content\" data-tabs-content=\"code-tabs\">\r\n            <div class=\"tabs-panel is-active\" id=\"panel1\">\r\n                <pre>{{snippetExample | escape}}</pre>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>",
      "TemplateName": "DEMO Companion Site",
      "ItemCategories": null,
      "ItemCategoryIdList": null,
      "ItemTags": null,
      "SiteSearchKeywords": null,
      "ID": 2232,
      "IsHome": false,
      "Pagination": null,
      "OpenGraphProperties": {
        "title": null,
        "type": null,
        "url": null,
        "locale": null,
        "image": null
      },
      "Parent": null,
      "TemplateVirtualPointer": {
        "Pointer": 8491950041332711514,
        "TypeId": 1977186194,
        "InstanceId": 90,
        "DbTypeId": 1977186194,
        "DbInstanceId": 90
      },
      "Params": {}
    },
    "Type": 5
  },
  "Name": "DEMO HTML Snippet",
  "Alias": "demo_html_snippet",
  "Content": "<p>The <strong>Hyper Text Markup Language</strong> (HTML) is mainly used for writing web pages.</p>",
  "Enabled": true,
  "Params": {}
}