--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>m.images | A Pelican Blog</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,400i,600%7CSource+Sans+Pro:400,400i,600,600i" />
+ <link rel="stylesheet" href="static/m-dark.css" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta property="og:title" content="m.images" />
+ <meta name="twitter:title" content="m.images" />
+ <meta property="og:url" content="page.html" />
+ <meta name="twitter:url" content="page.html" />
+ <meta property="og:description" content="no." />
+ <meta name="twitter:description" content="no." />
+ <meta name="twitter:card" content="summary" />
+ <meta property="og:type" content="website" />
+</head>
+<body>
+<header><nav id="navigation">
+ <div class="m-container">
+ <div class="m-row">
+ <a href="./" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">A Pelican Blog</a>
+ </div>
+ </div>
+</nav></header>
+<main>
+<article>
+ <div class="m-container m-container-inflatable">
+ <div class="m-row">
+ <div class="m-col-l-10 m-push-l-1">
+ <h1>m.images</h1>
+<!-- content -->
+<p>Image:</p>
+<img class="m-image" src="./ship.jpg" />
+<p>Image with link:</p>
+<div class="m-image">
+<a href="./ship.jpg"><img src="./ship.jpg" /></a>
+</div>
+<p>Image, class on top, custom alt:</p>
+<img alt="A Ship" class="m-image m-fullwidth" src="./ship.jpg" />
+<p>Image with link, class on top:</p>
+<div class="m-image m-fullwidth">
+<a href="./ship.jpg"><img src="./ship.jpg" /></a>
+</div>
+<p>Figure:</p>
+<figure class="m-figure">
+<img src="./ship.jpg" />
+<figcaption>A Ship</figcaption>
+<span>
+Yes.</span>
+</figure>
+<p>Figure with link and only a caption:</p>
+<figure class="m-figure">
+<a href="./ship.jpg"><img src="./ship.jpg" /></a>
+<figcaption>A Ship</figcaption>
+</figure>
+<p>Figure with link and class on top:</p>
+<figure class="m-fullwidth m-figure">
+<a href="./ship.jpg"><img src="./ship.jpg" /></a>
+<figcaption>A Ship</figcaption>
+</figure>
+<p>Image grid:</p>
+<div class="m-imagegrid m-container-inflate">
+<div>
+<figure style="width: 69.127%">
+<a href="./ship.jpg"><img src="./ship.jpg" /><figcaption>F9.0, 1/250 s, ISO 100</figcaption>
+</a>
+</figure>
+<figure style="width: 30.873%">
+<a href="./flowers.jpg"><img src="./flowers.jpg" /><figcaption>F2.8, 1/1600 s, ISO 100</figcaption>
+</a>
+</figure>
+</div>
+<div>
+<figure style="width: 30.873%">
+<a href="./flowers.jpg"><img src="./flowers.jpg" /><figcaption>F2.8, 1/1600 s, ISO 100</figcaption>
+</a>
+</figure>
+<figure style="width: 69.127%">
+<a href="./ship.jpg"><img src="./ship.jpg" /><figcaption>F9.0, 1/250 s, ISO 100</figcaption>
+</a>
+</figure>
+</div>
+</div>
+<p>Image grid with a PNG file:</p>
+<div class="m-imagegrid m-container-inflate">
+<div>
+<figure style="width: 100.000%">
+<a href="./tiny.png"><img src="./tiny.png" /><div>
+</div>
+</a>
+</figure>
+</div>
+</div>
+<!-- /content -->
+ </div>
+ </div>
+ </div>
+</article>
+</main>
+</body>
+</html>
--- /dev/null
+m.images
+########
+
+:summary: no.
+
+Image:
+
+.. image:: {filename}/ship.jpg
+
+Image with link:
+
+.. image:: {filename}/ship.jpg
+ :target: {filename}/ship.jpg
+
+Image, class on top, custom alt:
+
+.. image:: {filename}/ship.jpg
+ :class: m-fullwidth
+ :alt: A Ship
+
+Image with link, class on top:
+
+.. image:: {filename}/ship.jpg
+ :target: {filename}/ship.jpg
+ :class: m-fullwidth
+
+Figure:
+
+.. figure:: {filename}/ship.jpg
+
+ A Ship
+
+ Yes.
+
+Figure with link and only a caption:
+
+.. figure:: {filename}/ship.jpg
+ :target: {filename}/ship.jpg
+
+ A Ship
+
+Figure with link and class on top:
+
+.. figure:: {filename}/ship.jpg
+ :target: {filename}/ship.jpg
+ :figclass: m-fullwidth
+
+ A Ship
+
+Image grid:
+
+.. image-grid::
+
+ {filename}/ship.jpg
+ {filename}/flowers.jpg
+
+ {filename}/flowers.jpg
+ {filename}/ship.jpg
+
+Image grid with a PNG file:
+
+.. image-grid::
+
+ {filename}/tiny.png