Merge pull request #6 from Gioni06/figure-and-caption

Add image with caption component

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## Unreleased
+- Add image with caption component
+
 ## [0.3.0] - 2019-01-27
 ### Updated
 - Changed light and dark themes

docs/dark/index.html

@@ -194,6 +194,7 @@
               <li><a href="#Cards">Cards</a></li>
               <li><a href="#Alerts">Alerts</a></li>
               <li><a href="#Media">Media</a></li>
+              <li><a href="#ImageWithCaption">Image with caption</a></li>
             </ul>
           </nav>
         </aside>
@@ -621,6 +622,14 @@
             <div class="terminal-avatarholder"><img width="50" height="50" src="https://picsum.photos/50/50?random&mediaRight" alt="Picsum"></div>
           </div>
         </div>
+    <hr>
+     <h2 id="ImageWithCaption">Image with caption</h2>
+     <figure>
+        <img src="https://picsum.photos/1000/600?random&imageWithCaption" alt="Image with caption" title="Image with caption">
+        <figcaption>
+          Image with caption
+        </figcaption>
+      </figure>
     <hr>
     <p>Version: 0.3.0 <a href="#menu">Top</a></p>
 

docs/index.html

@@ -173,6 +173,7 @@
               <li><a href="#Cards">Cards</a></li>
               <li><a href="#Alerts">Alerts</a></li>
               <li><a href="#Media">Media</a></li>
+              <li><a href="#ImageWithCaption">Image with caption</a></li>
             </ul>
           </nav>
         </aside>
@@ -600,6 +601,14 @@
             <div class="terminal-avatarholder"><img width="50" height="50" src="https://picsum.photos/50/50?random&mediaRight" alt="Picsum"></div>
           </div>
         </div>
+     <hr>
+     <h2 id="ImageWithCaption">Image with caption</h2>
+     <figure>
+        <img src="https://picsum.photos/1000/600?random&imageWithCaption" alt="Image with caption" title="Image with caption">
+        <figcaption>
+          Image with caption
+        </figcaption>
+      </figure>
     <hr>
     <p>Version: 0.3.0 <a href="#menu">Top</a></p>
 

src/terminal.css

@@ -693,6 +693,19 @@ input::placeholder, textarea::placeholder {
     padding: 0;
 }
 
+figure {
+    margin: 0;
+}
+
+figure > img {
+    padding: 0;
+}
+
+figure > figcaption {
+    color: var(--tertiary-color);
+    text-align: center;
+}
+
 .hljs {
   display: block;
   overflow-x: auto;