yogsototh/brutcss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
brutcss/_site/h/docs.html
Yann Esposito (Yogsototh) 12a5979cb4
still minor changes
2024-08-17 07:31:14 +02:00

1196 lines
No EOL
67 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT - documentation</title><link href="../brut.min.css" rel="stylesheet" type="text/css" /></head><body class="col"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="../index.html">BRUT</a><a href="../h/docs.html">Docs</a><a href="../h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div class="container"><h1>Documentation</h1><p>Here a bunch of examples with their source code to make them happen.</p><div class="col"><h2 id="Textual content"><a href="#Textual content"><i class="ico">[§]</i></a> Textual content</h2><div class="row"><div class="col card c6"><div class="inner" id="text"><h1>title in h1</h1><div class="content"><p>Some text in &lt;p&gt; with different styles; <b>bold</b>, <strong>strong</strong>, <i>italic</i>, <em>emphasis</em>, <code>code</code>. If you really want something to be extremly visible, <strong class="hl">use the class <code class="hl">hl</code></strong>.</p><p>Links will looks like this into text: <a href="#">This is a link inside a paragraph.</a></p><p>The text should be <strong class="hl">very dense</strong> on purpose. Forget your lessons about nice space in design here. The goal of this design is to produce <em>professional</em> UI applications. So no time to make it breathes. We want to make it compact and efficient.</p><p>Note we still try to keep a coherent and nice vertical rythm.</p><blockquote><p>Here is some blockquote. This can give you an idea about the look and feel for them.</p></blockquote></div></div><br /><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot; id=&quot;text&quot;&gt;
&lt;h1&gt;title in h1&lt;/h1&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;p&gt;Some text in &amp;lt;p&amp;gt; with different styles; &lt;b&gt;bold&lt;/b&gt;,
&lt;strong&gt;strong&lt;/strong&gt;, &lt;i&gt;italic&lt;/i&gt;, &lt;em&gt;emphasis&lt;/em&gt;,
&lt;code&gt;code&lt;/code&gt;. If you really want something to be
extremly visible, &lt;strong class=&quot;hl&quot;&gt;use the class
&lt;code class=&quot;hl&quot;&gt;hl&lt;/code&gt;&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Links will looks like this into text: &lt;a href=&quot;#&quot;&gt;This is
a link inside a paragraph.&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;The text should be &lt;strong class=&quot;hl&quot;&gt;very dense&lt;/strong&gt;
on purpose. Forget your lessons about nice space in design
here. The goal of this design is to produce
&lt;em&gt;professional&lt;/em&gt; UI applications. So no time to make it
breathes. We want to make it compact and efficient.&lt;/p&gt;
&lt;p&gt;Note we still try to keep a coherent and nice vertical
rythm.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Here is some blockquote. This can give you an idea about
the look and feel for them.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div><div class="col card c6"><div class="inner"><h3>doc class</h3><div class="content" id="doc"><p>Remark if you need to present a long text to read you can still use the class <code>doc</code>. Take a look at the next paragraph for example: </p><div class="doc"><p>This is a doc block.</p><p>Lorem ipsum with pretty Lorem ipsum dolor sit amet consectetur adipiscing elit, urna consequat felis vehicula class ultricies mollis dictumst, aenean non a in donec nulla. Phasellus ante pellentesque erat cum risus consequat imperdiet aliquam, integer placerat et turpis mi eros nec lobortis taciti, vehicula nisl litora tellus ligula porttitor metus.</p><p>Vivamus integer non suscipit taciti mus etiam at primis tempor sagittis sit, euismod libero facilisi aptent elementum felis blandit cursus gravida sociis erat ante, eleifend lectus nullam dapibus netus feugiat curae curabitur est ad. Massa curae fringilla porttitor quam sollicitudin iaculis aptent leo ligula euismod dictumst, orci penatibus mauris eros etiam praesent erat volutpat posuere hac. Metus fringilla nec ullamcorper odio aliquam lacinia conubia mauris tempor, etiam ultricies proin quisque lectus sociis id tristique, integer phasellus taciti pretium adipiscing tortor sagittis ligula.</p></div><p>The <code>doc</code> class ensure the width of the text is not too wide and use a very legible font.</p></div></div><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot;&gt;
&lt;h3&gt;doc class&lt;/h3&gt;
&lt;div class=&quot;content&quot; id=&quot;doc&quot;&gt;
&lt;p&gt;Remark if you need to present a long text to read you can
still use the class &lt;code&gt;doc&lt;/code&gt;. Take a look at the next
paragraph for example:&lt;/p&gt;
&lt;div class=&quot;doc&quot;&gt;
&lt;p&gt;This is a doc block.&lt;/p&gt;
&lt;p&gt;Lorem ipsum with pretty Lorem ipsum dolor sit amet
consectetur adipiscing elit, urna consequat felis vehicula
class ultricies mollis dictumst, aenean non a in donec
nulla. Phasellus ante pellentesque erat cum risus consequat
imperdiet aliquam, integer placerat et turpis mi eros nec
lobortis taciti, vehicula nisl litora tellus ligula
porttitor metus.&lt;/p&gt;
&lt;p&gt;Vivamus integer non suscipit taciti mus etiam at primis
tempor sagittis sit, euismod libero facilisi aptent
elementum felis blandit cursus gravida sociis erat ante,
eleifend lectus nullam dapibus netus feugiat curae
curabitur est ad. Massa curae fringilla porttitor quam
sollicitudin iaculis aptent leo ligula euismod dictumst,
orci penatibus mauris eros etiam praesent erat volutpat
posuere hac. Metus fringilla nec ullamcorper odio aliquam
lacinia conubia mauris tempor, etiam ultricies proin
quisque lectus sociis id tristique, integer phasellus
taciti pretium adipiscing tortor sagittis ligula.&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;The &lt;code&gt;doc&lt;/code&gt; class ensure the width of the text is
not too wide and use a very legible font.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div><div class="row"><div class="col card c6"><div class="inner"><h3>headings</h3><div class="content"><p>By default there is some space before and after any heading:</p></div><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><h3>tight headings</h3><div class="content"><p>You can remove the space by using the class <code>tight</code> to the heading:</p></div><h1 class="tight">h1 tight</h1><h2 class="tight">h2 tight</h2><h3 class="tight">h3 tight</h3><h4 class="tight">h4 tight</h4><h5 class="tight">h5 tight</h5><h6 class="tight">h6 tight</h6></div><br /><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot;&gt;
&lt;h3&gt;headings&lt;/h3&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;p&gt;By default there is some space before and after any
heading:&lt;/p&gt;
&lt;/div&gt;
&lt;h1&gt;h1&lt;/h1&gt;
&lt;h2&gt;h2&lt;/h2&gt;
&lt;h3&gt;h3&lt;/h3&gt;
&lt;h4&gt;h4&lt;/h4&gt;
&lt;h5&gt;h5&lt;/h5&gt;
&lt;h6&gt;h6&lt;/h6&gt;
&lt;h3&gt;tight headings&lt;/h3&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;p&gt;You can remove the space by using the class
&lt;code&gt;tight&lt;/code&gt; to the heading:&lt;/p&gt;
&lt;/div&gt;
&lt;h1 class=&quot;tight&quot;&gt;h1 tight&lt;/h1&gt;
&lt;h2 class=&quot;tight&quot;&gt;h2 tight&lt;/h2&gt;
&lt;h3 class=&quot;tight&quot;&gt;h3 tight&lt;/h3&gt;
&lt;h4 class=&quot;tight&quot;&gt;h4 tight&lt;/h4&gt;
&lt;h5 class=&quot;tight&quot;&gt;h5 tight&lt;/h5&gt;
&lt;h6 class=&quot;tight&quot;&gt;h6 tight&lt;/h6&gt;
&lt;/div&gt;
</pre></details></div><div class="col card c6"><div class="inner" id="itemize"><h2>itemization</h2><div class="content"><h3>ul</h3><ul><li>item 1</li><li>item 2</li><li>item 3; with a very long text that should wrap to the next line in any browser. We&apos;ll see that the wrapped text should be aligned with the text of the other items. This is due to the <code>list-style-position: outside</code>.</li><li>item 4</li></ul><h3>ol</h3><ol><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li></ol></div></div><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot; id=&quot;itemize&quot;&gt;
&lt;h2&gt;itemization&lt;/h2&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;h3&gt;ul&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;item 1&lt;/li&gt;
&lt;li&gt;item 2&lt;/li&gt;
&lt;li&gt;item 3; with a very long text that should wrap to the
next line in any browser. We&apos;ll see that the wrapped text
should be aligned with the text of the other items. This is
due to the &lt;code&gt;list-style-position: outside&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;item 4&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;ol&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;item 1&lt;/li&gt;
&lt;li&gt;item 2&lt;/li&gt;
&lt;li&gt;item 3&lt;/li&gt;
&lt;li&gt;item 4&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2 id="Grid"><a href="#Grid"><i class="ico">[§]</i></a> Grid</h2><div class="row"><div class="col card c6"><div class="inner"><h3>With default gap</h3><div class="content"><div class="row"><div class="bg-neutral c11">c11</div><div class="y c1">c1</div></div><div class="row"><div class="bg-neutral c10">c10</div><div class="y c2">c2</div></div><div class="row"><div class="bg-neutral c9">c9</div><div class="y c3">c3</div></div><div class="row"><div class="bg-neutral c8">c8</div><div class="y c4">c4</div></div><div class="row"><div class="bg-neutral c7">c7</div><div class="y c5">c5</div></div><div class="row"><div class="bg-neutral c6">c6</div><div class="y c6">c6</div></div><div class="row"><div class="bg-neutral c5">c5</div><div class="y c7">c7</div></div><div class="row"><div class="bg-neutral c4">c4</div><div class="y c8">c8</div></div><div class="row"><div class="bg-neutral c3">c3</div><div class="y c9">c9</div></div><div class="row"><div class="bg-neutral c2">c2</div><div class="y c10">c10</div></div><div class="row"><div class="bg-neutral c1">c1</div><div class="y c11">c11</div></div></div></div><br /><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot;&gt;
&lt;h3&gt;With default gap&lt;/h3&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c11&quot;&gt;
c11
&lt;/div&gt;
&lt;div class=&quot;y c1&quot;&gt;
c1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c10&quot;&gt;
c10
&lt;/div&gt;
&lt;div class=&quot;y c2&quot;&gt;
c2
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c9&quot;&gt;
c9
&lt;/div&gt;
&lt;div class=&quot;y c3&quot;&gt;
c3
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c8&quot;&gt;
c8
&lt;/div&gt;
&lt;div class=&quot;y c4&quot;&gt;
c4
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c7&quot;&gt;
c7
&lt;/div&gt;
&lt;div class=&quot;y c5&quot;&gt;
c5
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c6&quot;&gt;
c6
&lt;/div&gt;
&lt;div class=&quot;y c6&quot;&gt;
c6
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;y c7&quot;&gt;
c7
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;y c8&quot;&gt;
c8
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;y c9&quot;&gt;
c9
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;y c10&quot;&gt;
c10
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;bg-neutral c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;y c11&quot;&gt;
c11
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div><div class="col card c6"><div class="inner"><h3>Gapless</h3><div class="content"><div class="row gapless"><div class="bg-neutral c11">c11</div><div class="y c1">c1</div></div><div class="row gapless"><div class="bg-neutral c10">c10</div><div class="y c2">c2</div></div><div class="row gapless"><div class="bg-neutral c9">c9</div><div class="y c3">c3</div></div><div class="row gapless"><div class="bg-neutral c8">c8</div><div class="y c4">c4</div></div><div class="row gapless"><div class="bg-neutral c7">c7</div><div class="y c5">c5</div></div><div class="row gapless"><div class="bg-neutral c6">c6</div><div class="y c6">c6</div></div><div class="row gapless"><div class="bg-neutral c5">c5</div><div class="y c7">c7</div></div><div class="row gapless"><div class="bg-neutral c4">c4</div><div class="y c8">c8</div></div><div class="row gapless"><div class="bg-neutral c3">c3</div><div class="y c9">c9</div></div><div class="row gapless"><div class="bg-neutral c2">c2</div><div class="y c10">c10</div></div><div class="row gapless"><div class="bg-neutral c1">c1</div><div class="y c11">c11</div></div></div></div><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot;&gt;
&lt;h3&gt;Gapless&lt;/h3&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;div class=&quot;row gapless&quot;&gt;
&lt;div class=&quot;bg-neutral c11&quot;&gt;
c11
&lt;/div&gt;
&lt;div class=&quot;y c1&quot;&gt;
c1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row gapless&quot;&gt;
&lt;div class=&quot;bg-neutral c10&quot;&gt;
c10
&lt;/div&gt;
&lt;div class=&quot;y c2&quot;&gt;
c2
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row gapless&quot;&gt;
&lt;div class=&quot;bg-neutral c9&quot;&gt;
c9
&lt;/div&gt;
&lt;div class=&quot;y c3&quot;&gt;
c3
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row gapless&quot;&gt;
&lt;div class=&quot;bg-neutral c8&quot;&gt;
c8
&lt;/div&gt;
&lt;div class=&quot;y c4&quot;&gt;
c4
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row gapless&quot;&gt;
&lt;div class=&quot;bg-neutral c7&quot;&gt;
c7
&lt;/div&gt;
&lt;div class=&quot;y c5&quot;&gt;
c5
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row gapless&quot;&gt;
&lt;div class=&quot;bg-neutral c6&quot;&gt;
c6
&lt;/div&gt;
&lt;div class=&quot;y c6&quot;&gt;
c6
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row gapless&quot;&gt;
&lt;div class=&quot;bg-neutral c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;y c7&quot;&gt;
c7
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row gapless&quot;&gt;
&lt;div class=&quot;bg-neutral c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;y c8&quot;&gt;
c8
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row gapless&quot;&gt;
&lt;div class=&quot;bg-neutral c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;y c9&quot;&gt;
c9
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row gapless&quot;&gt;
&lt;div class=&quot;bg-neutral c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;y c10&quot;&gt;
c10
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row gapless&quot;&gt;
&lt;div class=&quot;bg-neutral c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;y c11&quot;&gt;
c11
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div><div class="row"><div class="col card c6"><div class="inner"><h3>3 columns</h3><div class="content"><br /><div class="row"><div class="b c1">c1</div><div class="bg-neutral c10">c10</div><div class="r c1">c1</div></div><br /><div class="row"><div class="b c2">c2</div><div class="bg-neutral c9">c9</div><div class="r c1">c1</div></div><div class="row"><div class="b c1">c1</div><div class="bg-neutral c9">c9</div><div class="r c2">c2</div></div><br /><div class="row"><div class="b c3">c3</div><div class="bg-neutral c8">c8</div><div class="r c1">c1</div></div><div class="row"><div class="b c2">c2</div><div class="bg-neutral c8">c8</div><div class="r c2">c2</div></div><div class="row"><div class="b c1">c1</div><div class="bg-neutral c8">c8</div><div class="r c3">c3</div></div><br /><div class="row"><div class="b c4">c4</div><div class="bg-neutral c7">c7</div><div class="r c1">c1</div></div><div class="row"><div class="b c3">c3</div><div class="bg-neutral c7">c7</div><div class="r c2">c2</div></div><div class="row"><div class="b c2">c2</div><div class="bg-neutral c7">c7</div><div class="r c3">c3</div></div><div class="row"><div class="b c1">c1</div><div class="bg-neutral c7">c7</div><div class="r c4">c4</div></div><br /><div class="row"><div class="b c5">c5</div><div class="bg-neutral c6">c6</div><div class="r c1">c1</div></div><div class="row"><div class="b c4">c4</div><div class="bg-neutral c6">c6</div><div class="r c2">c2</div></div><div class="row"><div class="b c3">c3</div><div class="bg-neutral c6">c6</div><div class="r c3">c3</div></div><div class="row"><div class="b c2">c2</div><div class="bg-neutral c6">c6</div><div class="r c4">c4</div></div><div class="row"><div class="b c1">c1</div><div class="bg-neutral c6">c6</div><div class="r c5">c5</div></div><br /><div class="row"><div class="b c6">c6</div><div class="bg-neutral c5">c5</div><div class="r c1">c1</div></div><div class="row"><div class="b c5">c5</div><div class="bg-neutral c5">c5</div><div class="r c2">c2</div></div><div class="row"><div class="b c4">c4</div><div class="bg-neutral c5">c5</div><div class="r c3">c3</div></div><div class="row"><div class="b c3">c3</div><div class="bg-neutral c5">c5</div><div class="r c4">c4</div></div><div class="row"><div class="b c2">c2</div><div class="bg-neutral c5">c5</div><div class="r c5">c5</div></div><div class="row"><div class="b c1">c1</div><div class="bg-neutral c5">c5</div><div class="r c6">c6</div></div><br /><div class="row"><div class="b c7">c7</div><div class="bg-neutral c4">c4</div><div class="r c1">c1</div></div><div class="row"><div class="b c6">c6</div><div class="bg-neutral c4">c4</div><div class="r c2">c2</div></div><div class="row"><div class="b c5">c5</div><div class="bg-neutral c4">c4</div><div class="r c3">c3</div></div><div class="row"><div class="b c4">c4</div><div class="bg-neutral c4">c4</div><div class="r c4">c4</div></div><div class="row"><div class="b c3">c3</div><div class="bg-neutral c4">c4</div><div class="r c5">c5</div></div><div class="row"><div class="b c2">c2</div><div class="bg-neutral c4">c4</div><div class="r c6">c6</div></div><div class="row"><div class="b c1">c1</div><div class="bg-neutral c4">c4</div><div class="r c7">c7</div></div><br /><div class="row"><div class="b c8">c8</div><div class="bg-neutral c3">c3</div><div class="r c1">c1</div></div><div class="row"><div class="b c7">c7</div><div class="bg-neutral c3">c3</div><div class="r c2">c2</div></div><div class="row"><div class="b c6">c6</div><div class="bg-neutral c3">c3</div><div class="r c3">c3</div></div><div class="row"><div class="b c5">c5</div><div class="bg-neutral c3">c3</div><div class="r c4">c4</div></div><div class="row"><div class="b c4">c4</div><div class="bg-neutral c3">c3</div><div class="r c5">c5</div></div><div class="row"><div class="b c3">c3</div><div class="bg-neutral c3">c3</div><div class="r c6">c6</div></div><div class="row"><div class="b c2">c2</div><div class="bg-neutral c3">c3</div><div class="r c7">c7</div></div><div class="row"><div class="b c1">c1</div><div class="bg-neutral c3">c3</div><div class="r c8">c8</div></div><br /><div class="row"><div class="b c9">c9</div><div class="bg-neutral c2">c2</div><div class="r c1">c1</div></div><div class="row"><div class="b c8">c8</div><div class="bg-neutral c2">c2</div><div class="r c2">c2</div></div><div class="row"><div class="b c7">c7</div><div class="bg-neutral c2">c2</div><div class="r c3">c3</div></div><div class="row"><div class="b c6">c6</div><div class="bg-neutral c2">c2</div><div class="r c4">c4</div></div><div class="row"><div class="b c5">c5</div><div class="bg-neutral c2">c2</div><div class="r c5">c5</div></div><div class="row"><div class="b c4">c4</div><div class="bg-neutral c2">c2</div><div class="r c6">c6</div></div><div class="row"><div class="b c3">c3</div><div class="bg-neutral c2">c2</div><div class="r c7">c7</div></div><div class="row"><div class="b c2">c2</div><div class="bg-neutral c2">c2</div><div class="r c8">c8</div></div><div class="row"><div class="b c1">c1</div><div class="bg-neutral c2">c2</div><div class="r c9">c9</div></div><br /><div class="row"><div class="b c10">c10</div><div class="bg-neutral c1">c1</div><div class="r c1">c1</div></div><div class="row"><div class="b c9">c9</div><div class="bg-neutral c1">c1</div><div class="r c2">c2</div></div><div class="row"><div class="b c8">c8</div><div class="bg-neutral c1">c1</div><div class="r c3">c3</div></div><div class="row"><div class="b c7">c7</div><div class="bg-neutral c1">c1</div><div class="r c4">c4</div></div><div class="row"><div class="b c6">c6</div><div class="bg-neutral c1">c1</div><div class="r c5">c5</div></div><div class="row"><div class="b c5">c5</div><div class="bg-neutral c1">c1</div><div class="r c6">c6</div></div><div class="row"><div class="b c4">c4</div><div class="bg-neutral c1">c1</div><div class="r c7">c7</div></div><div class="row"><div class="b c3">c3</div><div class="bg-neutral c1">c1</div><div class="r c8">c8</div></div><div class="row"><div class="b c2">c2</div><div class="bg-neutral c1">c1</div><div class="r c9">c9</div></div><div class="row"><div class="b c1">c1</div><div class="bg-neutral c1">c1</div><div class="r c10">c10</div></div><br /></div></div><br /><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot;&gt;
&lt;h3&gt;3 columns&lt;/h3&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;br&gt;&lt;/br&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c10&quot;&gt;
c10
&lt;/div&gt;
&lt;div class=&quot;r c1&quot;&gt;
c1
&lt;/div&gt;
&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c9&quot;&gt;
c9
&lt;/div&gt;
&lt;div class=&quot;r c1&quot;&gt;
c1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c9&quot;&gt;
c9
&lt;/div&gt;
&lt;div class=&quot;r c2&quot;&gt;
c2
&lt;/div&gt;
&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c8&quot;&gt;
c8
&lt;/div&gt;
&lt;div class=&quot;r c1&quot;&gt;
c1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c8&quot;&gt;
c8
&lt;/div&gt;
&lt;div class=&quot;r c2&quot;&gt;
c2
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c8&quot;&gt;
c8
&lt;/div&gt;
&lt;div class=&quot;r c3&quot;&gt;
c3
&lt;/div&gt;
&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c7&quot;&gt;
c7
&lt;/div&gt;
&lt;div class=&quot;r c1&quot;&gt;
c1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c7&quot;&gt;
c7
&lt;/div&gt;
&lt;div class=&quot;r c2&quot;&gt;
c2
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c7&quot;&gt;
c7
&lt;/div&gt;
&lt;div class=&quot;r c3&quot;&gt;
c3
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c7&quot;&gt;
c7
&lt;/div&gt;
&lt;div class=&quot;r c4&quot;&gt;
c4
&lt;/div&gt;
&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c6&quot;&gt;
c6
&lt;/div&gt;
&lt;div class=&quot;r c1&quot;&gt;
c1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c6&quot;&gt;
c6
&lt;/div&gt;
&lt;div class=&quot;r c2&quot;&gt;
c2
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c6&quot;&gt;
c6
&lt;/div&gt;
&lt;div class=&quot;r c3&quot;&gt;
c3
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c6&quot;&gt;
c6
&lt;/div&gt;
&lt;div class=&quot;r c4&quot;&gt;
c4
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c6&quot;&gt;
c6
&lt;/div&gt;
&lt;div class=&quot;r c5&quot;&gt;
c5
&lt;/div&gt;
&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c6&quot;&gt;
c6
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;r c1&quot;&gt;
c1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;r c2&quot;&gt;
c2
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;r c3&quot;&gt;
c3
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;r c4&quot;&gt;
c4
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;r c5&quot;&gt;
c5
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;r c6&quot;&gt;
c6
&lt;/div&gt;
&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c7&quot;&gt;
c7
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;r c1&quot;&gt;
c1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c6&quot;&gt;
c6
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;r c2&quot;&gt;
c2
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;r c3&quot;&gt;
c3
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;r c4&quot;&gt;
c4
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;r c5&quot;&gt;
c5
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;r c6&quot;&gt;
c6
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;r c7&quot;&gt;
c7
&lt;/div&gt;
&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c8&quot;&gt;
c8
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;r c1&quot;&gt;
c1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c7&quot;&gt;
c7
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;r c2&quot;&gt;
c2
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c6&quot;&gt;
c6
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;r c3&quot;&gt;
c3
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;r c4&quot;&gt;
c4
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;r c5&quot;&gt;
c5
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;r c6&quot;&gt;
c6
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;r c7&quot;&gt;
c7
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;r c8&quot;&gt;
c8
&lt;/div&gt;
&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c9&quot;&gt;
c9
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;r c1&quot;&gt;
c1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c8&quot;&gt;
c8
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;r c2&quot;&gt;
c2
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c7&quot;&gt;
c7
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;r c3&quot;&gt;
c3
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c6&quot;&gt;
c6
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;r c4&quot;&gt;
c4
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;r c5&quot;&gt;
c5
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;r c6&quot;&gt;
c6
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;r c7&quot;&gt;
c7
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;r c8&quot;&gt;
c8
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;r c9&quot;&gt;
c9
&lt;/div&gt;
&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c10&quot;&gt;
c10
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;r c1&quot;&gt;
c1
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c9&quot;&gt;
c9
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;r c2&quot;&gt;
c2
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c8&quot;&gt;
c8
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;r c3&quot;&gt;
c3
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c7&quot;&gt;
c7
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;r c4&quot;&gt;
c4
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c6&quot;&gt;
c6
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;r c5&quot;&gt;
c5
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c5&quot;&gt;
c5
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;r c6&quot;&gt;
c6
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c4&quot;&gt;
c4
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;r c7&quot;&gt;
c7
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c3&quot;&gt;
c3
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;r c8&quot;&gt;
c8
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c2&quot;&gt;
c2
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;r c9&quot;&gt;
c9
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;b c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;bg-neutral c1&quot;&gt;
c1
&lt;/div&gt;
&lt;div class=&quot;r c10&quot;&gt;
c10
&lt;/div&gt;
&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2 id="Images"><a href="#Images"><i class="ico">[§]</i></a> Images</h2><div class="row"><div class="col card c6"><div class="inner" id="images"><h1>Images</h1><div class="block"><div class="row"><div class="card"><h3>Inside a card</h3><div class="content"><img src="../h/img/brutalism.webp" /></div></div><div class="block"><h3>Inside a block</h3><div class="content"><img src="../h/img/brutalism.webp" /></div></div><div><h3>Directly in the column</h3><img src="../h/img/brutalism.webp" /></div></div></div></div><br /><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot; id=&quot;images&quot;&gt;
&lt;h1&gt;Images&lt;/h1&gt;
&lt;div class=&quot;block&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;card&quot;&gt;
&lt;h3&gt;Inside a card&lt;/h3&gt;
&lt;div class=&quot;content&quot;&gt;&lt;img src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/img&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;block&quot;&gt;
&lt;h3&gt;Inside a block&lt;/h3&gt;
&lt;div class=&quot;content&quot;&gt;&lt;img src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/img&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h3&gt;Directly in the column&lt;/h3&gt;&lt;img src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/img&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div><div class="col card c6"><div class="inner" id="figure"><h1>figure</h1><div class="row"><figure><img alt="an image" src="../h/img/brutalism.webp" /><figcaption>figcaption after</figcaption></figure><figure><figcaption>figcaption before</figcaption><img alt="another image" src="../h/img/brutalism.webp" /></figure></div></div><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot; id=&quot;figure&quot;&gt;
&lt;h1&gt;figure&lt;/h1&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;figure&gt;
&lt;img alt=&quot;an image&quot; src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/img&gt;
&lt;figcaption&gt;
figcaption after
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure&gt;
&lt;figcaption&gt;
figcaption before
&lt;/figcaption&gt;&lt;img alt=&quot;another image&quot; src=&quot;../h/img/brutalism.webp&quot;&gt;&lt;/img&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2 id="icons"><a href="#icons"><i class="ico">[§]</i></a> icons</h2><div class="row"><div class="col card c6"><div class="inner col start"><h4>Safe</h4><div class="content"><i class="ico big">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
</i><div class="msg push"><p>The &quot;Safe&quot; icons should work almost everywhere.</p><p><span>Inserting </span><i class="ico">☎</i> <span>in </span><i class="ico">♂</i> <span>the </span><i class="ico">♀</i> <span>middle </span><i class="ico">ⓧ</i> <span>of </span><i class="ico">©</i> <span>some </span><i class="ico">§</i> <span>text </span><i class="ico">®</i> <span>to </span><i class="ico">⇦</i> <span>check </span><i class="ico">⇧</i> <span>the </span><i class="ico">⇨</i> <span>size. </span><i class="ico">⇩</i> <span>Now </span><i class="ico">♠</i> <span>this </span><i class="ico">♣</i> <span>should </span><i class="ico">♥</i> <span>give </span><i class="ico">♦</i> <span>an </span><i class="ico">♪</i> <span>idea </span><i class="ico">♛</i> <span>about </span><i class="ico">♜</i> <span>the </span><i class="ico">♝</i> <span>size </span><i class="ico">♞</i> <span>relatively </span><i class="ico">♟</i> <span>to </span><i class="ico">☜</i> <span>the </span><i class="ico">☞</i> <span>text. </span><i class="ico">♨</i> <span>Hmmm </span><i class="ico">♭</i> <span>this </span><i class="ico">♯</i> <span>is </span><i class="ico">￥</i> <span>quite </span><i class="ico">￡</i> <span>long </span><i class="ico">￠</i> <span>and </span><i class="ico">❊</i> <span>boring </span><i class="ico">฿</i> <span>to </span><i class="ico">๏</i> <span>write </span><i class="ico">※</i> <span>text </span><i class="ico">₧</i> <span>in </span><i class="ico">₨</i> <span>between </span><i class="ico">₪</i> <span>like </span><i class="ico">€</i> <span>that! </span><i class="ico">№</i> </p></div></div></div><br /><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner col start&quot;&gt;
&lt;h4&gt;Safe&lt;/h4&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;i class=&quot;ico big&quot;&gt;☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜
☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №&lt;/i&gt;
&lt;div class=&quot;msg push&quot;&gt;
&lt;p&gt;The &quot;Safe&quot; icons should work almost everywhere.&lt;/p&gt;
&lt;p&gt;&lt;span&gt;Inserting&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;☎&lt;/i&gt;
&lt;span&gt;in&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;♂&lt;/i&gt; &lt;span&gt;the&lt;/span&gt;
&lt;i class=&quot;ico&quot;&gt;♀&lt;/i&gt; &lt;span&gt;middle&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;ⓧ&lt;/i&gt; &lt;span&gt;of&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;©&lt;/i&gt;
&lt;span&gt;some&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;§&lt;/i&gt; &lt;span&gt;text&lt;/span&gt;
&lt;i class=&quot;ico&quot;&gt;®&lt;/i&gt; &lt;span&gt;to&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;⇦&lt;/i&gt;
&lt;span&gt;check&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;⇧&lt;/i&gt; &lt;span&gt;the&lt;/span&gt;
&lt;i class=&quot;ico&quot;&gt;⇨&lt;/i&gt; &lt;span&gt;size.&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;⇩&lt;/i&gt; &lt;span&gt;Now&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;♠&lt;/i&gt;
&lt;span&gt;this&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;♣&lt;/i&gt; &lt;span&gt;should&lt;/span&gt;
&lt;i class=&quot;ico&quot;&gt;♥&lt;/i&gt; &lt;span&gt;give&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;♦&lt;/i&gt;
&lt;span&gt;an&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;♪&lt;/i&gt; &lt;span&gt;idea&lt;/span&gt;
&lt;i class=&quot;ico&quot;&gt;♛&lt;/i&gt; &lt;span&gt;about&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;♜&lt;/i&gt; &lt;span&gt;the&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;♝&lt;/i&gt;
&lt;span&gt;size&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;♞&lt;/i&gt;
&lt;span&gt;relatively&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;♟&lt;/i&gt;
&lt;span&gt;to&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;☜&lt;/i&gt; &lt;span&gt;the&lt;/span&gt;
&lt;i class=&quot;ico&quot;&gt;☞&lt;/i&gt; &lt;span&gt;text.&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;♨&lt;/i&gt; &lt;span&gt;Hmmm&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;♭&lt;/i&gt;
&lt;span&gt;this&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;♯&lt;/i&gt; &lt;span&gt;is&lt;/span&gt;
&lt;i class=&quot;ico&quot;&gt;￥&lt;/i&gt; &lt;span&gt;quite&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;￡&lt;/i&gt; &lt;span&gt;long&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;￠&lt;/i&gt;
&lt;span&gt;and&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;❊&lt;/i&gt; &lt;span&gt;boring&lt;/span&gt;
&lt;i class=&quot;ico&quot;&gt;฿&lt;/i&gt; &lt;span&gt;to&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;๏&lt;/i&gt;
&lt;span&gt;write&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;※&lt;/i&gt; &lt;span&gt;text&lt;/span&gt;
&lt;i class=&quot;ico&quot;&gt;₧&lt;/i&gt; &lt;span&gt;in&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;₨&lt;/i&gt;
&lt;span&gt;between&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;₪&lt;/i&gt; &lt;span&gt;like&lt;/span&gt;
&lt;i class=&quot;ico&quot;&gt;€&lt;/i&gt; &lt;span&gt;that!&lt;/span&gt; &lt;i class=&quot;ico&quot;&gt;№&lt;/i&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div><div class="col card c6"><div class="inner col start"><h4>Total Set</h4><div class="content"><i class="ico big">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
</i><div class="msg">Just a bunch of a few more unicode icons.</div></div></div><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner col start&quot;&gt;
&lt;h4&gt;Total Set&lt;/h4&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;i class=&quot;ico big&quot;&gt;✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘
⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩&lt;/i&gt;
&lt;div class=&quot;msg&quot;&gt;
Just a bunch of a few more unicode icons.
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2 id="Forms"><a href="#Forms"><i class="ico">[§]</i></a> Forms</h2><div class="row"><div class="col card c6"><div class="content"><label for="example1"></label><input id="example1" placeholder="text input" type="text" /><br /><br /><label for="textarea1"></label><textarea cols="30" id="textarea1" placeholder="textarea" rows="3"></textarea><br /><br /><div class="form-block"><span class="addon info">$</span><input placeholder="with addon" type="text" /></div><br /><br /><div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code>&lt;span&gt;</code> and <code>&lt;input&gt;</code> tags. Example: <pre>... &lt;/span&gt;<span class="hl"> </span>&lt;input ...</pre><div class="form-block"><span class="addon">$</span> <input class="smooth" type="text" /></div><pre>... &lt;/span&gt;&lt;input ...</pre><div class="form-block"><span class="addon">$</span><input class="smooth" type="text" /></div></div></div><br /><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;content&quot;&gt;
&lt;input id=&quot;example1&quot; placeholder=&quot;text input&quot; type=&quot;text&quot;&gt;&lt;/input&gt;&lt;br&gt;&lt;/br&gt;
&lt;br&gt;&lt;/br&gt;
&lt;textarea cols=&quot;30&quot; id=&quot;textarea1&quot; placeholder=&quot;textarea&quot; rows=&quot;3&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;/br&gt;
&lt;br&gt;&lt;/br&gt;
&lt;div class=&quot;form-block&quot;&gt;
&lt;span class=&quot;addon info&quot;&gt;$&lt;/span&gt;&lt;input placeholder=&quot;with addon&quot; type=&quot;text&quot;&gt;&lt;/input&gt;
&lt;/div&gt;&lt;br&gt;&lt;/br&gt;
&lt;br&gt;&lt;/br&gt;
&lt;div class=&quot;msg&quot;&gt;
&lt;strong&gt;Be careful with addons!&lt;/strong&gt; If you do not want a
space between the addon and the input make sure that there is
no space between the &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; and
&lt;code&gt;&amp;lt;input&amp;gt;&lt;/code&gt; tags. Example:
&lt;pre&gt;... &amp;lt;/span&amp;gt;&lt;span class=&quot;hl&quot;&gt; &lt;/span&gt;&amp;lt;input ...&lt;/pre&gt;
&lt;div class=&quot;form-block&quot;&gt;
&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt; &lt;input class=&quot;smooth&quot; type=&quot;text&quot;&gt;&lt;/input&gt;
&lt;/div&gt;
&lt;pre&gt;... &amp;lt;/span&amp;gt;&amp;lt;input ...&lt;/pre&gt;
&lt;div class=&quot;form-block&quot;&gt;
&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;&lt;input class=&quot;smooth&quot; type=&quot;text&quot;&gt;&lt;/input&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2 id="Tables"><a href="#Tables"><i class="ico">[§]</i></a> Tables</h2><div class="row"><div class="col card c6"><table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table><br /><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;table class=&quot;table&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;#&lt;/th&gt;
&lt;th&gt;Widgets Sold&lt;/th&gt;
&lt;th&gt;Revenue (£)&lt;/th&gt;
&lt;th&gt;Profit (£)&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;5&lt;/td&gt;
&lt;td&gt;10&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;10&lt;/td&gt;
&lt;td&gt;20&lt;/td&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;500&lt;/td&gt;
&lt;td&gt;1000&lt;/td&gt;
&lt;td&gt;200&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</pre></details></div></div></div><div class="col"><h2 id="Buttons"><a href="#Buttons"><i class="ico">[§]</i></a> Buttons</h2><div class="row"><div class="col card c6"><div class="inner" id="tags"><h2>Tags</h2><div class="content"><ul><li>item-1<span class="tag">tag</span></li><li>item-2<span class="tag hl">hl tag</span></li><li>item-3<span class="tag info">info</span></li><li>item-4<span class="tag ok">ok</span></li><li>item-5<span class="tag warn">warn</span></li><li>item-6<span class="tag err">err</span></li><li>item-7<span class="tag fatal">fatal</span></li></ul></div></div><br /><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot; id=&quot;tags&quot;&gt;
&lt;h2&gt;Tags&lt;/h2&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;ul&gt;
&lt;li&gt;item-1&lt;span class=&quot;tag&quot;&gt;tag&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;item-2&lt;span class=&quot;tag hl&quot;&gt;hl tag&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;item-3&lt;span class=&quot;tag info&quot;&gt;info&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;item-4&lt;span class=&quot;tag ok&quot;&gt;ok&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;item-5&lt;span class=&quot;tag warn&quot;&gt;warn&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;item-6&lt;span class=&quot;tag err&quot;&gt;err&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;item-7&lt;span class=&quot;tag fatal&quot;&gt;fatal&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div><div class="col card c6"><div class="inner" id="tags-inline"><h2>Inline Tags</h2><div class="content"><span class="tag">tag</span><span class="tag hl">tag hl</span><span class="tag info">info</span><span class="tag ok">ok</span><span class="tag warn">warn</span><span class="tag err">err</span><span class="tag fatal">fatal</span></div></div><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot; id=&quot;tags-inline&quot;&gt;
&lt;h2&gt;Inline Tags&lt;/h2&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;span class=&quot;tag&quot;&gt;tag&lt;/span&gt;&lt;span class=&quot;tag hl&quot;&gt;tag
hl&lt;/span&gt;&lt;span class=&quot;tag info&quot;&gt;info&lt;/span&gt;&lt;span class=&quot;tag ok&quot;&gt;ok&lt;/span&gt;&lt;span class=&quot;tag warn&quot;&gt;warn&lt;/span&gt;&lt;span class=&quot;tag err&quot;&gt;err&lt;/span&gt;&lt;span class=&quot;tag fatal&quot;&gt;fatal&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div><div class="row"><div class="col card c6"><div class="inner" id="text-buttons"><h3>Textual buttons</h3><div class="content"><a class="tb">tb</a><a class="tb hl">tb hl</a><a class="tb info">tb info</a><a class="tb ok">tb ok</a><a class="tb warn">tb warn</a><a class="tb err">tb err</a><a class="tb fatal">tb fatal</a></div></div><br /><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot; id=&quot;text-buttons&quot;&gt;
&lt;h3&gt;Textual buttons&lt;/h3&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;a class=&quot;tb&quot;&gt;tb&lt;/a&gt;&lt;a class=&quot;tb hl&quot;&gt;tb hl&lt;/a&gt;&lt;a class=&quot;tb info&quot;&gt;tb info&lt;/a&gt;&lt;a class=&quot;tb ok&quot;&gt;tb ok&lt;/a&gt;&lt;a class=&quot;tb warn&quot;&gt;tb warn&lt;/a&gt;&lt;a class=&quot;tb err&quot;&gt;tb err&lt;/a&gt;&lt;a class=&quot;tb fatal&quot;&gt;tb fatal&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div><div class="col card c6"><div class="inner" id="text-buttons-sizes"><h3>Textual Buttons Sizes</h3><div class="content"><div class="block">Some text: <a class="tb sm">small button</a><br />Some text: <a class="tb ok">normal ok</a><br />Some text: <a class="tb big warn">big warn</a><br />Some text: <a class="tb huge err">huge err</a></div></div></div><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot; id=&quot;text-buttons-sizes&quot;&gt;
&lt;h3&gt;Textual Buttons Sizes&lt;/h3&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;div class=&quot;block&quot;&gt;
Some text: &lt;a class=&quot;tb sm&quot;&gt;small button&lt;/a&gt;&lt;br&gt;&lt;/br&gt;
Some text: &lt;a class=&quot;tb ok&quot;&gt;normal ok&lt;/a&gt;&lt;br&gt;&lt;/br&gt;
Some text: &lt;a class=&quot;tb big warn&quot;&gt;big warn&lt;/a&gt;&lt;br&gt;&lt;/br&gt;
Some text: &lt;a class=&quot;tb huge err&quot;&gt;huge err&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div><div class="row"><div class="col card c6"><div class="inner col"><h2>Buttons</h2><div class="row"><div class="card c4"><h3>Classic</h3><div class="content"><a class="btn">btn</a><a class="btn hl">btn hl</a><a class="btn info">btn info</a><a class="btn ok">btn ok</a><a class="btn warn">btn warn</a><a class="btn err">btn err</a><a class="btn fatal">btn fatal</a></div></div><div class="card c4"><h3>Sizes</h3><div class="content"><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big warn</a><a class="btn huge err">btn huge err</a></div></div><div class="col c4 card"><h3>Standardized Width <code>btn std</code></h3><div class="content"><div class="mid"><a class="btn std">btn std</a><a class="btn std hl">btn std hl</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div></div></div><div class="row"><div class="col card c4"><h3>Big</h3><div class="content center"><div class="big mid"><a class="btn std">btn std</a><a class="btn std hl">btn std hl</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div></div><div class="col card c8"><h3>Huge</h3><div class="content huge mid center"><a class="btn std">btn std</a><a class="btn std hl">btn std hl</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div></div></div><br /><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner col&quot;&gt;
&lt;h2&gt;Buttons&lt;/h2&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;card c4&quot;&gt;
&lt;h3&gt;Classic&lt;/h3&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;a class=&quot;btn&quot;&gt;btn&lt;/a&gt;&lt;a class=&quot;btn hl&quot;&gt;btn
hl&lt;/a&gt;&lt;a class=&quot;btn info&quot;&gt;btn info&lt;/a&gt;&lt;a class=&quot;btn ok&quot;&gt;btn ok&lt;/a&gt;&lt;a class=&quot;btn warn&quot;&gt;btn
warn&lt;/a&gt;&lt;a class=&quot;btn err&quot;&gt;btn err&lt;/a&gt;&lt;a class=&quot;btn fatal&quot;&gt;btn fatal&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card c4&quot;&gt;
&lt;h3&gt;Sizes&lt;/h3&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;a class=&quot;btn sm&quot;&gt;btn sm&lt;/a&gt;&lt;a class=&quot;btn info&quot;&gt;btn
info&lt;/a&gt;&lt;a class=&quot;btn big warn&quot;&gt;btn big warn&lt;/a&gt;&lt;a class=&quot;btn huge err&quot;&gt;btn huge err&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col c4 card&quot;&gt;
&lt;h3&gt;Standardized Width &lt;code&gt;btn std&lt;/code&gt;&lt;/h3&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;div class=&quot;mid&quot;&gt;
&lt;a class=&quot;btn std&quot;&gt;btn std&lt;/a&gt;&lt;a class=&quot;btn std hl&quot;&gt;btn
std hl&lt;/a&gt;&lt;a class=&quot;btn std info&quot;&gt;btn std
info&lt;/a&gt;&lt;a class=&quot;btn std ok&quot;&gt;btn std ok&lt;/a&gt;&lt;a class=&quot;btn std warn&quot;&gt;btn std warn&lt;/a&gt;&lt;a class=&quot;btn std err&quot;&gt;btn std err&lt;/a&gt;&lt;a class=&quot;btn std fatal&quot;&gt;btn std fatal&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col card c4&quot;&gt;
&lt;h3&gt;Big&lt;/h3&gt;
&lt;div class=&quot;content center&quot;&gt;
&lt;div class=&quot;big mid&quot;&gt;
&lt;a class=&quot;btn std&quot;&gt;btn std&lt;/a&gt;&lt;a class=&quot;btn std hl&quot;&gt;btn
std hl&lt;/a&gt;&lt;a class=&quot;btn std info&quot;&gt;btn std
info&lt;/a&gt;&lt;a class=&quot;btn std ok&quot;&gt;btn std ok&lt;/a&gt;&lt;a class=&quot;btn std warn&quot;&gt;btn std warn&lt;/a&gt;&lt;a class=&quot;btn std err&quot;&gt;btn std err&lt;/a&gt;&lt;a class=&quot;btn std fatal&quot;&gt;btn std fatal&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col card c8&quot;&gt;
&lt;h3&gt;Huge&lt;/h3&gt;
&lt;div class=&quot;content huge mid center&quot;&gt;
&lt;a class=&quot;btn std&quot;&gt;btn std&lt;/a&gt;&lt;a class=&quot;btn std hl&quot;&gt;btn
std hl&lt;/a&gt;&lt;a class=&quot;btn std info&quot;&gt;btn std
info&lt;/a&gt;&lt;a class=&quot;btn std ok&quot;&gt;btn std ok&lt;/a&gt;&lt;a class=&quot;btn std warn&quot;&gt;btn std warn&lt;/a&gt;&lt;a class=&quot;btn std err&quot;&gt;btn
std err&lt;/a&gt;&lt;a class=&quot;btn std fatal&quot;&gt;btn std fatal&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2 id="Messages"><a href="#Messages"><i class="ico">[§]</i></a> Messages</h2><div class="row"><div class="col card c6"><div class="inner"><div class="col c12 gapless"><h2>Basic Messages</h2><div class="content"><div class="msg"><strong> Normal Message</strong> This is a normal message with <code>msg</code>.</div><div class="msg info"><strong><i class="ico big">☞</i> Info</strong> This is done by adding <code>info</code> to the class.
</div><div class="msg ok"><strong><i class="ico big">☑</i> OK</strong> This is done by adding <code>ok</code> to the class.
</div><div class="msg warn"><strong><i class="ico big">☣</i> Warning</strong> This is done by adding <code>warn</code> to the class.
</div><div class="msg err"><strong><i class="ico big">☒</i> Error</strong> This is done by adding <code>err</code> to the class.
</div><div class="msg fatal"><strong><i class="ico big">☠</i> Fatal</strong> This is done by adding <code>fatal</code> to the class.
</div><div class="msg hl"><strong><i class="ico big">☞</i>Highlighted</strong> This is done by adding <code>hl</code> to the class.
</div></div></div></div><br /><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot;&gt;
&lt;div class=&quot;col c12 gapless&quot;&gt;
&lt;h2&gt;Basic Messages&lt;/h2&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;div class=&quot;msg&quot;&gt;
&lt;strong&gt;Normal Message&lt;/strong&gt; This is a normal message
with &lt;code&gt;msg&lt;/code&gt;.
&lt;/div&gt;
&lt;div class=&quot;msg info&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☞&lt;/i&gt; Info&lt;/strong&gt; This is
done by adding &lt;code&gt;info&lt;/code&gt; to the class.
&lt;/div&gt;
&lt;div class=&quot;msg ok&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☑&lt;/i&gt; OK&lt;/strong&gt; This is done
by adding &lt;code&gt;ok&lt;/code&gt; to the class.
&lt;/div&gt;
&lt;div class=&quot;msg warn&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☣&lt;/i&gt; Warning&lt;/strong&gt; This is
done by adding &lt;code&gt;warn&lt;/code&gt; to the class.
&lt;/div&gt;
&lt;div class=&quot;msg err&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☒&lt;/i&gt; Error&lt;/strong&gt; This is
done by adding &lt;code&gt;err&lt;/code&gt; to the class.
&lt;/div&gt;
&lt;div class=&quot;msg fatal&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☠&lt;/i&gt; Fatal&lt;/strong&gt; This is
done by adding &lt;code&gt;fatal&lt;/code&gt; to the class.
&lt;/div&gt;
&lt;div class=&quot;msg hl&quot;&gt;
&lt;strong&gt;&lt;i class=&quot;ico big&quot;&gt;☞&lt;/i&gt;Highlighted&lt;/strong&gt; This
is done by adding &lt;code&gt;hl&lt;/code&gt; to the class.
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2 id="Navbar"><a href="#Navbar"><i class="ico">[§]</i></a> Navbar</h2><div class="row"><div class="col card c6"><div class="inner navbar"><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename current" href="#">BRUT</a><a href="#">One</a><a href="#">Two</a><a href="#">Three</a><a href="#">Four</a></div></nav><button class="btn-close btn sm">×</button></div><br /><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner navbar&quot;&gt;
&lt;nav class=&quot;nav&quot; onclick=&quot;this.focus()&quot; tabindex=&quot;-1&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;a class=&quot;pagename current&quot; href=&quot;#&quot;&gt;BRUT&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;Four&lt;/a&gt;
&lt;/div&gt;
&lt;/nav&gt;&lt;button class=&quot;btn-close btn sm&quot;&gt;×&lt;/button&gt;
&lt;/div&gt;
</pre></details></div></div></div><div class="col"><h2 id="Footer"><a href="#Footer"><i class="ico">[§]</i></a> Footer</h2><div class="row"><div class="col card c6"><div class="inner"><footer><div class="container"><p>Made by <a href="https://yannesposito.com">Yann Esposito</a></p><br /></div></footer></div><br /><details class="push stretch"><summary class="bg-neutral">code</summary><pre>
&lt;div class=&quot;inner&quot;&gt;
&lt;footer&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;p&gt;Made by &lt;a href=&quot;https://yannesposito.com&quot;&gt;Yann
Esposito&lt;/a&gt;&lt;/p&gt;&lt;br&gt;&lt;/br&gt;
&lt;/div&gt;
&lt;/footer&gt;
&lt;/div&gt;
</pre></details></div></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>
Reference in a new issue View git blame Copy permalink