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.

{
  "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>",
  "parent": {
    "Id": 2232,
    "Url": "/demo-cs/snippet-example",
    "ParentId": 2224,
    "LastUpdatedDate": "2019-02-28T20:45:35",
    "AMPContent": "",
    "Author_Name": null,
    "Author_Url": null,
    "Author": 0,
    "CanonicalLink": "",
    "CodeEditor": true,
    "CreatedByMemberId": 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>",
    "DisableForSiteSearch": false,
    "EnableAMP": false,
    "Enabled": true,
    "ExpiryDate": "2099-12-10T18:00:00",
    "ExternalId": 0,
    "FtpFullPath": "Content\\Pages\\demo-cs\\snippet-example.html",
    "ItemCategories": null,
    "ItemCategoryIdList": null,
    "ItemTags": null,
    "MetaDescription": "",
    "Name": "Snippet Example",
    "OpenGraphProperties": "",
    "ReleaseDate": "2018-11-24T18:00:00",
    "SeoPriority": "",
    "SEOTitle": "",
    "MetaTitle": "",
    "ShowPageForSearchEngine": true,
    "SocialMetaTags": "",
    "UrlSlug": "snippet-example",
    "Weighting": 0,
    "parentname": "demo-cs",
    "parenturl": "/demo-cs",
    "templatename": "DEMO Companion Site",
    "ishome": false
  },
  "enabled": true,
  "params": {}
}