CSS » Components

In m-com­pon­ents.css, m.css provides a set of ba­sic com­pon­ents for fur­ther im­prov­ing the lay­out and dis­play of au­thored con­tent.

Col­ors

Sim­il­arly to Boot­strap, m.css has a set of pre­defined col­ors that af­fect how a cer­tain com­pon­ent looks. This works on ma­jor­ity of com­pon­ents shown on this page. The col­ors are:

  • .m-default is a de­fault style that doesn’t grab at­ten­tion
  • .m-primary is meant to be used to high­light the primary ele­ment on a page
  • .m-success is good to high­light happy things
  • .m-warning catches at­ten­tion, but doesn’t hurt
  • .m-danger brings really bad news
  • .m-info is for side notes
  • .m-dim is shy and doesn’t want you to be bothered by the in­form­a­tion it brings

Blocks

Blocks, defined by .m-block, wrap the con­tent in a light frame and add a bolder colored bar on the left. Use in com­bin­a­tion with one of the col­or styles above. Block cap­tion should go in­to <h3> (or <h4>, <h5>, <h6>) and is colored in re­spect to the col­or style as well. Text and links in­side the text al­ways have the de­fault col­or, ex­cept for .m-block.m-dim. It’s also pos­sible to have a block without the bor­der, just add .m-flat class to it.

It’s re­com­men­ded to use the <aside> ele­ment to high­light the se­mantics, but the CSS class can be used on any block ele­ment.

<aside class="m-block m-default">
  <h3>Default block</h3>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices
  a erat eu suscipit. <a href="#">Link.</a>
</aside>

Badges

Badges are blocks to­geth­er with an avatar, con­tain­ing for ex­ample info about the au­thor of giv­en art­icle. Simply add .m-badge to your colored block ele­ment and put an <img> ele­ment with the avatar as the first child. Only <h3> is sup­por­ted for a badge. For stan­dalone roun­ded avatars, see Im­ages be­low.

<div class="m-block m-badge m-success">
  <img src="author.jpg" alt="The Author" />
  <h3>About the author</h3>
  <p><a href="#">The Author</a> is ...</p>
</div>
The Author

About the author

The Author is not really smiling at you from this avatar. Sorry about that. He knows that and he promises to improve. Stalk him on Twitter if you want to get notified when he gets a better avatar.

Notes, frame

Un­like blocks, notes are meant to wrap smal­ler bits of in­form­a­tion. Use the .m-note CSS class to­geth­er with de­sired col­or class. A note is also slightly roun­ded and has everything colored, the back­ground, the cap­tion, text and also links. The <h3> (<h4>, <h5>, <h6>) cap­tion tag is op­tion­al.

Be­sides notes, there is a frame ele­ment defined by .m-frame, which just wraps your con­tent in a slightly roun­ded bor­der. No col­or classes ap­ply to a frame.

Like with blocks, tt’s re­com­men­ded to use the <aside> ele­ment for se­mant­ic pur­poses, but the CSS classes can be used on any block ele­ment.

<aside class="m-note m-success">
  <h3>Success note</h3>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Link.</a>
</aside>

Text

Use .m-text CSS class to­geth­er with de­sired col­or class to col­or a para­graph or in­line text.

<p class="m-text m-warning">Warning text. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam
pharetra imperdiet tortor sed vehicula. <a href="#">Link.</a></p>

Default text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Primary text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Success text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Warning text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Danger text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Info text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Dim text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula. Link.

Ap­ply .m-tiny, .m-small or .m-big CSS class to­geth­er with .m-text to make the text ap­pear smal­ler or lar­ger.

<p class="m-text m-big">Larger text. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra
imperdiet tortor sed vehicula.</p>
<p class="m-text m-small">Smaller text. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra
imperdiet tortor sed vehicula.</p>
<p class="m-text m-tiny">Tiny text. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra
imperdiet tortor sed vehicula.</p>

Larger text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula.

Smaller text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula.

Tiny text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula.

La­bels

Use .m-label to­geth­er with a col­or class to style a la­bel. Com­bine with .m-flat to cre­ate a less no­tice­able la­bel. The la­bel size ad­apts to size of sur­round­ing text.

<h3>An article <span class="m-label m-success">updated</span></h3>
<p class="m-text m-dim">That's how things are now.
<span class="m-label m-flat m-primary">clarified</span></p>

An article updated

That's how things are now. clarified

Tables

Use .m-table to ap­ply styl­ing to a table. The table is centered by de­fault; rows are sep­ar­ated by lines, with <thead> and <tfoot> be­ing sep­ar­ated by a thick­er line. The <th> ele­ment is rendered in bold, all <th> and <td> are aligned to left while table <caption> is centered. Ex­ample table:

<table class="m-table">
  <caption>Table caption</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>Heading</th>
      <th>Second<br/>heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Cell</td>
      <td>Second cell</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th scope="row">2</th>
      <td>2nd row cell</td>
      <td>2nd row 2nd cell</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>&Sigma;</th>
      <td>Footer</td>
      <td>Second<br/>footer</td>
    </tr>
  </tfoot>
</table>
Table caption
# Heading Second
heading
1 Cell Second cell
2 2nd row cell 2nd row 2nd cell
Σ Footer Second
footer

Rows are high­lighted on hov­er, if you want to dis­able that, put .m-flat CSS class on the <table> ele­ment. You can also put .m-thin onto <th> ele­ments to re­move the bold styl­ing. Sim­il­arly to oth­er com­pon­ents, you can col­or par­tic­u­lar <tr> or <td> ele­ments us­ing the col­or classes from above:

Default row Lorem ipsum dolor sit amet Link
Primary row Lorem ipsum dolor sit amet Link
Success row Lorem ipsum dolor sit amet Link
Warning row Lorem ipsum dolor sit amet Link
Danger row Lorem ipsum dolor sit amet Link
Info row Lorem ipsum dolor sit amet Link
Dim row Lorem ipsum dolor sit amet Link

Mark the table with .m-big to in­flate it with more spa­cing, for ex­ample when design­ing a high-level product cat­egory over­view.

Sim­il­arly to lists, if us­ing <p> ele­ments in­side <td>, they are neither in­den­ted nor jus­ti­fied.

Im­ages

Put­ting .m-image class onto an <img> / <svg> tag makes the im­age centered, slightly roun­ded and sets its max width to 100%. Adding .m-fullwidth on the im­age ele­ment works as ex­pec­ted. For ac­cess­ib­il­ity reas­ons it’s a good prac­tice to in­clude the alt at­trib­ute.

<img src="flowers.jpg" alt="Flowers" class="m-image" />
Flowers

To make the im­age click­able, wrap the <a> tag in an ad­di­tion­al <div> and put the .m-image class on the <div> ele­ment in­stead of on the im­age. This will en­sure that only the im­age is click­able and not the sur­round­ing area:

<div class="m-image">
  <a href="flowers.jpg"><img src="flowers.jpg" /></a>
</div>

For avatars, sim­il­arly to the Badges above, ap­ply­ing a .m-badge class to­geth­er with .m-image will make the im­age round. Works for both plain <img> and click­able im­ages wrapped in <div class="m-image">.

<img src="author.jpg" alt="The Author" class="m-image m-badge" />
The Author

Fig­ures

Use the HTM­L5 <figure> tag to­geth­er with .m-figure to style it. As with plain im­age, it’s by de­fault centered, slightly roun­ded and has a bor­der around the cap­tion and de­scrip­tion. The cap­tion is ex­pec­ted to be in the <figcaption> ele­ment. In­side it, there can op­tion­ally be a longer de­scrip­tion wrapped in a div.m-figure-description ele­ment. The .m-fullwidth class works here too and you can also wrap the <img> / <svg> ele­ment in an <a> tag to make it click­able.

Fig­ure al­ways ex­pects at least the cap­tion to be present. If you want just an im­age, use the plain im­age tag. If you have a lot of fig­ures on the page and the bor­der is dis­tract­ing, ap­ply the .m-flat class to hide it. Op­tion­ally you can col­or the fig­ure bor­der and cap­tion (with the de­scrip­tion stay­ing un­af­fected) by adding one of the CSS col­or classes to the <figure> ele­ment.

<figure class="m-figure">
  <img src="ship.jpg" alt="Ship" />
  <figcaption>
    A Ship
    <div class="m-figure-description">
      Photo © <a href="http://blog.mosra.cz/">The Author</a>
    </div>
  </figcaption>
</figure>
Ship
A Ship
Photo © The Author

Im­age grid

In­spired by im­age grids on Me­di­um, its pur­pose is to present pho­tos in a beau­ti­ful way. Wrap one or more <figure> ele­ments in a <div class="m-imagegrid"> ele­ment and de­lim­it each row with a wrap­per <div>. Each <figure> ele­ment needs to con­tain an <img> and a <figcaption> with im­age cap­tion that ap­pears on hov­er; these two ele­ments can be op­tion­ally wrapped in an <a> to make the im­age click­able. If you don’t want a cap­tion, use an empty <div> in­stead of <figcaption>. If you want the grid to in­flate to full con­tain­er width, add a .m-container-inflate CSS class to it.

Ex­ample us­age (stu­pidly show­ing the two im­ages all over again — sorry):

<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>

The core idea be­hind the im­age grid is scal­ing par­tic­u­lar im­ages to oc­cupy the same height on giv­en row. First, a sum W of im­age as­pect ra­tios is cal­cu­lated for the whole row:

W = \sum_{i=0}^{n-1} \cfrac{w_i}{h_i}

Then, per­cent­age width p_i of each im­age is cal­cu­lated as:

p_i = W \cfrac{w_i}{h_i} \cdot 100 \%

Code

m.css re­cog­nizes code high­light­ing com­pat­ible with Pyg­ments and provides ad­di­tion­al styl­ing for it. There’s a set of built­in pyg­ments-*.css styles that match the m.css themes.

For ex­ample, code high­lighted us­ing:

echo -e "int main() {\n    return 0;\n}" | pygmentize -f html -l c++ -O nowrap

Will spit out a bunch of <span> ele­ments like be­low. To cre­ate a code block, wrap the out­put in <pre class="m-code"> (note that whitespace mat­ters in­side this tag). The block doesn’t wrap lines on nar­row screens to not hurt read­ab­il­ity, a ho­ri­zont­al scroll­bar is shown in­stead if the con­tent is too wide.

<pre class="m-code"><span class="kt">int</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span></pre>
int main() {
    return 0;
}

Pyg­ments al­low to high­light ar­bit­rary lines, which af­fect the ren­der­ing in this way:

int main() {
    std::cout << "Hello world!" << std::endl;
    return 0;
}

Some­times you want to fo­cus on code that has been changed / ad­ded and mute the rest. Add an ad­di­tion­al .m-inverted CSS class to the <pre class="m-code"> to achieve this ef­fect:

#include <iostream>

int main() {
    std::cout << "Hello world!" << std::endl;
    return 0;
}

To have code high­light­ing in­line, wrap the out­put in <code class="m-code"> in­stead of <pre>:

<p>The <code class="m-code"><span class="n">main</span><span class="p">()</span></code>
function doesn't need to have a <code class="m-code"><span class="k">return</span></code>
statement.</p>

The main() function doesn't need to have a return statement.

Col­or swatches in code snip­pets

For code deal­ing with col­ors it might be use­ful to show the ac­tu­al col­or that’s be­ing rep­res­en­ted by a hexa­decim­al lit­er­al, for ex­ample. In the be­low snip­pet, <span class="m-code-color" style="background-color: #3bd267;"></span> is ad­ded next to the lit­er­al, show­ing a colored square:

<pre class="m-code"><span class="p">.</span><span class="nc">success</span> <span class="p">{</span>
  <span class="k">color</span><span class="p">:</span> <span class="mh">#3bd267<span class="m-code-color" style="background-color: #3bd267;"></span></span><span class="p">;</span>
<span class="p">}</span></pre>
.success {
  color: #3bd267;
}

Colored ter­min­al out­put

Be­sides code, it’s also pos­sible to “high­light” AN­SI-colored ter­min­al out­put. For that, m.css provides a cus­tom Pyg­ments lex­er that’s to­geth­er with pyg­ments-con­sole.css able to de­tect and high­light the ba­sic 4-bit col­or codes (8 fore­ground col­ors in either nor­mal or bright ver­sion) and a tiny sub­set of the 24-bit col­or scheme as well. Down­load the an­s­ilex­er.py file or use it dir­ectly from your Git clone of m.css. Ex­ample us­age:

ls -C --color=always | pygmentize -l plugins/ansilexer.py:AnsiLexer -x -f html -O nowrap

Wrap the HTML out­put in either <pre class="m-console"> for a block list­ing or <code class="m-console"> for in­line list­ing. The out­put might then look sim­il­arly to this:

<pre class="m-console">CONTRIBUTING.rst  CREDITS.rst  <span class="g g-AnsiBrightBlue">doc</span>            <span class="g g-AnsiBrightBlue">plugins</span>        README.rst
COPYING           <span class="g g-AnsiBrightBlue">css</span>          <span class="g g-AnsiBrightBlue">documentation</span>  <span class="g g-AnsiBrightBlue">pelican-theme</span>  <span class="g g-AnsiBrightBlue">site</span></pre>
CONTRIBUTING.rst  CREDITS.rst  doc            plugins        README.rst
COPYING           css          documentation  pelican-theme  site

It’s some­times de­sir­able to have con­sole out­put wrapped to the avail­able con­tain­er width (like ter­min­als do). Add .m-console-wrap to the <pre> to achieve that ef­fect.

Code fig­ure

It of­ten hap­pens that you want to present code with cor­res­pond­ing res­ult to­geth­er. The code fig­ure looks sim­il­ar to im­age fig­ures and con­sists of a <figure> (or <div>) ele­ment with the .m-code-figure class con­tain­ing a <pre> block and whatever else you want to put in as the res­ult. The <pre> ele­ment has to be the very first child of the <figure> for the markup to work cor­rectly. Sim­il­arly to im­age fig­ure, you can ap­ply the .m-flat CSS class to re­move the bor­der, the <figcaption> ele­ment is styled as well.

Ex­ample (note that this page uses code fig­ure for all code ex­amples, so it’s a bit of a fig­ure in­cep­tion shown here):

<figure class="m-code-figure">
  <pre>Some
    code
snippet</pre>
  And a resulting output.
</figure>
Some
    code
snippet
And a resulting output.

It’s also pos­sible to have match­ing bor­der for a con­sole out­put. Just use .m-console-figure in­stead of .m-code-figure on the out­er ele­ment. For re­duced clut­ter when com­bin­ing a code fig­ure with con­sole out­put (and vice versa), mark the second <pre> with .m-nopad:

<figure class="m-code-figure">
    <pre class="m-code">Some
    code
snippet</pre>
    <pre class="m-console m-nopad">And a resulting output.</pre>
</figure>
Some
    code
snippet
And a resulting output.

Math

The latex2svg.py util­ity from tuxu/latex2s­vg can be used to gen­er­ate SVG rep­res­ent­a­tion of your LaTeX math for­mu­las. As­sum­ing you have some LaTeX dis­tri­bu­tion and dvis­vgm in­stalled, the us­age is:

echo "\$\$ a^2 = b^2 + c^2 \$\$" | python plugins/latex2svg.py > formula.svg

The formula.svg file will then con­tain the rendered for­mula, which with some minor patch­ing (re­mov­ing the XML pre­amble etc.) can be pas­ted dir­ectly in­to your HTML code. The <svg> ele­ment con­tain­ing math can be wrapped in <div class="m-math"> to make it centered. Sim­il­arly to code blocks, the math block shows a ho­ri­zont­al scroll­bar if the con­tent is too wide on nar­row screens. CSS col­or classes can be ap­plied to the <div>. It’s a good prac­tice to in­clude the <title> ele­ment for ac­cess­ib­il­ity reas­ons.

<div class="m-math m-success">
  <svg>
    <title>a^2 = b^2 + c^2</title>
    <g>...</g>
  </svg>
</div>
a^2 = b^2 + c^2

For in­line math, add the .m-math class to the <svg> tag dir­ectly. Note that you’ll prob­ably need to manu­ally spe­cify vertical-align style to make the for­mula align well with sur­round­ing text. You can use CSS col­or classes here as well. When us­ing the latex2svg.py util­ity, wrap the for­mula in $ in­stead of $$ to pro­duce in­line math; the depth value re­turned on stderr can be taken as a base for the vertical-align prop­erty.

<p>There is <a href="https://tauday.com/">a movement</a> for replacing circle
constant <svg class="m-math" style="vertical-align: 0.0pt">...</svg> with the
<svg class="m-math m-warning" style="vertical-align: 0.0pt">...</svg> character.

There is a movement for replacing circle constant 2 \pi with the \tau character.

The CSS col­or classes work also on <g> and <rect> ele­ments in­side <svg> for high­light­ing parts of for­mu­las.

Math fig­ure

Sim­il­arly to code fig­ure, math can be also put in a <figure> with as­signed cap­tion and de­scrip­tion. It be­haves the same as im­age fig­ures, the fig­ure width be­ing defined by the math equa­tion size. Cre­ate a <figure class="m-figure"> ele­ment and put <svg class="m-math"> as a first child. The re­main­ing con­tent of the fig­ure can be <figcaption> with op­tion­al div.m-figure-description same as with im­age fig­ures. Add the .m-flat class to the <figure> to re­move the out­er bor­der and equa­tion back­ground, CSS col­or classes on the <figure> af­fect the fig­ure, on the <svg> af­fect the equa­tion.

<figure class="m-figure">
  <svg class="m-math">
    <title>a^2 = b^2 + c^2</title>
    <g>...</g>
  </svg>
  <figcaption>
    Theorem
    <div class="m-figure-description">A Pythagorean one.</div>
  </figcaption>
</figure>
a^2 = b^2 + c^2
Theorem
A Pythagorean one.

Plots

Wrap a <svg> ele­ment in a <div class="m-plot"> to make it centered and oc­cupy­ing full width. Mark plot axes back­ground with .m-background, bars can be styled us­ing .m-bar and a cor­res­pond­ing CSS col­or class. Mark ticks and vari­ous oth­er lines with .m-line, er­ror bars with .m-error. Use <text class="m-label"> for tick and axes la­bels and <text class="m-title"> for graph title.

<div class="m-plot"><svg>
  <path d="M 68.22875 70.705312 ..." class="m-background"/>
  <path d="M 68.22875 29.116811 ..." class="m-bar m-warning"/>
  <path d="M 68.22875 51.121309 ..." class="m-bar m-primary"/>
  ...
  <defs><path d="..." id="mba4ce04b6c" class="m-line"/></defs>
  <use x="68.22875" xlink:href="#mba4ce04b6c" y="37.91861"/>
  <text class="m-label" style="text-anchor:end;" ...>Cheetah</text>
  ...
  <path d="M 428.616723 37.91861 ..." class="m-error"/>
  ...
  <text class="m-title" style="text-anchor:middle;" ...>Fastest animals</text>
</svg></div>
0 20 40 60 80 100 120 km/h Cheetah Pronghorn Fastest animals

Graphs

Wrap a <svg> ele­ment in a <div class="m-graph"> to make it centered and oc­cupy­ing full width at most. Wrap edge <path>, <polygon> and <text> ele­ments in <g class="m-edge"> to style them as edges, wrap node <polygon>, <ellipse> and <text> ele­ments in <g class="m-node"> to style them as nodes. You can use CSS col­or classes on either the wrap­per <div> or on the <g> to col­or the whole graph or its parts. Use .m-flat on a .m-node to make it just an out­line in­stead of filled.

<div class="m-graph m-info"><svg>
  <g class="m-node">
    <ellipse cx="27.5772" cy="-27.5772" rx="27.6545" ry="27.6545"/>
    <text text-anchor="middle" x="27.5772" y="-23.7772">yes</text>
  </g>
  <g class="m-node m-flat">
    <ellipse cx="134.9031" cy="-27.5772" rx="25" ry="25"/>
    <text text-anchor="middle" x="134.9031" y="-23.7772">no</text>
  </g>
  <g class="m-edge">
    <path d="M55.2163,-27.5772C68.8104,-27.5772 85.3444,-27.5772 99.8205,-27.5772"/>
    <polygon points="99.9261,-31.0773 109.9261,-27.5772 99.9261,-24.0773 99.9261,-31.0773"/>
    <text text-anchor="middle" x="82.6543" y="-32.7772">no</text>
  </g>
  <g class="m-edge m-dim">
    <path d="M125.3459,-50.4471C124.3033,-61.0564 127.489,-70.3259 134.9031,-70.3259 139.7685,-70.3259 142.813,-66.3338 144.0365,-60.5909"/>
    <polygon points="147.5398,-60.5845 144.4603,-50.4471 140.5459,-60.2923 147.5398,-60.5845"/>
    <text text-anchor="middle" x="134.9031" y="-75.5259">no</text>
  </g>
</svg></div>
FSM yes yes no no yes->no no no->no no

Graph fig­ure

Sim­il­arly to math fig­ure, graphs also can be <figure>s. The be­ha­vi­or is al­most identic­al, cre­ate a <figure class="m-figure m-graph"> ele­ment and put the <svg> as a first child and a <figcaption> right after.

<figure class="m-figure">
  <svg class="m-graph m-warning">
    ...
  </svg>
  <figcaption>
    Impenetrable logic
    <div class="m-figure-description">No.</div>
  </figcaption>
</figure>
FSM yes yes no no yes->no no no->no no
Impenetrable logic
No.

Pad­ding and float­ing

Sim­il­arly to ty­po­graphy ele­ments; blocks, notes, frames, tables, im­ages, fig­ures, im­age grids, code and math blocks and code fig­ures have 1rem pad­ding on the bot­tom, ex­cept when they are the last ele­ment, to avoid ex­cess­ive spa­cing. The list spe­cial cas­ing and abil­ity to dis­able the pad­ding us­ing .m-nopadb ap­plies here as well.

Com­pon­ents that ap­pear dir­ectly in a column that’s m-container-inflatable or dir­ectly in­side any nes­ted <section> are out­den­ted to pre­serve a straight line of text align­ment on the sides. You can spot that on this page — look how notes and fig­ures have their back­ground out­side. This also makes nar­row lay­outs bet­ter read­able, as the com­pon­ent visu­als don’t cut in­to pre­cious screen width.

All com­pon­ents sup­port the float­ing classes from the grid sys­tem, how­ever hav­ing float­ing ele­ments in­side the com­pon­ents is not sup­por­ted. Float­ing ele­ments also pre­serve the in­flat­able be­ha­vi­or de­scribed above.

Re­spons­ive util­it­ies

If you have some ele­ment that will cer­tainly over­flow on smal­ler screen sizes (such as wide table or im­age that can’t be scaled), wrap it in a .m-scroll. This will put a ho­ri­zont­al scroll­bar un­der in case the ele­ment over­flows.

There’s also .m-fullwidth that will make your ele­ment al­ways oc­cupy 100% of the par­ent ele­ment width. Use­ful for tables or im­ages.