diff --git a/bs-config.cjs b/bs-config.cjs
index df286aea..de43b2dd 100644
--- a/bs-config.cjs
+++ b/bs-config.cjs
@@ -7,4 +7,4 @@ module.exports = {
     server: ['docs', 'lib'],
     open: 'local',
     browser: 'default'
-};
\ No newline at end of file
+};
diff --git a/docs/demo1/index.html b/docs/demo1/index.html
new file mode 100644
index 00000000..0d05791c
--- /dev/null
+++ b/docs/demo1/index.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en" class=" esl-scrollable-content">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+  <title>UI Playground</title>
+
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .img-64 {
+      width: 64px;
+      height: 64px;
+    }
+
+    .img-128 {
+      width: 128px;
+      height: 128px;
+    }
+
+    .img-256 {
+      width: 256px;
+      height: 256px;
+    }
+  </style>
+  <link type="text/css" rel="stylesheet" href="/playground.css">
+
+  <!-- IE preview staff -->
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.2.8/es6-promise.min.js"></script>-->
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.5.0/webcomponents-bundle.js"></script>-->
+</head>
+<body>
+<header class="header"></header>
+<main role="main">
+  <uip-root>
+    <uip-options label="Options:"></uip-options>
+    <uip-snippets label="Snippets">
+      <template uip-snippet label="Image">
+        <img class="demo-img" alt="patrick" src="patrick.png">
+      </template>
+      <template uip-snippet label="link image">
+        <a class="img-link" href="https://www.google.com/">
+          <img class="demo-img img-256" alt="patrick" src="patrick.png">
+        </a>
+      </template>
+    </uip-snippets>
+    <uip-preview label="Preview"></uip-preview>
+    <uip-settings label="Settings" target=".demo-img">
+      <uip-text-setting label="Source" attribute="src"></uip-text-setting>
+      <uip-text-setting label="Alternative text" attribute="alt"></uip-text-setting>
+      <uip-text-setting label="Height" attribute="height"></uip-text-setting>
+      <uip-text-setting label="Width" attribute="width"></uip-text-setting>
+      <uip-select-setting label="Resolution" attribute="class" mode="append">
+        <option value="img-64">64x64</option>
+        <option value="img-128">128x128</option>
+        <option value="img-256">256x256</option>
+        <option value="">None</option>
+      </uip-select-setting>
+      <uip-text-setting label="Link" attribute="href" target=".img-link"></uip-text-setting>
+      <uip-bool-setting label="Open in new window" attribute="target" target=".img-link" value="_blank"></uip-bool-setting>
+    </uip-settings>
+    <uip-editor label="Editor"></uip-editor>
+  </uip-root>
+</main>
+<footer class="footer bg-dark"></footer>
+
+<script src="/playground.run.js"></script>
+<esl-scrollbar class="page-scrollbar" target="html"></esl-scrollbar>
+</body>
+</html>
diff --git a/docs/demo1/patrick.png b/docs/demo1/patrick.png
new file mode 100644
index 00000000..a50d365b
Binary files /dev/null and b/docs/demo1/patrick.png differ
diff --git a/docs/demo2/index.html b/docs/demo2/index.html
new file mode 100644
index 00000000..d073c862
--- /dev/null
+++ b/docs/demo2/index.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en" class=" esl-scrollable-content">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+  <title>UI Playground</title>
+
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .demo-form {
+      width: 160px;
+    }
+
+    .form-section {
+      margin: 10px 0;
+    }
+
+    .validation-input:invalid {
+      border: 2px solid red;
+    }
+  </style>
+  <link type="text/css" rel="stylesheet" href="/playground.css">
+
+  <!-- IE preview staff -->
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.2.8/es6-promise.min.js"></script>-->
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.5.0/webcomponents-bundle.js"></script>-->
+</head>
+<body>
+<header class="header"></header>
+<main role="main">
+  <uip-root>
+    <uip-options label="Options:"></uip-options>
+    <uip-snippets label="Snippets">
+      <template uip-snippet label="User form">
+        <form class="demo-form">
+          <div class="form-section">
+            <label for="name">Name: </label>
+            <input type="text" id="name" name="userName">
+          </div>
+          <div class="form-section">
+            <label for="email">Email: </label>
+            <input type="email" pattern="^(([^<>()[\]\\.,;:\s@']+(\.[^<>()[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$" id="email" name="userEmail">
+          </div>
+          <div class="form-section">
+            <label for="pass">Password: </label>
+            <input type="password" id="pass" name="userPass">
+          </div>
+          <input type="submit" value="Send">
+        </form>
+      </template>
+    </uip-snippets>
+    <uip-preview class="centered-content" label="Preview"></uip-preview>
+    <uip-settings label="Settings" target=".demo-form">
+      <uip-bool-setting label="Email validation" target="#email" mode="append" attribute="class" value="validation-input"></uip-bool-setting>
+    </uip-settings>
+    <uip-editor label="Editor"></uip-editor>
+  </uip-root>
+</main>
+<footer class="footer bg-dark"></footer>
+
+<script src="/playground.run.js"></script>
+<esl-scrollbar class="page-scrollbar" target="html"></esl-scrollbar>
+</body>
+</html>
diff --git a/docs/demo3/index.html b/docs/demo3/index.html
new file mode 100644
index 00000000..8e10fb88
--- /dev/null
+++ b/docs/demo3/index.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<html lang="en" class=" esl-scrollable-content">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+  <title>UI Playground</title>
+
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .user-list {
+      display: flex;
+    }
+
+    [wrap-items] {
+      flex-wrap: wrap;
+    }
+
+    .user-block {
+      width: 200px;
+      height: 200px;
+      padding: 5px;
+      margin: 0 10px 20px 10px;
+      text-align: center;
+      overflow-wrap: break-word;
+    }
+
+    .red-user {
+      background-color: red;
+      color: white;
+    }
+
+    .green-user {
+      background-color: green;
+      color: green;
+    }
+
+    .aqua-user {
+      background-color: aqua;
+    }
+
+  </style>
+  <link type="text/css" rel="stylesheet" href="/playground.css">
+
+  <!-- IE preview staff -->
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.2.8/es6-promise.min.js"></script>-->
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.5.0/webcomponents-bundle.js"></script>-->
+</head>
+<body>
+<header class="header"></header>
+<main role="main">
+  <uip-root>
+    <uip-options label="Options:"></uip-options>
+    <uip-snippets label="Snippets">
+      <template uip-snippet label="Users list">
+        <div class="user-list">
+          <div class="user-block aqua-user">Alexander</div>
+          <div class="user-block aqua-user">Alexey</div>
+          <div class="user-block aqua-user">Marina</div>
+        </div>
+      </template>
+      <template uip-snippet label="Long users list" wrap-items>
+        <div class="user-list">
+          <div class="user-block red-user">Anton</div>
+          <div class="user-block red-user">Dmitri</div>
+          <div class="user-block red-user">Alexandra</div>
+          <div class="user-block red-user">Artem</div>
+          <div class="user-block red-user">Marina</div>
+          <div class="user-block red-user">Alexander</div>
+          <div class="user-block red-user">Alexander</div>
+        </div>
+      </template>
+    </uip-snippets>
+    <uip-preview label="Preview"></uip-preview>
+    <uip-settings label="Settings" target=".user-list">
+      <uip-select-setting label="User color" target=".user-block" attribute="class" mode="append">
+        <option value="red-user">Red</option>
+        <option value="aqua-user">Aqua</option>
+        <option value="green-user">Green</option>
+      </uip-select-setting>
+      <uip-bool-setting label="Wrap items" attribute="wrap-items"></uip-bool-setting>
+    </uip-settings>
+    <uip-editor label="Editor"></uip-editor>
+  </uip-root>
+</main>
+<footer class="footer bg-dark"></footer>
+
+<script src="/playground.run.js"></script>
+<esl-scrollbar class="page-scrollbar" target="html"></esl-scrollbar>
+</body>
+</html>
diff --git a/docs/demo4/index.html b/docs/demo4/index.html
new file mode 100644
index 00000000..8d45eb9b
--- /dev/null
+++ b/docs/demo4/index.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="en" class=" esl-scrollable-content">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+  <title>UI Playground</title>
+
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .user-list {
+      display: flex;
+    }
+
+    [wrap-items] {
+      flex-wrap: wrap;
+    }
+
+    .user-block {
+      width: 200px;
+      height: 200px;
+      padding: 5px;
+      margin: 0 10px 20px 10px;
+      text-align: center;
+      overflow-wrap: break-word;
+    }
+
+    .red-user {
+      background-color: red;
+      color: white;
+    }
+
+    .green-user {
+      background-color: green;
+      color: green;
+    }
+
+    .aqua-user {
+      background-color: aqua;
+    }
+
+  </style>
+  <link type="text/css" rel="stylesheet" href="/playground.css">
+
+  <!-- IE preview staff -->
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.2.8/es6-promise.min.js"></script>-->
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.5.0/webcomponents-bundle.js"></script>-->
+</head>
+<body>
+<header class="header"></header>
+<main role="main">
+  <uip-root>
+    <uip-options label="Options:"></uip-options>
+    <uip-snippets label="Snippets">
+      <template uip-snippet label="Playground">
+        <uip-root>
+          <uip-options label="Options:"></uip-options>
+          <uip-snippets label="Snippets">
+            <template uip-snippet label="Users list">
+              <div class="user-list">
+                <div class="user-block aqua-user">Alexander</div>
+                <div class="user-block aqua-user">Alexey</div>
+                <div class="user-block aqua-user">Marina</div>
+              </div>
+            </template>
+            <template uip-snippet label="Long users list" wrap-items>
+              <div class="user-list">
+                <div class="user-block red-user">Anton</div>
+                <div class="user-block red-user">Dmitri</div>
+                <div class="user-block red-user">Alexandra</div>
+                <div class="user-block red-user">Artem</div>
+                <div class="user-block red-user">Marina</div>
+                <div class="user-block red-user">Alexander</div>
+                <div class="user-block red-user">Alexander</div>
+              </div>
+            </template>
+          </uip-snippets>
+          <uip-preview label="Preview"></uip-preview>
+          <uip-settings label="Settings" target=".user-list">
+            <uip-select-setting label="User color" target=".user-block" attribute="class" mode="append">
+              <option value="red-user">Red</option>
+              <option value="aqua-user">Aqua</option>
+              <option value="green-user">Green</option>
+            </uip-select-setting>
+            <uip-bool-setting label="Wrap items" attribute="wrap-items"></uip-bool-setting>
+          </uip-settings>
+          <uip-editor label="Editor"></uip-editor>
+        </uip-root>
+      </template>
+    </uip-snippets>
+    <uip-preview label="Preview"></uip-preview>
+    <uip-settings label="Settings" target=".user-list">
+    </uip-settings>
+    <uip-editor label="Editor"></uip-editor>
+  </uip-root>
+</main>
+<footer class="footer bg-dark"></footer>
+
+<script src="/playground.run.js"></script>
+<esl-scrollbar class="page-scrollbar" target="html"></esl-scrollbar>
+</body>
+</html>
diff --git a/docs/index.html b/docs/index.html
index 9a19c7f1..4d548a20 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,193 +1,23 @@
-<!doctype html>
-<html lang="en" class=" esl-scrollable-content">
+<!DOCTYPE html>
+<html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport"
-        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
-  <title>UI Playground</title>
-
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    .red-color {
-      color: red;
-    }
-    .green-color {
-      color: green;
-    }
-    .blue-color {
-      color: blue;
-    }
-  </style>
-  <link type="text/css" rel="stylesheet" href="/playground.css">
-
-  <!-- IE preview staff -->
-  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.2.8/es6-promise.min.js"></script>-->
-  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.5.0/webcomponents-bundle.js"></script>-->
+  <title>UIP Playground demo</title>
 </head>
 <body>
-<header class="header"></header>
-<main role="main">
-  <uip-root>
-    <uip-options label="Options:"></uip-options>
-    <uip-snippets label="Snippets">
-      <template uip-snippet label="example 1">
-        <div class="test-class" style="display: flex" test-div>
-          <div>Sisha</div>
-          <div>Alex</div>
-          <div>Den</div>
-        </div>
-        <div>delimiter!</div>
-        <div class="red-color" style="display: flex" test-div>
-          <div>Misha</div>
-          <div>Dasha</div>
-          <div>Marina</div>
-        </div>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-      <template uip-snippet label="example 2">
-        <span>hello 2</span>
-      </template>
-    </uip-snippets>
-    <uip-preview label="Preview"></uip-preview>
-    <uip-settings label="Settings" target="[test-div]">
-      <uip-text-setting label="style setting" attribute="style"></uip-text-setting>
-      <uip-bool-setting label="green bool setting" attribute="class" value="green-color" mode="append"></uip-bool-setting>
-      <uip-select-setting label="color picker" attribute="class" mode="append" multiple>
-        <option value="red-color">Red</option>
-        <option value="green-color">Green</option>
-        <option value="blue-color">Blue</option>
-      </uip-select-setting>
-      <uip-bool-setting label="check list" attribute="check-list"></uip-bool-setting>
-    </uip-settings>
-    <uip-editor label="Editor"></uip-editor>
-  </uip-root>
-</main>
-<footer class="footer bg-dark"></footer>
-
-<script src="/playground.run.js"></script>
-<esl-scrollbar class="page-scrollbar" target="html"></esl-scrollbar>
+<ul>
+  <li>
+    <a href="./demo1/index.html">Demo with img</a>
+  </li>
+  <li>
+    <a href="./demo2/index.html">Demo with form</a>
+  </li>
+  <li>
+    <a href="./demo3/index.html">Demo with users list</a>
+  </li>
+  <li>
+    <a href="./demo4/index.html">Demo with playground</a>
+  </li>
+</ul>
 </body>
 </html>
diff --git a/src/preview/preview.less b/src/preview/preview.less
index 5eabb2e1..b23836bd 100644
--- a/src/preview/preview.less
+++ b/src/preview/preview.less
@@ -14,4 +14,12 @@ uip-preview {
     overflow: auto;
     resize: both;
   }
+
+  &.centered-content {
+    .uip-preview-inner {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
 }
diff --git a/src/settings/setting/bool-setting/bool-setting.less b/src/settings/setting/bool-setting/bool-setting.less
index 3adfedf3..80384aa9 100644
--- a/src/settings/setting/bool-setting/bool-setting.less
+++ b/src/settings/setting/bool-setting/bool-setting.less
@@ -5,7 +5,7 @@ uip-bool-setting {
 
     input {
       margin-left: 3px;
-      width: 100%;
+      max-width: 100%;
     }
   }
 
