Add new dedicated classes for some most used html tags.

Deprecate Label. Use Span class instead.

12 files changed, 752 insertions, 1 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Footer.kt b/src/main/kotlin/pl/treksoft/kvision/html/Footer.kt
new file mode 100644
index 00000000..8b44dfc0
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Footer.kt
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.html
+
+import pl.treksoft.kvision.core.Container
+
+/**
+ * Simple component rendered as *footer*.
+ *
+ * @constructor
+ * @param content element text
+ * @param rich determines if [content] can contain HTML code
+ * @param align content align
+ * @param classes a set of CSS class names
+ * @param init an initializer extension function
+ */
+open class Footer(
+    content: String? = null,
+    rich: Boolean = false,
+    align: Align? = null,
+    classes: Set<String> = setOf(),
+    init: (Footer.() -> Unit)? = null
+) :
+    Tag(TAG.FOOTER, content, rich, align, classes) {
+
+    init {
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.footer(
+            content: String? = null,
+            rich: Boolean = false,
+            align: Align? = null,
+            classes: Set<String> = setOf(),
+            init: (Footer.() -> Unit)? = null
+        ): Footer {
+            val footer = Footer(content, rich, align, classes).apply { init?.invoke(this) }
+            this.add(footer)
+            return footer
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H1.kt b/src/main/kotlin/pl/treksoft/kvision/html/H1.kt
new file mode 100644
index 00000000..894baf72
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H1.kt
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.html
+
+import pl.treksoft.kvision.core.Container
+
+/**
+ * Simple component rendered as *h1*.
+ *
+ * @constructor
+ * @param content element text
+ * @param rich determines if [content] can contain HTML code
+ * @param align content align
+ * @param classes a set of CSS class names
+ * @param init an initializer extension function
+ */
+open class H1(
+    content: String? = null,
+    rich: Boolean = false,
+    align: Align? = null,
+    classes: Set<String> = setOf(),
+    init: (H1.() -> Unit)? = null
+) :
+    Tag(TAG.H1, content, rich, align, classes) {
+
+    init {
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.h1(
+            content: String? = null,
+            rich: Boolean = false,
+            align: Align? = null,
+            classes: Set<String> = setOf(),
+            init: (H1.() -> Unit)? = null
+        ): H1 {
+            val h1 = H1(content, rich, align, classes).apply { init?.invoke(this) }
+            this.add(h1)
+            return h1
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H2.kt b/src/main/kotlin/pl/treksoft/kvision/html/H2.kt
new file mode 100644
index 00000000..54e12b4a
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H2.kt
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.html
+
+import pl.treksoft.kvision.core.Container
+
+/**
+ * Simple component rendered as *h2*.
+ *
+ * @constructor
+ * @param content element text
+ * @param rich determines if [content] can contain HTML code
+ * @param align content align
+ * @param classes a set of CSS class names
+ * @param init an initializer extension function
+ */
+open class H2(
+    content: String? = null,
+    rich: Boolean = false,
+    align: Align? = null,
+    classes: Set<String> = setOf(),
+    init: (H2.() -> Unit)? = null
+) :
+    Tag(TAG.H2, content, rich, align, classes) {
+
+    init {
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.h2(
+            content: String? = null,
+            rich: Boolean = false,
+            align: Align? = null,
+            classes: Set<String> = setOf(),
+            init: (H2.() -> Unit)? = null
+        ): H2 {
+            val h2 = H2(content, rich, align, classes).apply { init?.invoke(this) }
+            this.add(h2)
+            return h2
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H3.kt b/src/main/kotlin/pl/treksoft/kvision/html/H3.kt
new file mode 100644
index 00000000..af71cdc5
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H3.kt
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.html
+
+import pl.treksoft.kvision.core.Container
+
+/**
+ * Simple component rendered as *h3*.
+ *
+ * @constructor
+ * @param content element text
+ * @param rich determines if [content] can contain HTML code
+ * @param align content align
+ * @param classes a set of CSS class names
+ * @param init an initializer extension function
+ */
+open class H3(
+    content: String? = null,
+    rich: Boolean = false,
+    align: Align? = null,
+    classes: Set<String> = setOf(),
+    init: (H3.() -> Unit)? = null
+) :
+    Tag(TAG.H3, content, rich, align, classes) {
+
+    init {
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.h3(
+            content: String? = null,
+            rich: Boolean = false,
+            align: Align? = null,
+            classes: Set<String> = setOf(),
+            init: (H3.() -> Unit)? = null
+        ): H3 {
+            val h3 = H3(content, rich, align, classes).apply { init?.invoke(this) }
+            this.add(h3)
+            return h3
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H4.kt b/src/main/kotlin/pl/treksoft/kvision/html/H4.kt
new file mode 100644
index 00000000..9c1b92ab
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H4.kt
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.html
+
+import pl.treksoft.kvision.core.Container
+
+/**
+ * Simple component rendered as *h4*.
+ *
+ * @constructor
+ * @param content element text
+ * @param rich determines if [content] can contain HTML code
+ * @param align content align
+ * @param classes a set of CSS class names
+ * @param init an initializer extension function
+ */
+open class H4(
+    content: String? = null,
+    rich: Boolean = false,
+    align: Align? = null,
+    classes: Set<String> = setOf(),
+    init: (H4.() -> Unit)? = null
+) :
+    Tag(TAG.H4, content, rich, align, classes) {
+
+    init {
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.h4(
+            content: String? = null,
+            rich: Boolean = false,
+            align: Align? = null,
+            classes: Set<String> = setOf(),
+            init: (H4.() -> Unit)? = null
+        ): H4 {
+            val h4 = H4(content, rich, align, classes).apply { init?.invoke(this) }
+            this.add(h4)
+            return h4
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H5.kt b/src/main/kotlin/pl/treksoft/kvision/html/H5.kt
new file mode 100644
index 00000000..ac993c4d
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H5.kt
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.html
+
+import pl.treksoft.kvision.core.Container
+
+/**
+ * Simple component rendered as *h5*.
+ *
+ * @constructor
+ * @param content element text
+ * @param rich determines if [content] can contain HTML code
+ * @param align content align
+ * @param classes a set of CSS class names
+ * @param init an initializer extension function
+ */
+open class H5(
+    content: String? = null,
+    rich: Boolean = false,
+    align: Align? = null,
+    classes: Set<String> = setOf(),
+    init: (H5.() -> Unit)? = null
+) :
+    Tag(TAG.H5, content, rich, align, classes) {
+
+    init {
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.h5(
+            content: String? = null,
+            rich: Boolean = false,
+            align: Align? = null,
+            classes: Set<String> = setOf(),
+            init: (H5.() -> Unit)? = null
+        ): H5 {
+            val h5 = H5(content, rich, align, classes).apply { init?.invoke(this) }
+            this.add(h5)
+            return h5
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/H6.kt b/src/main/kotlin/pl/treksoft/kvision/html/H6.kt
new file mode 100644
index 00000000..eaef18ff
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/H6.kt
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.html
+
+import pl.treksoft.kvision.core.Container
+
+/**
+ * Simple component rendered as *h6*.
+ *
+ * @constructor
+ * @param content element text
+ * @param rich determines if [content] can contain HTML code
+ * @param align content align
+ * @param classes a set of CSS class names
+ * @param init an initializer extension function
+ */
+open class H6(
+    content: String? = null,
+    rich: Boolean = false,
+    align: Align? = null,
+    classes: Set<String> = setOf(),
+    init: (H6.() -> Unit)? = null
+) :
+    Tag(TAG.H6, content, rich, align, classes) {
+
+    init {
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.h6(
+            content: String? = null,
+            rich: Boolean = false,
+            align: Align? = null,
+            classes: Set<String> = setOf(),
+            init: (H6.() -> Unit)? = null
+        ): H6 {
+            val h6 = H6(content, rich, align, classes).apply { init?.invoke(this) }
+            this.add(h6)
+            return h6
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Header.kt b/src/main/kotlin/pl/treksoft/kvision/html/Header.kt
new file mode 100644
index 00000000..94a9c079
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Header.kt
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.html
+
+import pl.treksoft.kvision.core.Container
+
+/**
+ * Simple component rendered as *header*.
+ *
+ * @constructor
+ * @param content element text
+ * @param rich determines if [content] can contain HTML code
+ * @param align content align
+ * @param classes a set of CSS class names
+ * @param init an initializer extension function
+ */
+open class Header(
+    content: String? = null,
+    rich: Boolean = false,
+    align: Align? = null,
+    classes: Set<String> = setOf(),
+    init: (Header.() -> Unit)? = null
+) :
+    Tag(TAG.HEADER, content, rich, align, classes) {
+
+    init {
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.header(
+            content: String? = null,
+            rich: Boolean = false,
+            align: Align? = null,
+            classes: Set<String> = setOf(),
+            init: (Header.() -> Unit)? = null
+        ): Header {
+            val header = Header(content, rich, align, classes).apply { init?.invoke(this) }
+            this.add(header)
+            return header
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Label.kt b/src/main/kotlin/pl/treksoft/kvision/html/Label.kt
index 41406cf2..827c90fd 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Label.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Label.kt
@@ -30,13 +30,16 @@ import pl.treksoft.kvision.core.Container
  * @param content label text
  * @param rich determines if [content] can contain HTML code
  */
-open class Label(content: String? = null, rich: Boolean = false) : Tag(TAG.SPAN, content, rich) {
+@Deprecated("Use Span class instead.")
+open class Label(content: String? = null, rich: Boolean = false) : Span(content, rich) {
     companion object {
         /**
          * DSL builder extension function.
          *
          * It takes the same parameters as the constructor of the built component.
          */
+        @Deprecated("User Span.Companion.span function instead.")
+        @Suppress("DEPRECATION")
         fun Container.label(
             content: String? = null, rich: Boolean = false, init: (Label.() -> Unit)? = null
         ): Label {
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/P.kt b/src/main/kotlin/pl/treksoft/kvision/html/P.kt
new file mode 100644
index 00000000..feadc54a
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/P.kt
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.html
+
+import pl.treksoft.kvision.core.Container
+
+/**
+ * Simple component rendered as *p*.
+ *
+ * @constructor
+ * @param content element text
+ * @param rich determines if [content] can contain HTML code
+ * @param align content align
+ * @param classes a set of CSS class names
+ * @param init an initializer extension function
+ */
+open class P(
+    content: String? = null,
+    rich: Boolean = false,
+    align: Align? = null,
+    classes: Set<String> = setOf(),
+    init: (P.() -> Unit)? = null
+) :
+    Tag(TAG.P, content, rich, align, classes) {
+
+    init {
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.p(
+            content: String? = null,
+            rich: Boolean = false,
+            align: Align? = null,
+            classes: Set<String> = setOf(),
+            init: (P.() -> Unit)? = null
+        ): P {
+            val p = P(content, rich, align, classes).apply { init?.invoke(this) }
+            this.add(p)
+            return p
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Section.kt b/src/main/kotlin/pl/treksoft/kvision/html/Section.kt
new file mode 100644
index 00000000..94413943
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Section.kt
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.html
+
+import pl.treksoft.kvision.core.Container
+
+/**
+ * Simple component rendered as *section*.
+ *
+ * @constructor
+ * @param content element text
+ * @param rich determines if [content] can contain HTML code
+ * @param align content align
+ * @param classes a set of CSS class names
+ * @param init an initializer extension function
+ */
+open class Section(
+    content: String? = null,
+    rich: Boolean = false,
+    align: Align? = null,
+    classes: Set<String> = setOf(),
+    init: (Section.() -> Unit)? = null
+) :
+    Tag(TAG.SECTION, content, rich, align, classes) {
+
+    init {
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.section(
+            content: String? = null,
+            rich: Boolean = false,
+            align: Align? = null,
+            classes: Set<String> = setOf(),
+            init: (Section.() -> Unit)? = null
+        ): Section {
+            val section = Section(content, rich, align, classes).apply { init?.invoke(this) }
+            this.add(section)
+            return section
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Span.kt b/src/main/kotlin/pl/treksoft/kvision/html/Span.kt
new file mode 100644
index 00000000..bc5e93cd
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Span.kt
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.html
+
+import pl.treksoft.kvision.core.Container
+
+/**
+ * Simple component rendered as *span*.
+ *
+ * @constructor
+ * @param content element text
+ * @param rich determines if [content] can contain HTML code
+ * @param align content align
+ * @param classes a set of CSS class names
+ * @param init an initializer extension function
+ */
+open class Span(
+    content: String? = null,
+    rich: Boolean = false,
+    align: Align? = null,
+    classes: Set<String> = setOf(),
+    init: (Span.() -> Unit)? = null
+) :
+    Tag(TAG.SPAN, content, rich, align, classes) {
+
+    init {
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    companion object {
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.span(
+            content: String? = null,
+            rich: Boolean = false,
+            align: Align? = null,
+            classes: Set<String> = setOf(),
+            init: (Span.() -> Unit)? = null
+        ): Span {
+            val span = Span(content, rich, align, classes).apply { init?.invoke(this) }
+            this.add(span)
+            return span
+        }
+    }
+}