{
    "title": "Sample Content",
    "label": "Sample Content",
    "description": "Various sample content examples.",
    "image": "3.examples\/assets\/fujifilm.jpg",
    "content": "---\n\n## Markdown\nWe recommend using *markdown* for basic content editing, because it is fast to write, easy to read and prevents html-coding errors. [Read more](http:\/\/commonmark.org\/help\/) about markdown or check [this tutorial](http:\/\/commonmark.org\/help\/tutorial\/). Although markdown is preferred for basic content editing, you will often need to use *html* for more complicated stuff.\n\n---\n\n## 2-Column Grid\n\n<div class='row text-left'>\n  <div class='medium-6 columns'>\n    <div class='frame'>\n      <figure>\n        <img alt='profile' src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f3c2.svg'>\n      <\/figure>\n    <\/div>\n  <\/div>\n\n  <div class='medium-6 columns'>\n  <p><strong>Hi!<\/strong><br>\n  My name is Bob Dobalina, and this website is my blog as well as a playground\n  for the Imagevue X3 gallery website system. <a href='https:\/\/demo.imagevuex.com' target='_blank'>View Demo<\/a><\/p>\n\n  <p><strong>About me<\/strong><br>\n  I am interested in design, functionality, minimalism and performance. My hobbies are sleep-walking, planking and fishing.<\/p>\n\t\n  <p><strong>Article<\/strong><br>\n  More than a decade ago, when SWF was an emerging technology, this website\n  became a very popular showcase of Flash. <a href=\n  'https:\/\/mjau-mjau.com\/blog\/rewind-web-2002\/'>See Post<\/a><\/p>\n  <\/div>\n<\/div>\n\n---\n\n## Block Grid\n\n<!-- Evenly adjust content within a grid -->\n<!-- Read more: http:\/\/foundation.zurb.com\/sites\/docs\/v\/5.5.3\/components\/block_grid.html -->\n<ul class='small-block-grid-1 medium-block-grid-2 large-block-grid-3'>\n<li><div data-alert class=\"alert-box bg2\"><strong>Block Grid<\/strong><br>Block grids give you a way to evenly separate contents of a list within a grid. If you want to create a row with a specific amount of elements that need to stay evenly spaced, the block grid is your friend.<\/div><\/li>\n<li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f693.svg\"><\/li>\n<li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f691.svg\"><\/li>\n<li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f692.svg\"><\/li>\n<li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f699.svg\"><\/li>\n<li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f695.svg\"><\/li>\n<\/ul>\n\n---\n\n## Carousel Plugin\n\n<!-- content slider. More info: https:\/\/demo.imagevuex.com\/examples\/plugins\/carousel\/ -->\n<div data-carousel data-carousel-items=3 data-carousel-loop=true data-carousel-dots=true data-carousel-autoplay=3000 data-carousel-responsive=true data-carousel-shuffle=false class=\"text-center\">\n<div><h3>Camel<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f42b.svg\" \/><\/div>\n<div><h3>Fish<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f41f.svg\" \/><\/div>\n<div><h3>Squirrel<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f43f.svg\" \/><\/div>\n<div><h3>Goat<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f410.svg\" \/><\/div>\n<div><h3>Elephant<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f418.svg\" \/><\/div>\n<div><h3>Ox<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f402.svg\" \/><\/div>\n<div><h3>Whale<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f433.svg\" \/><\/div>\n<div><h3>Blowfish<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f421.svg\" \/><\/div>\n<div><h3>Turtle<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f422.svg\" \/><\/div>\n<\/div>\n\n---\n\n## Embed Sources\n\n### Vimeo\n<div class=\"flex-video widescreen vimeo x3-style-frame\">\n\t<iframe src=\"\/\/player.vimeo.com\/video\/84067859\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen><\/iframe>\n<\/div>\n\n### Youtube\n<div class=\"flex-video widescreen x3-style-frame\">\n\t<iframe src=\"\/\/www.youtube.com\/embed\/A3PDXmYoF5U\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n\n### Google Maps\n<div class=\"flex-video x3-style-frame\" style=\"height:400px;\">\n\t<iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d424396.3176723366!2d150.92243255000002!3d-33.7969235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b129838f39a743f%3A0x3017d681632a850!2sSydney+NSW%2C+Australia!5e0!3m2!1sen!2sth!4v1415268600966\" frameborder=\"0\" style=\"border:0\"><\/iframe>\n<\/div>\n\n### Self-hosted Video\n<video width=100% controls preload=\"metadata\" class=\"x3-style-frame\">\n<source src=\"{{path}}SampleVideo_720x480_1mb.mp4\" type=\"video\/mp4\">\n<\/video>\n\n---\n\n## Font Icons\nEasily add icons into your page designs with the included [Font Awesome](http:\/\/fortawesome.github.io\/Font-Awesome\/icons\/). Font icons are vector-based, so they look good at any size, and can be styled with CSS.\n\n<div class=\"small-block-grid-5 text-center\">\n<li class='fa fa-camera-retro fa-4x'><\/li>\n<li class='fa fa-heart fa-4x' style='color:tomato;'><\/li>\n<li class='fa fa-tree fa-4x' style='color:yellowgreen;' ><\/v>\n<li class='fa fa-star fa-4x'  style='color:gold;'><\/li>\n<li class='fa fa-tripadvisor fa-4x color-primary' style='color:#589442;'><\/li>\n<\/div>\n<pre data-lang=\"html\"><code><i class='fa fa-rocket'><\/i><\/code><\/pre>\n\n---\n\n## Custom Forms\nAdd any elements to your contact form. All data will be forwarded by email.\n\n<form data-abide class=\"contactform text-left\" style=\"max-width:500px;\">\n\n<div>\n<input type=\"text\" name=\"name\" placeholder=\"Name\" required>\n<\/div>\n\n<div>\n<input type='email' name='email' placeholder='Email' required>\n<\/div>\n\n<div>\n<input type=\"tel\" name=\"Phone Number\" placeholder=\"Phone number\">\n<\/div>\n\n<div>\n<strong>Ice Cream Flavor<\/strong>\n<select name=\"Ice Cream Flavour\">\n<option value=\"Vanilla flavor\">Vanilla<\/option>\n<option value=\"Chocolate flavor\">Chocolate<\/option>\n<option value=\"Strawberry flavor\">Strawberry<\/option>\n<option value=\"Pistachio flavor\">Pistachio<\/option>\n<\/select>\n<\/div>\n\n<div>\n<strong>Favorite color<\/strong><br>\n<input type=\"radio\" name=\"Favorite Color\" value=\"Red\" id=\"radio1\" checked><label for=\"radio1\">Red<\/label>\n<input type=\"radio\" name=\"Favorite Color\" value=\"Blue\" id=\"radio2\"><label for=\"radio2\">Blue<\/label>\n<input type=\"radio\" name=\"Favorite Color\" value=\"Green\" id=\"radio3\"><label for=\"radio3\">Green<\/label>\n<\/div>\n\n<div>\n<strong>I like to<\/strong><br>\n<input type=\"checkbox\" name=\"sleep\" value=\"Yes!\" id=\"check1\" checked><label for=\"check1\">Sleep<\/label>\n<input type=\"checkbox\" name=\"snooze\" value=\"As long as possble\" id=\"check2\"><label for=\"check2\">Snooze<\/label>\n<input type=\"checkbox\" name=\"doze\" value=\"All the time\" id=\"check3\"><label for=\"check3\">Doze<\/label>\n<\/div>\n\n<div>\n<strong>Message<\/strong>\n<textarea required rows=\"6\" name=\"message\" placeholder=\"Add your message\"><\/textarea>\n<\/div>\n\n<button type=submit>Send<\/button>\n<\/form>\n\n---\n\n## Modal Plugin\nThe modal plugin allows you to open popup dialog windows, useful for displaying relevant information. Modals are usually triggered by buttons, but can also be triggered on page-load.\n\n<button class=\"button\" data-reveal-id=\"myModal\">Open Modal<\/button>\n\n<!-- modal begin -->\n<div id=\"myModal\" class=\"reveal-modal medium\" data-reveal aria-labelledby=\"myModalTitle\" aria-hidden=\"true\" role=\"dialog\">\n  <a class=\"close-reveal-modal\" aria-label=\"Close\"><i class=\"fa fa-close\"><\/i><\/a>\n  <h2 id=\"myModalTitle\">Modal Plugin <\/h2>\n\t<p>The modal plugin allows you to open popup dialog windows<\/p>\n\t\n\t<ul class=\"small-block-grid-3\"><li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f693.svg\"><\/li><li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f691.svg\"><\/li><li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f692.svg\"><\/li><\/ul>\n\t\n\t<h3>Modal Element<\/h3>\n  <p>Simply add a modal to your page. The modal will be hidden until triggered:<\/p>\n\t\n\t<pre data-lang=\"html\"><code>\n\t<div id=\"myModal\" class=\"reveal-modal\" data-reveal aria-labelledby=\"myModalTitle\" aria-hidden=\"true\" role=\"dialog\"><br>\n  <a class=\"close-reveal-modal\" aria-label=\"Close\"><i class=\"fa fa-close\"><\/i><\/a><br>\n  <h2 id=\"myModalTitle\">Modal Plugin<\/h2><br>\n  <p>Add your modal content here. Any HTML is supported.<\/p><br>\n\t<\/div>\n\t<\/code><\/pre>\n\t\n\t<h3>Modal Trigger Link<\/h3>\n\t<p>Add a button or anchor to trigger a modal with a specific ID on click:<\/p>\n\t\n\t<pre data-lang=\"html\"><code>\n\t<button class=\"button\" data-reveal-id=\"myModal\">Open Modal button<\/button><br>\n\t<a href=\"#\" data-reveal-id=\"myModal\">Open Modal link<\/a>\n\t<\/code><\/pre>\n\t\n\t<p><strong>data-reveal-open<\/strong><br>\n\tAdd the <code>data-reveal-open<\/code> attribute to automatically open the modal on page-load.<\/p>\n\t\n\t<p><strong>data-reveal-open-once<\/strong><br>\n  Use the <code>data-reveal-open-once<\/code> attribute instead, to open the modal only once per visitor.<\/p>\n\t\n\t<p><strong>url#modal=id<\/strong><br>\n\tTrigger a modal to open by URL.<\/p>\n\t\n<\/div>\n<!-- modal end -->\n\n---\n\n## Tabs\n<div id=\"tabs-demo-settings\" class=\"clearfix\" style=\"display: inline-block;\">\n<ul id=\"tabs-demo-orientation\" class=\"button-group radius\" style=\"float:left;margin-right:10px;\">\n  <li><button class=\"button tiny bg3\" data-orientation=\"horizontal\">Horizontal<\/button><\/li>\n  <li><button class=\"button tiny bg2\" data-orientation=\"vertical\">Vertical<\/button><\/li>\n<\/ul>\n<ul id=\"tabs-demo-style\" class=\"button-group radius\" style=\"float:left;\">\n  <li><button class=\"button tiny bg3\" data-remove=\"tabs-style-1 tabs-style-2\">Default Style<\/button><\/li>\n  <li><button class=\"button tiny bg2\" data-add=\"tabs-style-1\" data-remove=\"tabs-style-2\">Style 1<\/button><\/li>\n  <li><button class=\"button tiny bg2\" data-add=\"tabs-style-2\" data-remove=\"tabs-style-1\">Style 2<\/button><\/li>\n<\/ul>\n<\/div>\n\n<section id=\"tabs-demo\" class=\"tabs-container tabs-radius tabs-color-active tabs-anim\">\n<ul class=\"tabs small-block-grid-4\" data-tab>\n  <li class=\"tab-title active\"><a href=\"#panel1\">Intro<\/a><\/li>\n\t<li class=\"tab-title\"><a href=\"#panel2\">Code<\/a><\/li>\n  <li class=\"tab-title\"><a href=\"#panel3\">Styles<\/a><\/li>\n  <li class=\"tab-title\"><a href=\"#panel4\">Sample<\/a><\/li>\n<\/ul>\n\n<div class=\"tabs-content\">\n  <div id=\"panel1\" class=\"content active\">\n\t<h3>Tabs content plugin<\/h3>\n\t<p>The tabs plugin allows you to easily add an interactive tabs section anywhere in your content. Tabs can be useful to separate related content into clickable sections. Choose from horizontal or vertical orientation, three styles and several helper classes. Tabs respond appropriately on small (mobile) screens, and page will scroll to fit tabs when there is extensive content.<\/p>\n<\/div>\n\n<div class=\"content\" id=\"panel2\">\n<h3>Sample Code<\/h3>\n<p>To create a tabs-layout, you need to use the following code:<\/p>\n\n<pre data-lang=\"html\"><code>\n <!-- Wrap all code inside a <section> with tabs-container class --><br>\n <!-- Optional styles:<br>tabs-style-1 \/ tabs-style-2<br>tabs-radius<br>tabs-anim<br>tabs-color-active<br>tabs-wide (only horizontal orientation)<br>tabs-small \/ tabs-large<br>tabs-center \/ tabs-right (only horizontal orientation)<br>tabs-width-auto \/ tabs-width-30 \/ tabs-width-50 (only vertical orientation) <br>--><br>\n \n <section class=\"tabs-container tabs-style-1 tabs-radius tabs-anim tabs-color-active\"><br><br>\n\n <!-- Create a ul list that contains the tab links --><br>\n <!-- include the vertical class only if you want to use vertical orientation --><br>\n<ul class=\"tabs vertical\" data-tab><br>\n  <li class=\"tab-title active\"><a href=\"#panel1\">Tab 1<\/a><\/li><br>\n  <li class=\"tab-title\"><a href=\"#panel2\">Tab 2<\/a><\/li><br>\n  <li class=\"tab-title\"><a href=\"#panel3\">Tab 3<\/a><\/li><br>\n  <li class=\"tab-title\"><a href=\"#panel4\">Tab 4<\/a><\/li><br>\n<\/ul><br><br>\n\n <!-- Create a tabs content element that contains all tab contents  --><br>\n <!-- include the vertical class only if you want to use vertical orientation --><br>\n<div class=\"tabs-content vertical\"><br>\n  <div class=\"content active\" id=\"panel1\"><br>\n  <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.<\/p><br>\n  <\/div><br>\n  <div class=\"content\" id=\"panel2\"><br>\n    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.<\/p><br>\n  <\/div><br>\n  <div class=\"content\" id=\"panel3\"><br>\n    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.<\/p><br>\n  <\/div><br>\n  <div class=\"content\" id=\"panel4\"><br>\n    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.<\/p><br>\n  <\/div><br>\n\t<\/div><br><br>\n\n <!-- End tabs container --><br>\n<\/section>\n<\/code><\/pre>\n<\/div>\n\n<div class=\"content\" id=\"panel3\">\n\t<h3>Styles<\/h3>\n\t\n<p><span class=\"label radius bg3\">vertical<\/span><br>\nInclude the <em>vertical<\/em> class in both your UL <em>tabs<\/em> element and your <strong><em>tabs-content<\/em><\/strong> element set vertical tabs orientation, instead of the default horizontal orientation.<\/p>\n\t\n<p><span class=\"label radius bg3\">tabs-style-1<\/span><span class=\"label radius bg3\">tabs-style-2<\/span><br>\nInclude any style class in your <em>tabs-container<\/em> element, to add a style different from the default style.<\/p>\n\t\n<p><span class=\"label radius bg3\">tabs-anim<\/span><br>\nInclude the <em>tabs-anim<\/em> class in your <em>tabs-container<\/em> element to make your tabs fade in on change.<\/p>\n\t\n<p><span class=\"label radius bg3\">tabs-radius<\/span><br>\nInclude the <em>tabs-radius<\/em> in your <em>tabs-container<\/em> element class to give your tabs rounded corners.<\/p>\n\n<p><span class=\"label radius bg3\">tabs-color-active<\/span><br>\nInclude the <em>tabs-color-active<\/em> class in your <em>tabs-container<\/em> element to colorize the active tab.<\/p>\n\n<p><span class=\"label radius bg3\">tabs-wide<\/span><br>\nInclude the <em>tabs-wide<\/em> class in your <em>tabs-container<\/em> element to make your tabs wider. <em>* Only applies for horizontal tabs orientation.<\/em><\/p>\n\n<p><span class=\"label radius bg3\">tabs-small<\/span><span class=\"label radius bg3\">tabs-large<\/span><br>\nInclude the <em>tabs-small<\/em> or <em>tabs-large<\/em> class in your <em>tabs-container<\/em> element to make your tabs smaller or bigger. <em>Does not apply for small (mobile) screens.<\/em><\/p>\n\n<p><span class=\"label radius bg3\">tabs-center<\/span><span class=\"label radius bg3\">tabs-right<\/span><br>\nInclude the <em>tabs-center<\/em> or <em>tabs-right<\/em> class in your <em>tabs-container<\/em> element to make your tabs align center or right, instead of the default left. <em>* Only applies for horizontal tabs orientation.<\/em><\/p>\n\n<p><span class=\"label radius bg3\">tabs-width-30<\/span><span class=\"label radius bg3\">tabs-width-50<\/span><span class=\"label radius bg3\">tabs-width-auto<\/span><br>\nInclude the <em>tabs-width-30<\/em>, <em>tabs-width-50<\/em> or <em>tabs-width-auto<\/em> class in your <em>tabs-container<\/em> element to set the % width of your vertical orientation tabs, instead of the default 20%.<em>* Only applies for vertical tabs orientation.<\/em><\/p>\n\n<p><span class=\"label radius bg3\">small-block-grid-*<\/span><br>\nInclude the <em>small-block-grid-*<\/em> class in your UL <em><strong>tabs<\/strong><\/em> element to make your tabs justify to full width. Replace the * with the amount of tabs you have. <em>* Only applies for horizontal tabs orientation.<\/em><\/p>\n\n<\/div>\n\t\n  <div class=\"content\" id=\"panel4\">\n\t<h3>Sample Content<\/h3>\n\t<div class=\"small-block-grid-5\"><li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f693.svg\"><\/li><li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f691.svg\"><\/li><li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f692.svg\"><\/li><li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f699.svg\"><\/li><li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f695.svg\"><\/li><\/div>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac rutrum est. Aliquam sit amet risus aliquet, sagittis risus eu, facilisis ex. Fusce eu neque et purus accumsan maximus maximus nec lacus. Nulla auctor augue ut fermentum venenatis. Donec volutpat ullamcorper felis, in tincidunt tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam eleifend finibus tellus, et consectetur nulla pellentesque eu. In et justo risus. Donec sed dolor sit amet dolor cursus aliquam ut vel justo. Praesent sed quam diam. Duis scelerisque lectus non venenatis elementum.<\/p>\n\n<p><span class=\"label success radius\">Ok!<\/span> Etiam id commodo lorem. Nulla maximus fermentum nibh eget consectetur. Suspendisse luctus nunc orci, eget varius arcu tempor non. Duis ac efficitur augue, eu sollicitudin nisi. Praesent ligula tellus, consequat non tellus sit amet, fringilla gravida justo. Duis in justo at magna ornare tristique quis non risus. Fusce feugiat finibus urna quis rhoncus. Praesent feugiat eget tortor quis imperdiet. Praesent nulla lacus, ornare vel velit non, efficitur fringilla nibh. Cras nisi sapien, dapibus pretium nunc a, rhoncus tincidunt urna. Donec tristique nunc turpis, sed aliquam leo tincidunt sit amet. Integer vitae vehicula elit. Pellentesque aliquet nisi sit amet ullamcorper facilisis. Morbi quis turpis urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.<\/p>\n\n  <\/div>\n<\/div>\n<\/section>\n\n---\n\n## Alert Box\nAlert boxes allow you to emphasize content by adding it inside a box. <a href=# data-reveal-id=\"alert-help\">[code]<\/a>\n\n<div data-alert class=\"alert-box bg2\">\n<h2>Alert box example<\/h2>\n<p>This is a simple alert-box with text and images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere, risus quis malesuada fringilla, metus nulla consectetur mi, a ullamcorper mi eros et mi. Pellentesque facilisis libero at orci finibus porta quis eget urna.<\/p>\n<div class=\"small-block-grid-5\">\n<li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f693.svg\"><\/li>\n<li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f691.svg\"><\/li>\n<li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f692.svg\"><\/li>\n<li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f699.svg\"><\/li>\n<li><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f695.svg\"><\/li>\n<\/div>\n<\/div>\n\n<div data-alert class=\"alert-box success\">\n<h3>Dismissible Alert Box<\/h3>\nThis alert box can be dismissed by clicking the <i class=\"fa fa-close\"><\/i> close button.\n<a href=\"#\" class=\"close close-x\"><\/a>\n<\/div>\n\n<div data-alert class=\"alert-box alert\">\nThis is a minimal alert box. Close it!\n<a href=\"#\" class=\"close close-x\"><\/a>\n<\/div>\n\n<!-- modal HELP begin -->\n<div id=\"alert-help\" class=\"reveal-modal medium\" data-reveal aria-hidden=\"true\" role=\"dialog\">\n  <a class=\"close-reveal-modal\" aria-label=\"Close\"><i class=\"fa fa-close\"><\/i><\/a>\n  <h2>Alert Boxes<\/h2>\n\t<p>To add an alert-box, simply add your content inside the following <em>html<\/em>:<\/p>\n\t<pre data-lang=\"html\"><code>\n<div data-alert class=\"alert-box bg2\">\nYour html\/content here\n\n<!-- To make the alert-box dimissable, include a close button --><br>\n<a href=\"#\" class=\"close close-x\"><\/a><br>\n<\/div>\n\t<\/code><\/pre>\n\t<p>You can choose from the following color tags<br>\n<span class=\"label bg2\">bg2<\/span><span class=\"label bg3\">bg3<\/span><span class=\"label primary\">primary<\/span><span class=\"label alert\">alert<\/span><span class=\"label warning\">warning<\/span><span class=\"label success\">success<\/span><span class=\"label info\">info<\/span><span class=\"label\"><em>default<\/em><\/span><\/p>\n<\/div>\n<!-- modal end -->\n\n---\n\n## Labels\n<span class=\"label info\">label<\/span>\nUse labels to add emphasis to any content.\n\n<pre data-lang=\"html\"><code><span class=\"label info\">Text<\/span><\/code><\/pre>\n\nYou can choose from the following color tags:\n\n<span class=\"label primary\">primary<\/span><span class=\"label alert\">alert<\/span><span class=\"label warning\">warning<\/span><span class=\"label success\">success<\/span><span class=\"label info\">info<\/span><span class=\"label\"><em>default<\/em><\/span><span class=\"label bg2\">bg2<\/span><span class=\"label bg3\">bg3<\/span>\n\n---\n\n## Toggle Content\nSometimes you want to hide long sections of content until the visitor chooses to view more. Simply add a toggle button link, and an element that contains the hidden content. You can toggle any kinds of content and the toggle link can be *before* or *after* the hidden content. <span class=\"toggle-content\">Toggle can also be effective to create FAQs or to simply hide long image descriptions like in <a href=\"https:\/\/demo.imagevuex.com\/examples\/features\/captions\/#&gid=1&pid=spectacles\" target=\"_blank\">this example<\/a>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique quis justo luctus pulvinar. Nulla venenatis lacus eget sapien pretium dignissim. Duis feugiat magna vitae fermentum euismod.<\/span>\n<a class=\"toggle-button\" data-close-text=\"less\">more<\/a>\n\n<a class=\"toggle-button\" data-close-text=\"hide code\">code<\/a>\n<pre data-lang=\"html\" class=\"toggle-content\"><code>\n<!-- hidden content must have class \"toggle-content\" --><br>\n<!-- toggle button must have class \"toggle-button\" --><br>\n<span class=\"toggle-content\">This text is hidden.<\/span><br>\n<a href=\"#\" class=\"toggle-button\" data-close-text=\"less\">more<\/a><br>\n<br>\n<!-- link placed before content --><br>\n<a href=\"#\" class=\"toggle-button\" data-close-text=\"less\">more<\/a><br>\n<div class=\"toggle-content\">This text is hidden.<\/div><br>\n<br>\n<!-- Use the data-close-text attribute to set the close text for the link --><br>\n<a href=\"#\" class=\"toggle-button\" data-close-text=\"CLOSE\">OPEN<\/a><br>\n<div class=\"toggle-content\">This text is hidden.<\/div>\n<\/code><\/pre>\n\n\n<!-- below javascript code is just for tabs styles demo in this page -->\n<script>\nfunction x3_inline_function(){\n\tvar container = $('#tabs-demo'),\n\t\t\ttabs = container.children('ul.tabs'),\n\t\t\tcontent = container.children('.tabs-content'),\n\t\t\tsettings =  $('#tabs-demo-settings');\n\t\t\t\n\tsettings.on('click', 'button', function(event) {\n\t\tif($(this).data('add')) container.addClass($(this).data('add'));\n\t\tif($(this).data('remove')) container.removeClass($(this).data('remove'));\n\t\tif($(this).data('orientation') == 'vertical') {\n\t\t\ttabs.addClass('vertical').removeClass('small-block-grid-4');\n\t\t\tcontent.addClass('vertical');\n\t\t} else if($(this).data('orientation') == 'horizontal'){\n\t\t\ttabs.removeClass('vertical').addClass('small-block-grid-4');\n\t\t\tcontent.removeClass('vertical');\n\t\t}\n\t\t$(this).closest('ul').find('button').removeClass('bg3').addClass('bg2');\n\t\t$(this).removeClass('bg2').addClass('bg3');\n\t});\n};\n<\/script>",
    "gallery": {
        "hide": true
    }
}