css: support <h4>, <h5> and <h6> inside .m-block, .m-note, .m-frame.

diff --git a/css/m-components.css b/css/m-components.css
index 5bded04d6da40e0c21bcd9c876cc3ca5d9697c0a..07677e69fe85bc373e0c469b7c2c5decddfa46f7 100644 (file)
--- 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 b4f1e3edf029ea9f7a537b479a228912921a6af7..551acb21cc876fc01660093a98d0b824126a0a17 100644 (file)
--- 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 ea8e726cfca9ae2d124c2a608d0c1edb4725b35d..4a9004891a07fef52032bdae4174e277a44690c1 100644 (file)
--- 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 1c19be0d03af7269a60ce964b2a5ad88c3648740..64dd053690145081de8144c5e3d84512be298918 100644 (file)
--- 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 97e030e98cca55cc306fd83d52d6a609e9e082a6..9811f34eac040fe284fabdef8b948b539c33d56a 100644 (file)
--- 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