From 74298e293a79ca32834e71b0b2b2eee803bbc8c3 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Mon, 4 Dec 2017 12:04:47 +0100
Subject: [PATCH] css: support <h4>, <h5> and <h6> inside .m-block, .m-note,
 .m-frame.

---
 css/m-components.css        |  28 ++-
 css/m-dark.compiled.css     |  28 ++-
 css/m-light.compiled.css    |  28 ++-
 doc/css/components-test.rst | 345 ++++++++++++++++++++++++++++++++++--
 doc/css/components.rst      |  13 +-
 5 files changed, 401 insertions(+), 41 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index 5bded04d..07677e69 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -782,17 +782,29 @@ table.m-table tr.m-dim th, table.m-table th.m-dim {
 
 /* Colored block */
 .m-block.m-default { border-left-color: var(--line-color); }
-.m-block.m-default h3 { color: var(--default-color); }
+.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6 {
+  color: var(--default-color);
+}
 .m-block.m-primary { border-left-color: var(--primary-color); }
-.m-block.m-primary h3 { color: var(--primary-color); }
+.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6 {
+  color: var(--primary-color);
+}
 .m-block.m-success { border-left-color: var(--success-color); }
-.m-block.m-success h3 { color: var(--success-color); }
+.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6 {
+  color: var(--success-color);
+}
 .m-block.m-warning { border-left-color: var(--warning-color); }
-.m-block.m-warning h3 { color: var(--warning-color); }
+.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6 {
+  color: var(--warning-color);
+}
 .m-block.m-danger { border-left-color: var(--danger-color); }
-.m-block.m-danger h3 { color: var(--danger-color); }
+.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6 {
+  color: var(--danger-color);
+}
 .m-block.m-info { border-left-color: var(--info-color); }
-.m-block.m-info h3 { color: var(--info-color); }
+.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6 {
+  color: var(--info-color);
+}
 .m-block.m-dim {
   border-left-color: var(--dim-color);
   color: var(--dim-color);
@@ -802,7 +814,9 @@ table.m-table tr.m-dim th, table.m-table th.m-dim {
   color: var(--dim-link-active-color);
 }
 .m-block.m-flat { border-color: transparent; }
-.m-block.m-flat h3 { color: var(--default-color); }
+.m-block.m-flat h3, .m-block.m-flat h4, .m-block.m-flat h5. .m-block.m-flat h6 {
+  color: var(--default-color);
+}
 
 /* Colored note, table coloring */
 .m-note.m-default { background-color: var(--default-filled-background-color); }
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index b4f1e3ed..551acb21 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -1094,17 +1094,29 @@ table.m-table tr.m-dim th, table.m-table th.m-dim {
   border-color: #2f363f;
 }
 .m-block.m-default { border-left-color: #405363; }
-.m-block.m-default h3 { color: #dcdcdc; }
+.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6 {
+  color: #dcdcdc;
+}
 .m-block.m-primary { border-left-color: #a5c9ea; }
-.m-block.m-primary h3 { color: #a5c9ea; }
+.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6 {
+  color: #a5c9ea;
+}
 .m-block.m-success { border-left-color: #3bd267; }
-.m-block.m-success h3 { color: #3bd267; }
+.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6 {
+  color: #3bd267;
+}
 .m-block.m-warning { border-left-color: #c7cf2f; }
-.m-block.m-warning h3 { color: #c7cf2f; }
+.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6 {
+  color: #c7cf2f;
+}
 .m-block.m-danger { border-left-color: #cd3431; }
-.m-block.m-danger h3 { color: #cd3431; }
+.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6 {
+  color: #cd3431;
+}
 .m-block.m-info { border-left-color: #2f83cc; }
-.m-block.m-info h3 { color: #2f83cc; }
+.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6 {
+  color: #2f83cc;
+}
 .m-block.m-dim {
   border-left-color: #747474;
   color: #747474;
@@ -1114,7 +1126,9 @@ table.m-table tr.m-dim th, table.m-table th.m-dim {
   color: #747474;
 }
 .m-block.m-flat { border-color: transparent; }
-.m-block.m-flat h3 { color: #dcdcdc; }
+.m-block.m-flat h3, .m-block.m-flat h4, .m-block.m-flat h5. .m-block.m-flat h6 {
+  color: #dcdcdc;
+}
 .m-note.m-default { background-color: #34424d; }
 .m-note.m-default, table.m-table tr.m-default td, table.m-table td.m-default,
                    table.m-table tr.m-default th, table.m-table th.m-default {
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index ea8e726c..4a900489 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -1094,17 +1094,29 @@ table.m-table tr.m-dim th, table.m-table th.m-dim {
   border-color: #ffffff;
 }
 .m-block.m-default { border-left-color: #f7e3db; }
-.m-block.m-default h3 { color: #000000; }
+.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6 {
+  color: #000000;
+}
 .m-block.m-primary { border-left-color: #cb4b16; }
-.m-block.m-primary h3 { color: #cb4b16; }
+.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6 {
+  color: #cb4b16;
+}
 .m-block.m-success { border-left-color: #31c25d; }
-.m-block.m-success h3 { color: #31c25d; }
+.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6 {
+  color: #31c25d;
+}
 .m-block.m-warning { border-left-color: #c7cf2f; }
-.m-block.m-warning h3 { color: #c7cf2f; }
+.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6 {
+  color: #c7cf2f;
+}
 .m-block.m-danger { border-left-color: #f60000; }
-.m-block.m-danger h3 { color: #f60000; }
+.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6 {
+  color: #f60000;
+}
 .m-block.m-info { border-left-color: #2e7dc5; }
-.m-block.m-info h3 { color: #2e7dc5; }
+.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6 {
+  color: #2e7dc5;
+}
 .m-block.m-dim {
   border-left-color: #bdbdbd;
   color: #bdbdbd;
@@ -1114,7 +1126,9 @@ table.m-table tr.m-dim th, table.m-table th.m-dim {
   color: #949494;
 }
 .m-block.m-flat { border-color: transparent; }
-.m-block.m-flat h3 { color: #000000; }
+.m-block.m-flat h3, .m-block.m-flat h4, .m-block.m-flat h5. .m-block.m-flat h6 {
+  color: #000000;
+}
 .m-note.m-default { background-color: #fbf0ec; }
 .m-note.m-default, table.m-table tr.m-default td, table.m-table td.m-default,
                    table.m-table tr.m-default th, table.m-table th.m-default {
diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index 1c19be0d..64dd0536 100644
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -35,48 +35,195 @@ Test
 Blocks
 ======
 
+Different :html:`<h*>` tags, the styling should be preserved across all sizes.
+
 .. raw:: html
 
     <div class="m-row">
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-block m-default">
-          <h3>Default block</h3>
+          <h3>Default block h3</h3>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-default">
+          <h4>Default block h4</h4>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-default">
+          <h5>Default block h5</h5>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-default">
+          <h6>Default block h6</h6>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-primary">
+          <h3>Primary block h3</h3>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-primary">
+          <h4>Primary block h4</h4>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-primary">
+          <h5>Primary block h5</h5>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
         </div>
       </div>
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-block m-primary">
-          <h3>Primary block</h3>
+          <h6>Primary block h6</h6>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-success">
+          <h3>Success block h3</h3>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-success">
+          <h4>Success block h4</h4>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-success">
+          <h5>Success block h5</h5>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
         </div>
       </div>
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-block m-success">
-          <h3>Success block</h3>
+          <h6>Success block h6</h6>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-warning">
+          <h3>Warning block h3</h3>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-warning">
+          <h4>Warning block h4</h4>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
         </div>
       </div>
+      <div class="m-clearfix-s"></div>
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-block m-warning">
-          <h3>Warning block</h3>
+          <h5>Warning block h5</h5>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-warning">
+          <h6>Warning block h6</h6>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-danger">
+          <h3>Danger block h3</h3>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-danger">
+          <h4>Danger block h4</h4>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-danger">
+          <h5>Danger block h5</h5>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
         </div>
       </div>
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-block m-danger">
-          <h3>Danger block</h3>
+          <h6>Danger block h6</h6>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-info">
+          <h3>Info block h3</h3>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-info">
+          <h4>Info block h4</h4>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
         </div>
       </div>
+      <div class="m-clearfix-s"></div>
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-block m-info">
-          <h3>Info block</h3>
+          <h5>Info block h5</h5>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-info">
+          <h6>Info block h6</h6>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-dim">
+          <h3>Dim block h3</h3>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
         </div>
       </div>
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-block m-dim">
-          <h3>Dim block</h3>
+          <h4>Dim block h4</h4>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-dim">
+          <h5>Dim block h5</h5>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-dim">
+          <h6>Dim block h6</h6>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. <a href="#">Link.</a>
         </div>
       </div>
@@ -109,54 +256,222 @@ Badge with lots of text and less text:
 Notes, frame
 ============
 
+Different :html:`<h*>` tags.
+
 .. raw:: html
 
     <div class="m-row">
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-note m-default">
-          <h3>Default note</h3>
+          <h3>Default note h3</h3>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-default">
+          <h4>Default note h4</h4>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-default">
+          <h5>Default note h5</h5>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-default">
+          <h6>Default note h6</h6>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-primary">
+          <h3>Primary note h3</h3>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-primary">
+          <h4>Primary note h4</h4>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-primary">
+          <h5>Primary note h5</h5>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
         </div>
       </div>
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-note m-primary">
-          <h3>Primary note</h3>
+          <h6>Primary note h6</h6>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-success">
+          <h3>Success note h3</h3>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
         </div>
       </div>
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-note m-success">
-          <h3>Success note</h3>
+          <h4>Success note h4</h4>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-success">
+          <h5>Success note h5</h5>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-success">
+          <h6>Success note h6</h6>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-warning">
+          <h3>Warning note h3</h3>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
         </div>
       </div>
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-note m-warning">
-          <h3>Warning note</h3>
+          <h4>Warning note h4</h4>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-warning">
+          <h5>Warning note h5</h5>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-warning">
+          <h6>Warning note h6</h6>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-danger">
+          <h3>Danger note h3</h3>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-danger">
+          <h4>Danger note h4</h4>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-danger">
+          <h5>Danger note h5</h5>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
         </div>
       </div>
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-note m-danger">
-          <h3>Danger note</h3>
+          <h6>Danger note h6</h6>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-info">
+          <h3>Info note h3</h3>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-info">
+          <h4>Info note h4</h4>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
         </div>
       </div>
+      <div class="m-clearfix-s"></div>
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-note m-info">
-          <h3>Info note</h3>
+          <h5>Info note h5</h5>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
         </div>
       </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-info">
+          <h6>Info note h6</h6>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-note m-dim">
-          <h3>Dim note</h3>
+          <h3>Dim note h3</h3>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-dim">
+          <h4>Dim note h4</h4>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-dim">
+          <h5>Dim note h5</h5>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-dim">
+          <h6>Dim note h6</h6>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-frame">
+          <h3>Frame h3</h3>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-frame">
+          <h4>Frame h4</h4>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-frame">
+          <h5>Frame h5</h5>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
         </div>
       </div>
       <div class="m-col-m-3 m-col-s-6">
         <div class="m-frame">
-          <h3>Frame</h3>
+          <h6>Frame h6</h6>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
         </div>
       </div>
diff --git a/doc/css/components.rst b/doc/css/components.rst
index 97e030e9..9811f34e 100644
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -65,10 +65,11 @@ page. The colors are:
 
 Blocks, defined by :css:`.m-block`, wrap the content in a light frame and add a
 bolder colored bar on the left. Use in combination with one of the color styles
-above. Block caption should go into :html:`<h3>` and is colored in respect to
-the color style as well. Text and links always have the default color, except
-for :css:`.m-block.m-dim`. It's also possible to have a block without the
-border, just add :css:`.m-flat` class to it.
+above. Block caption should go into :html:`<h3>` (or :html:`<h4>`,
+:html:`<h5>`, :html:`<h6>`) and is colored in respect to the color style as
+well. Text and links always have the default color, except for
+:css:`.m-block.m-dim`. It's also possible to have a block without the border,
+just add :css:`.m-flat` class to it.
 
 It's recommended to use the :html:`<aside>` element to highlight the semantics,
 but the CSS class can be used on any block element.
@@ -142,6 +143,7 @@ but the CSS class can be used on any block element.
 Badges are blocks together with an avatar, containing for example info about
 the author of given article. Simply add :css:`.m-badge` to your colored block
 element and put an :html:`<img>` element with the avatar as the first child.
+Only :html:`<h3>` is supported for a badge.
 
 .. code-figure::
 
@@ -171,7 +173,8 @@ element and put an :html:`<img>` element with the avatar as the first child.
 Unlike blocks, notes are meant to wrap smaller bits of information. Use the
 :css:`.m-note` CSS class together with desired color class. A note is also
 slightly rounded and has everything colored, the background, the caption, text
-and also links. The :html:`<h3>` caption tag is optional.
+and also links. The :html:`<h3>` (:html:`<h4>`, :html:`<h5>`, :html:`<h6>`)
+caption tag is optional.
 
 Besides notes, there is a frame element defined by :css:`.m-frame`, which just
 wraps your content in a slightly rounded border. No color classes apply to a
-- 
2.30.2