Knah Tsaeb theme and design
Introduction
I needed to harmonize the styles across my different sites and services. Instead of copying and pasting my rules into each project, I preferred to create two stylesheets: one to define my variables and another to style the elements I use in at least two different projects. This makes updates and maintenance easier.
I tried to use semantic tags as much as possible and as few classes as possible.
More detail on git repositorie.
Color scheme (kt-scheme.css)
Color
| Preview | Note | ||
|---|---|---|---|
| --text-color-auto: light-dark(#171414, #fffbfb) | --text-color-light: #171414 | --text-color-dark: #fffbfb | Toggle dark/light |
| --text-color-inverse-auto: light-dark(var(--text-color-dark), var(--text-color-light)) | --text-color-inverse-dark: var(--text-color-light) | --text-color-inverse-light: var(--text-color-dark) | Toggle dark/light |
| --background-color-auto: light-dark(var(--text-color-dark), var(--text-color-light)) | --background-color-light: var(--text-color-dark) | --background-color-dark: var(--text-color-light) | Toggle dark/light |
| --background-color-inverse-auto: light-dark(var(--text-color-light), var(--text-color-dark)) | --background-color-inverse-light: var(--text-color-light) | --background-color-inverse-dark: var(--text-color-dark) | Toggle dark/light |
| --neutral: #777575 | --neutral-medium: #aeadad | --neutral-light: #e9e9e9 | |
| --primary: #cc2027 | --primary-lighten: #d64c52 | --primary-darken: #8e161b | --primary-text-contrast: #fff |
| --secondary: #20ccc5 | --secondary-lighten: #4cd6d0 | --secondary-darken: #168e89 | --secondary-text-contrast: #000 |
| --error: #c43933 | --error-lighten: #cf605b | --error-darken: #892723 | --error-text-contrast: #fff |
| --info: #206ccc | --info-lighten: #4c89d6 | --info-darken: #164b8e | --info-text-contrast: #fff |
| --success: #7dcc20 | --success-lighten: #97d64c | --success-darken: #578e16 | --success-text-contrast: #000 |
| --warning: #cc5e20 | --warning-lighten: #d67e4c | --warning-darken: #8e4116 | --warning-text-contrast: #000 |
| --h1-color: var(--primary) | |||
| --h2-color: #c33d35 | |||
| --h3-color: #b94f44 | |||
| --h4-color: #ae5e52 | |||
| --h5-color: #a16a61 | |||
| --h6-color: #927671 | |||
| --box-shadow-auto: .4rem .4rem 0px .1rem light-dark(var(--neutral-medium), var(--neutral)) | --box-shadow-light: .4rem .4rem 0px .1rem var(--neutral) | --box-shadow-dark: .4rem .4rem 0px .1rem var(--neutral-light) | Toggle dark/light |
Other
| Variable | Value |
|---|---|
| --font-size | --font-size: 1.3em; |
| --default-space | --default-space: .2rem; |
| --border-radius | --border-radius: .3rem; |
Components
Header
Site name
Optional text
View code
<header class="banner">
<hgroup>
<h1>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCI+CiAgPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj5Mb2dvPC90ZXh0PiAgIAo8L3N2Zz4="
height="120"
loading="lazy"
alt="logo"><a href="/">Site name</a>
</h1>
<p>
Optional text
</p>
</hgroup>
<nav role="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#" class="active">Link 3</a></li>
<li aria-haspopup="true">Sub menu
<ul class="dropdown" aria-label="submenu">
<li><a href="#">Sub-1</a></li>
<li><a href="#">Sub-2</a></li>
<li><a href="#">Sub-3</a></li>
</ul>
</li>
<li><a href="#" class="toggle-dark-mode">
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-light-dark</title>
<use href="assets/sprites/fullSet.svg#ui-light-dark"></use>
</svg>
</a>
</li>
</ul>
</nav>
</header> Menus
Vertical menu
View code
<nav class="horizontal-menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li>Sub menu <ul>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#">Sub menu 2</a></li>
</ul>
</li>
</ul>
</nav>Breadcrumb
View code
<nav aria-label="breadcrumb" class="breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sub level 1</a></li>
<li><a href="#">Sub level 2</a></li>
<li>Sub level 3</li>
</ul>
</nav>Article/section
Title
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere quia eos, doloribus quis facilis soluta vero voluptate, doloremque incidunt, molestiae necessitatibus quae modi nihil vel labore officia beatae itaque aut?View code
<article>
<h4>Title</h4>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere quia eos, doloribus quis facilis soluta vero voluptate, doloremque incidunt, molestiae necessitatibus quae modi nihil vel labore officia beatae itaque aut?
</article>Pagination
View code
<nav class="pagination">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a class="current" href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</nav>Table of content
Lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod leo eros aptent montes ultricies magnis. Fusce eu eros dapibus rhoncus egestas elit vivamus. Ac est nisi feugiat cubilia fermentum aliquet lobortis. In nostra aenean a praesent consectetur ac sapien. Sapien senectus class vehicula accumsan ultricies egestas sit. Posuere purus posuere netus interdum quam blandit amet. Lorem rutrum fusce vivamus quisque aliquam mi ligula.
Gravida aliquet laoreet venenatis id magnis tempor quis. Litora sociosqu adipiscing arcu luctus ultrices lectus magnis. Lacus erat iaculis nascetur semper conubia commodo dictumst. Ullamcorper blandit leo sodales venenatis sociosqu vivamus gravida. Purus posuere condimentum nisl nec imperdiet aliquam mollis. Volutpat potenti parturient rhoncus lacinia semper morbi ad. Penatibus integer nec arcu mollis sapien vestibulum integer.
Vitae diam sociis parturient eu pulvinar netus faucibus. Tortor porttitor gravida donec orci venenatis placerat cum. Lacus quisque nostra tortor tempus conubia varius lectus. Dignissim rhoncus rutrum condimentum placerat gravida quisque lobortis. Platea ultricies lectus porttitor mollis conubia consectetur dictumst.
View code
<nav class="table-of-contents">
<h3 id="table-of-contents">Table of content</h3>
<ul>
<li><a href="#table-of-contents">TOC</a></li>
<li><a href="#content-h2-heading">Level 2</a>
<ul>
<li><a href="#content-h3-heading">Level 3</a>
<ul>
<li><a href="#content-h4-heading">Level 4</a>
<ul>
<li><a href="#content-h5-heading">Level 5</a>
<ul>
<li><a href="#content-h6-heading">Level 6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#block">Block</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#content-blockquotes">Blockquotes</a></li>
<li><a href="#content-lists">Lists</a></li>
</ul>
</nav>Gallery
View code
<div class="flex gallery">
<figure>
<a href="img/placeholder.svg">
<img src="img/placeholder.svg" width="250" height="250" alt="placeholder">
</a>
<figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
</figure>
<figure>
<a href="img/placeholder.svg">
<img src="img/placeholder.svg" width="250" height="250" alt="placeholder">
</a>
<figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
</figure>
<figure>
<a href="img/placeholder.svg">
<img src="img/placeholder.svg" width="250" height="250" alt="placeholder">
</a>
<figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
</figure>
<figure>
<a href="img/placeholder.svg">
<img src="img/placeholder.svg" width="250" height="250" alt="placeholder">
</a>
<figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
</figure>
<figure>
<a href="img/placeholder.svg">
<img src="img/placeholder.svg" width="250" height="250" alt="placeholder">
</a>
<figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
</figure>
<figure>
<a href="img/placeholder.svg">
<img src="img/placeholder.svg" width="250" height="250" alt="placeholder">
</a>
<figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
</figure>
<figure>
<a href="img/placeholder.svg">
<img src="icons/placeholder.svg" width="250" height="250" alt="placeholder">
</a>
<figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
</figure>
<figure>
<a href="img/placeholder.svg">
<img src="img/placeholder.svg" width="250" height="250" alt="placeholder">
</a>
<figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
</figure>
</div>Admonition
With header
View code
<aside class="admonition adm-caution">
<header><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>admonition-caution</title>
<use href="assets/sprites/fullSet.svg#admonition-caution"></use>
</svg>Caution</header>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur cupiditate tenetur sunt eos, nesciunt magnam? Iste, quam in, hic accusamus ipsum optio alias soluta nisi at quidem, vero recusandae totam.
</aside>
Without header
View code
<aside class="admonition adm-warning">
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>admonition-warning</title>
<use href="assets/sprites/fullSet.svg#admonition-warning"></use>
</svg>
<b>Warning</b> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur cupiditate tenetur sunt eos, nesciunt magnam? Iste, quam in, hic accusamus ipsum optio alias soluta nisi at quidem, vero recusandae totam.
</aside>
Admonitions with img rather than "use" element
For security reasons, browsers may apply the same-origin policy on use elements and may refuse to load a cross-origin URL in the href attribute. There is currently no defined way to set a cross-origin policy for use elements.MDN web docs, <use>
When you use SVG like img, you can't change color. That's reason the admonitions icons exist in color.
View code
<aside class="admonition adm-note">
<header><img src="assets/icons/admonition-note-colored.svg" height="32" width="32" alt="icon note"> Note</header>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur cupiditate tenetur sunt eos, nesciunt magnam? Iste, quam in, hic accusamus ipsum optio alias soluta nisi at quidem, vero recusandae totam.
</aside>
Cards
Title 1
Short description
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quam corporis doloremque delectus culpa accusamus tempore magnam reiciendis libero incidunt molestias, laboriosam, voluptatem ab necessitatibus iusto blanditiis modi numquam voluptate.
Title 2
Short description
Lorem ipsum dolor sit amet consectetu uptatem ab necessitatibus iusto blanditiis modi numquam voluptate.
Title 3
Lorem ipsum dolor laboriosam, voluptatem ab necessitatibus iusto blanditiis modi numquam voluptate.
Title 4
Short description
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quam corporis doloremque delectus culpa accusamus tempore magnam reiciendis libero incidunt molestias, laboriosam, voluptatem ab necessitatibus iusto blanditiis modi numquam voluptate.
Title
Short description
Lorem ipsum dolor sit amet consectetur adipisic.
View code
<div class="cards">
<article>
<header>
<h4>Title</h4>
<p>Short description</p>
</header>
<figure>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290 290" width="290" height="290">
<rect width="290" height="290" fill="#cccccc"></rect>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="monospace" font-size="26px" fill="#333333">290x290</text>
</svg>
</figure>
<p>Lorem ipsum dolor sit amet consectetu uptatem ab necessitatibus iusto blanditiis modi numquam voluptate.</p>
<footer>
<a href="#">Read more</a>
</footer>
</article>
</div>Go top
View code
<a href="#" id="back-to-top" role="button">Top <svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>Go top</title>
<use href="assets/sprites/fullSet.svg#ui-arrow-up"></use>
</svg></a>Footer
View code
<footer>
<a href="/about">/about</a> me | about this site in <a href="/colophon">/colophon</a> | <a href="/contact">/contact</a>
<p>
Build in : 0.00096s
</p>
</footer>Typography
Headings
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
View code
<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>Text modifier
- <abbr> Abbreviation or acronym
- <strong> Strong importance
- <b> Bring attention
- <i> Idiomatic text
- <em> Emphasis
- <cite> Citation
<del>Deleted- <ins> Inserted
- <kbd> Keyboard
- <mark> Mark text
<s>Strikethrough- <small> Side comment
- <sub> Subscript
- <sup> Superscript
- <u> Unarticulated Annotation
Text align left
text-start
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores distinctio animi cupiditate illum adipisci aut quod, tempore harum nobis vitae aperiam! Provident, inventore ullam. Dolorem similique expedita esse? Corporis, quia.
Text align center
text-center
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores distinctio animi cupiditate illum adipisci aut quod, tempore harum nobis vitae aperiam! Provident, inventore ullam. Dolorem similique expedita esse? Corporis, quia.
Text align right
text-end
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores distinctio animi cupiditate illum adipisci aut quod, tempore harum nobis vitae aperiam! Provident, inventore ullam. Dolorem similique expedita esse? Corporis, quia.
View code
<article class="text-center">
<h4>Text align center</h4>
<h6>text-center</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores distinctio animi cupiditate illum adipisci aut quod, tempore harum nobis vitae aperiam! Provident, inventore ullam. Dolorem similique expedita esse? Corporis, quia.</p>
</article>Color
Default
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.
Button
Outline button
Label
Label Label with linkTag
Tag Tag with linkHorizontal rule
Primary
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.
Button
Outline button
Label
Label Label with linkTag
Tag Tag with linkHorizontal rule
Secondary
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.
Button
Outline button
Label
Label Label with linkTag
Tag Tag with linkHorizontal rule
Error
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.
Button
Outline button
Label
Label Label with linkTag
Tag Tag with linkHorizontal rule
Success
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.
Button
Outline button
Label
Label Label with linkTag
Tag Tag with linkHorizontal rule
Warning
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.
Button
Outline button
Label
Label Label with linkTag
Tag Tag with linkHorizontal rule
Info
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.
Button
Outline button
Label
Label Label with linkTag
Tag Tag with linkHorizontal rule
View code
<h4 id="color-info">Info</h4>
<p class="info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.
</p>
<h5>Button</h5>
<p class="flex">
<input class="info" type="reset" value="Input reset">
<input class="info" type="button" value="Input button">
<a href="#" class="info" role="button">Link button</a>
<button class="info">Button</button>
</p>
<h5>Outline button</h5>
<p class="flex">
<input class="outline info" type="reset" value="Input reset">
<input class="outline info" type="button" value="Input button">
<a class="outline info" href="#" role="button">Link button</a>
<button class="outline info">Button</button>
</p>
<h4>Label</h4>
<span class="label info">Label</span>
<span class="label info"><a href="">Label with link</a></span>
<h4>Tag</h4>
<span class="tag info">Tag</span>
<span class="tag info"><a href="">Tag with link</a></span>
<h5>Horizontal rule</h5>
<hr class="text-info">Blockquote
Porttitor laoreet conubia eleifend ante ullamcorper rhoncus blandit imperdiet. Montes rhoncus mollis pharetra convallis blandit inceptos diam adipiscing. Fusce massa laoreet taciti lacinia vel posuere interdum at. Neque ultrices enim lacinia litora nisl sed varius natoque.John Doe, Lorem generator
View code
<blockquote>
Porttitor laoreet conubia eleifend ante ullamcorper rhoncus blandit imperdiet. Montes rhoncus mollis pharetra convallis blandit inceptos diam adipiscing. Fusce massa laoreet taciti lacinia vel posuere interdum at. Neque ultrices enim lacinia litora nisl sed varius natoque.
<p>John Doe, <cite>Lorem generator</cite></p>
</blockquote>Lists
- Item 1
- Item 2
- Item 2a
- Item 2b
- Item 2c
- Item 3
- Item 1
- Item 2
- Item 2a
- Item 2b
- Item 2c
- Item 3
View code
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2a</li>
<li>Item 2b</li>
<li>Item 2c</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2
<ol>
<li>Item 2a</li>
<li>Item 2b</li>
<li>Item 2c</li>
</ol>
</li>
<li>Item 3</li>
</ol>Figure
View code
<figure>
<img src="img/kobu-agency-ipARHaxETRk-unsplash.webp" alt="Minimal landscape">
<figcaption>
Figure with image by
<a href="https://unsplash.com/fr/photos/smartphone-blanc-sur-deux-livres-a-reliure-souple-ipARHaxETRk" target="_blank">KOBU Agency from unsplash.com</a>
</figcaption>
</figure>Table
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
View code
<table>
<caption>Example of styled table</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>Form elements
View code
<form>
<label for="search">Search</label>
<input type="search" id="search" name="search" placeholder="Search">
<label for="text">Text</label>
<input type="text" id="text" name="text" placeholder="Text">
<small>Curabitur consequat lacus at lacus porta finibus.</small>
<label for="select">Select</label>
<select id="select" name="select" required>
<option value="">Select…</option>
<optgroup label="Optgroup">
<option>Option 1</option>
<option>Option 2</option>
</optgroup>
<option>Option 3</option>
<option selected>Option 4</option>
<option>…</option>
</select>
<label for="textarea">Textarea</label>
<textarea name="textarea" id="textarea">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, ipsum dicta. Qui, quia, error quidem et delectus fuga perferendis aperiam illum rem aut dolor odio expedita laboriosam repudiandae voluptatibus placeat!
</textarea>
<label for="file">File browser
<input type="file" id="file" name="file">
</label>
<label for="range">Range slider
<input type="range" min="0" max="100" value="50" id="range" name="range">
</label>
<div class="grid">
<label for="date">Date
<input type="date" id="date" name="date">
</label>
<label for="time">Time
<input type="time" id="time" name="time">
</label>
<label for="color">Color
<input type="color" id="color" name="color" value="#0eaaaa">
</label>
</div>
<div class="grid">
<fieldset>
<legend>Checkboxes</legend>
<label for="checkbox-1">
<input type="checkbox" id="checkbox-1" name="checkbox-1" checked>
Checkbox
</label>
<label for="checkbox-2">
<input type="checkbox" id="checkbox-2" name="checkbox-2">
Checkbox
</label>
</fieldset>
<fieldset>
<legend>Radio buttons</legend>
<label for="radio-1">
<input type="radio" id="radio-1" name="radio" value="radio-1" checked>
Radio button
</label>
<label for="radio-2">
<input type="radio" id="radio-2" name="radio" value="radio-2">
Radio button
</label>
</fieldset>
</div>
<input type="reset" value="Reset" onclick="event.preventDefault()">
<input type="submit" value="Submit">
</form>Icons
You have 3 possibilities for using SVG icons :
Sprite (my preference)
| Pro | Con |
|---|---|
| Easy styling with CSS | When add/remove/edit icon, need to regen |
| Minimise traffic, load one ressource (mitigate with HTTP/2) | Code more verbose than img element |
| Use browser cache | Cannot cross domain (limitation of element use) |
| Fast and light |
Usage:
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>admonition-caution</title>
<use href="assets/sprites/fullSet.svg#admonition-caution"></use>
</svg>Inline
| Pro | Con |
|---|---|
| Easy styling with CSS | HTML file are more weight |
| Minimise request, icon are in HTML (mitigate with HTTP/2) | HTML are more verbose |
| Fast and light | Not reusabble, you need duplicate code in HTML file |
| Mixing content and presentation |
Usage:
<svg id="admonition-caution" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M7.254.545L.545 7.255v9.49l6.71 6.71h9.49l6.71-6.71v-9.49l-6.71-6.71h-9.49zm.79 1.91h7.911l5.59 5.59v7.91l-5.59 5.59h-7.91l-5.59-5.59V8.046l5.59-5.59zm3 3.815v7.64h1.912V6.27h-1.912zm0 9.55v1.91h1.912v-1.91h-1.912z" transform="translate(-1.142 -1.142) scale(2.09516)"/>
</svg>Like img
| Pro | Con |
|---|---|
| Simply use | Can't use CSS for customise (need one file per color you need) |
| Light element | HTML are more verbose |
| Use browser cache | Not reusabble, you need duplicate code in HTML file |
Usage:
<img class="svg-icon" src="assets/icons/admonition-caution.svg" alt="admonition-caution">Icons list
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>admonition-caution-colored</title>
<use href="assets/sprites/fullSet.svg#admonition-caution-colored"></use>
</svg>Inline
<svg id="admonition-caution-colored" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
d="M7.254.545L.545 7.255v9.49l6.71 6.71h9.49l6.71-6.71v-9.49l-6.71-6.71h-9.49zm.79 1.91h7.911l5.59 5.59v7.91l-5.59 5.59h-7.91l-5.59-5.59V8.046l5.59-5.59zm3 3.815v7.64h1.912V6.27h-1.912zm0 9.55v1.91h1.912v-1.91h-1.912z"
transform="translate(-1.142 -1.142) scale(2.09516)" fill="#c43933" />
</svg>Img
<img class="svg-icon" src="assets/icons/admonition-caution-colored.svg" alt="admonition-caution-colored">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>admonition-caution</title>
<use href="assets/sprites/fullSet.svg#admonition-caution"></use>
</svg>Inline
<svg id="admonition-caution" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M7.254.545L.545 7.255v9.49l6.71 6.71h9.49l6.71-6.71v-9.49l-6.71-6.71h-9.49zm.79 1.91h7.911l5.59 5.59v7.91l-5.59 5.59h-7.91l-5.59-5.59V8.046l5.59-5.59zm3 3.815v7.64h1.912V6.27h-1.912zm0 9.55v1.91h1.912v-1.91h-1.912z" transform="translate(-1.142 -1.142) scale(2.09516)"/></svg>Img
<img class="svg-icon" src="assets/icons/admonition-caution.svg" alt="admonition-caution">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>admonition-important-colored</title>
<use href="assets/sprites/fullSet.svg#admonition-important-colored"></use>
</svg>Inline
<svg version="1.1" id="admonition-important-colored" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-64-85.333v37h18.3l15.7 11v-11h14v-37h-48zm4 4h40v29h-14v8l-11.7-8H-60v-29zm17.244 2.705l.826 15.912h3.961l.824-15.912h-5.61zm2.807 18.486c-.793 0-1.475.209-2.047.627-.55.418-.826 1.134-.826 2.147 0 .968.276 1.673.826 2.113.572.418 1.254.627 2.047.627.77 0 1.43-.21 1.98-.627.572-.44.858-1.145.858-2.113 0-1.013-.286-1.729-.858-2.147-.55-.418-1.21-.627-1.98-.627z" transform="translate(64 85.333)" fill="#c43933"/></svg>Img
<img class="svg-icon" src="assets/icons/admonition-important-colored.svg" alt="admonition-important-colored">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>admonition-important</title>
<use href="assets/sprites/fullSet.svg#admonition-important"></use>
</svg>Inline
<svg version="1.1" id="admonition-important" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-64-85.333v37h18.3l15.7 11v-11h14v-37h-48zm4 4h40v29h-14v8l-11.7-8H-60v-29zm17.244 2.705l.826 15.912h3.961l.824-15.912h-5.61zm2.807 18.486c-.793 0-1.475.209-2.047.627-.55.418-.826 1.134-.826 2.147 0 .968.276 1.673.826 2.113.572.418 1.254.627 2.047.627.77 0 1.43-.21 1.98-.627.572-.44.858-1.145.858-2.113 0-1.013-.286-1.729-.858-2.147-.55-.418-1.21-.627-1.98-.627z" transform="translate(64 85.333)"/></svg>Img
<img class="svg-icon" src="assets/icons/admonition-important.svg" alt="admonition-important">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>admonition-note-colored</title>
<use href="assets/sprites/fullSet.svg#admonition-note-colored"></use>
</svg>Inline
<svg version="1.1" id="admonition-note-colored" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 0C10.745 0 0 10.745 0 24s10.745 24 24 24 24-10.745 24-24S37.255 0 24 0zm0 4c10.587 0 20 9.413 20 20s-9.413 20-20 20S4 34.587 4 24 13.413 4 24 4zm-1.988 9v4.002h3.98V13h-3.98zM20 19.016v3.998h2v7.984h-2V35h8.004v-4.002h-2.002V19.016H20z" fill="#206ccc"/></svg>Img
<img class="svg-icon" src="assets/icons/admonition-note-colored.svg" alt="admonition-note-colored">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>admonition-note</title>
<use href="assets/sprites/fullSet.svg#admonition-note"></use>
</svg>Inline
<svg version="1.1" id="admonition-note" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 0C10.745 0 0 10.745 0 24s10.745 24 24 24 24-10.745 24-24S37.255 0 24 0zm0 4c10.587 0 20 9.413 20 20s-9.413 20-20 20S4 34.587 4 24 13.413 4 24 4zm-1.988 9v4.002h3.98V13h-3.98zM20 19.016v3.998h2v7.984h-2V35h8.004v-4.002h-2.002V19.016H20z"/></svg>Img
<img class="svg-icon" src="assets/icons/admonition-note.svg" alt="admonition-note">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>admonition-tip-colored</title>
<use href="assets/sprites/fullSet.svg#admonition-tip-colored"></use>
</svg>Inline
<svg version="1.1" id="admonition-tip-colored" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M197.328 0v64.003h32.01V0h-32.01zM73.79 51.17L51.167 73.791l45.263 45.263 22.622-22.623L73.79 51.17zm279.089 0l-45.263 45.262 22.622 22.623L375.5 73.792l-22.622-22.623zM213.333 85.33c-70.692 0-128.005 57.313-128.005 128.006 0 47.378 25.744 88.738 64.003 110.87v81.12l21.328 21.346h21.346c0 11.782 9.546 21.328 21.328 21.328s21.328-9.546 21.328-21.328h21.347l21.328-21.346v-81.12c38.259-22.132 64.003-63.492 64.003-110.87 0-70.693-57.313-128.005-128.006-128.005zm0 42.675c47.129 0 85.331 38.203 85.331 85.33 0 47.13-38.202 85.332-85.33 85.332-47.129 0-85.331-38.203-85.331-85.331s38.202-85.33 85.33-85.33zM-.003 197.331v32.01H64v-32.01H-.003zm362.67 0v32.01h64.002v-32.01h-64.002zM96.43 307.617l-45.263 45.245 22.622 22.64 45.263-45.262-22.622-22.623zm233.807 0l-22.622 22.623 45.263 45.263 22.622-22.641-45.263-45.245zm-138.232 31.938a128.789 128.789 0 0021.328 1.786c7.27 0 14.39-.622 21.328-1.786v44.442h-42.656v-44.442z" transform="translate(1.143) scale(.10714)" fill="#7dcc20"/></svg>Img
<img class="svg-icon" src="assets/icons/admonition-tip-colored.svg" alt="admonition-tip-colored">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>admonition-tip</title>
<use href="assets/sprites/fullSet.svg#admonition-tip"></use>
</svg>Inline
<svg version="1.1" id="admonition-tip" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 9.143c7.574 0 13.714 6.14 13.714 13.714 0 5.076-2.758 9.508-6.857 11.88v8.692l-2.286 2.285h-2.285a2.286 2.286 0 01-4.572 0H19.43l-2.286-2.285v-8.692a13.709 13.709 0 01-6.857-11.88c0-7.574 6.14-13.714 13.714-13.714zm2.286 27.239a13.807 13.807 0 01-4.572 0v4.76h4.572zm-14.812-3.423l2.424 2.424-4.848 4.849-2.425-2.425zm25.052 0l4.849 4.848-2.425 2.425-4.848-4.849zM24 13.714A9.143 9.143 0 1024 32a9.143 9.143 0 000-18.286zm22.857 7.429v3.428H40v-3.428zM8 21.143v3.428H1.143v-3.428zm30.95-15.66l2.425 2.424-4.85 4.849-2.423-2.425zm-29.9 0l4.848 4.848-2.424 2.425-4.849-4.85zM25.714 0v6.857h-3.428V0z"/></svg>Img
<img class="svg-icon" src="assets/icons/admonition-tip.svg" alt="admonition-tip">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>admonition-warning-colored</title>
<use href="assets/sprites/fullSet.svg#admonition-warning-colored"></use>
</svg>Inline
<svg version="1.1" id="admonition-warning-colored" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 0a2 2 0 00-1.79 1.105l-22 44A2 2 0 002 48h44a2 2 0 001.79-2.895l-22-44A2 2 0 0024 0zm0 6.473L42.764 44H5.236L24 6.473zm-2.95 10.406l.872 16.828h4.19l.872-16.828h-5.933zm2.968 19.55c-.838 0-1.56.223-2.164.665-.582.442-.874 1.197-.874 2.267 0 1.024.292 1.77.874 2.235.605.442 1.326.664 2.164.664.814 0 1.511-.222 2.093-.664.605-.466.909-1.21.909-2.235 0-1.07-.304-1.825-.909-2.267-.582-.442-1.279-.664-2.093-.664z" fill="#cc5e20"/></svg>Img
<img class="svg-icon" src="assets/icons/admonition-warning-colored.svg" alt="admonition-warning-colored">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>admonition-warning</title>
<use href="assets/sprites/fullSet.svg#admonition-warning"></use>
</svg>Inline
<svg version="1.1" id="admonition-warning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 0a2 2 0 00-1.79 1.105l-22 44A2 2 0 002 48h44a2 2 0 001.79-2.895l-22-44A2 2 0 0024 0zm0 6.473L42.764 44H5.236L24 6.473zm-2.95 10.406l.872 16.828h4.19l.872-16.828h-5.933zm2.968 19.55c-.838 0-1.56.223-2.164.665-.582.442-.874 1.197-.874 2.267 0 1.024.292 1.77.874 2.235.605.442 1.326.664 2.164.664.814 0 1.511-.222 2.093-.664.605-.466.909-1.21.909-2.235 0-1.07-.304-1.825-.909-2.267-.582-.442-1.279-.664-2.093-.664z"/></svg>Img
<img class="svg-icon" src="assets/icons/admonition-warning.svg" alt="admonition-warning">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>file-audio</title>
<use href="assets/sprites/fullSet.svg#file-audio"></use>
</svg>Inline
<svg id="file-audio" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M2.455.545v22.91h19.09V5.875l-5.33-5.33H2.455zm1.91 1.91h9.54v5.73h5.73v13.36H4.365V2.455zm11.45.39l1.714 1.716 1.715 1.714h-3.43v-3.43zm.96 7.067l-7.64 1.28v4.54a1.97 1.97 0 00-.772.172 1.98 1.98 0 00-1.136 1.873 1.969 1.969 0 001.954 1.858 1.98 1.98 0 001.813-1.23 1.99 1.99 0 00.05-1.289v-4.308l3.821-.64v2.698h-.005a1.918 1.918 0 00-1.905 1.903 1.92 1.92 0 001.905 1.907c1.04 0 1.906-.866 1.906-1.907h.01V9.912zm-7.64 7.735v.035a.206.206 0 010-.035z" transform="matrix(2.09535 0 0 2.09515 -1.144 -1.142)"/></svg>Img
<img class="svg-icon" src="assets/icons/file-audio.svg" alt="file-audio">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>file-block</title>
<use href="assets/sprites/fullSet.svg#file-block"></use>
</svg>Inline
<svg viewBox="0 0 48 48" id="file-block" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M2.455.545v22.91h19.09V5.875l-5.33-5.33H2.455zm1.91 1.91h9.54v5.73h5.73v13.36H4.365V2.455zm11.449.39l3.43 3.43h-3.43v-3.43zM12 9.135c-3.15 0-5.725 2.574-5.725 5.724 0 3.15 2.575 5.725 5.725 5.725 3.15 0 5.725-2.574 5.725-5.725 0-3.15-2.575-5.724-5.725-5.724zm0 1.91a3.8 3.8 0 011.945.528l-5.233 5.225a3.801 3.801 0 01-.526-1.939A3.8 3.8 0 0112 11.045zm3.293 1.882a3.8 3.8 0 01.52 1.932A3.801 3.801 0 0112 18.676a3.801 3.801 0 01-1.938-.526l5.23-5.223z" transform="matrix(2.09536 0 0 2.09514 -1.143 -1.142)"/></svg>Img
<img class="svg-icon" src="assets/icons/file-block.svg" alt="file-block">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>file-broken</title>
<use href="assets/sprites/fullSet.svg#file-broken"></use>
</svg>Inline
<svg viewBox="0 0 48 48" id="file-broken" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M4.002 0v25.068l7.992 5.336 6.014-3.998 5.97 4.002 6.016-4.006 6.016 4.002 7.994-5.336v-13.9L32.836 0H4.002zm4.002 4.002h19.992V16.01h12.006v6.924L36.006 25.6l-6.012-4.002-6.008 3.998-5.97-4.002-6.018 4.006-3.994-2.668V4.002zm23.992.818l7.186 7.188h-7.186V4.82zM4.002 28.266v19.736h40.002V28.266l-7.998 5.336-6.012-3.998-6.008 3.998-5.97-4.002-6.018 4.002-7.996-5.336zm25.992 6.14l6.016 4.004L40 35.746V44H8.006v-8.254l3.988 2.664 6.014-3.998 5.97 3.998 6.016-4.004z"/></svg>Img
<img class="svg-icon" src="assets/icons/file-broken.svg" alt="file-broken">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>file-code</title>
<use href="assets/sprites/fullSet.svg#file-code"></use>
</svg>Inline
<svg viewBox="0 0 48 48" id="file-code" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M4 0v48h40V11.168L32.832 0H4zm4.004 4.002H27.99v12.006h12.006v27.99H8.004V4.002zm23.988.818l7.186 7.186h-7.186V4.82zM16.594 18.582L9.16 26.014l7.436 7.406 2.824-2.836-4.596-4.574 4.596-4.596-2.826-2.832zm14.812 0l-2.828 2.832 4.598 4.596-4.598 4.574 2.824 2.836 7.438-7.406-7.434-7.432zm-7.316.785l-3.983 12.006 3.803 1.262 3.983-12.006-3.803-1.262z"/></svg>Img
<img class="svg-icon" src="assets/icons/file-code.svg" alt="file-code">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>file-empty</title>
<use href="assets/sprites/fullSet.svg#file-empty"></use>
</svg>Inline
<svg viewBox="0 0 48 48" id="file-empty" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M2.455.545v22.91h19.09V5.875l-5.33-5.33H2.455zm1.91 1.91h9.54v5.73h5.73v13.36H4.365V2.455zm11.45.39l1.714 1.716 1.715 1.714h-3.43v-3.43z" transform="matrix(2.09535 0 0 2.09515 -1.144 -1.142)"/></svg>Img
<img class="svg-icon" src="assets/icons/file-empty.svg" alt="file-empty">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>file-image</title>
<use href="assets/sprites/fullSet.svg#file-image"></use>
</svg>Inline
<svg viewBox="0 0 48 48" id="file-image" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M2.455.545v22.91h19.09V5.875l-5.33-5.33H2.454zm1.91 1.91h9.54v5.73h5.73v13.36H4.365V2.455zm11.45.39l3.43 3.43h-3.43v-3.43zm-6.206 6.29c-.781 0-1.433.654-1.433 1.435s.652 1.436 1.433 1.436a1.45 1.45 0 001.435-1.436A1.45 1.45 0 009.61 9.134zm0 .96c.25 0 .477.224.477.475a.492.492 0 01-.477.474.49.49 0 01-.475-.474.49.49 0 01.475-.474zM14.039 12l-2.879 4.47-2.02-3.04-2.87 4.3h11.46L14.04 12z" transform="translate(-1.142 -1.142) scale(2.09518)"/></svg>Img
<img class="svg-icon" src="assets/icons/file-image.svg" alt="file-image">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>file-info</title>
<use href="assets/sprites/fullSet.svg#file-info"></use>
</svg>Inline
<svg viewBox="0 0 48 48" id="file-info" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M4 0v48h40V11.168L32.832 0zm4.002 4.002H27.99v12.006h12.008v27.99H8.002zm23.99.818l3.594 3.594 3.594 3.592h-7.188zm-9.98 13.176v4.002h3.976v-4.002zm-2.014 6.016v3.998h2v7.984h-2v4.002h8.004v-4.002h-2V24.012z"/></svg>Img
<img class="svg-icon" src="assets/icons/file-info.svg" alt="file-info">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>file-pres</title>
<use href="assets/sprites/fullSet.svg#file-pres"></use>
</svg>Inline
<svg id="file-pres" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-7.345-16.865v46.429h38.69V-6.062L20.543-16.865H-7.345zm3.87 3.871H15.86V-1.38h11.614v27.074H-3.474v-38.687zm23.206.792l3.476 3.476 3.476 3.474H19.73v-6.95zM.48.348v19.2h5.8l-2.92 2.066v1.967h4.88l1.826-1.587v1.611h3.87v-1.68l1.94 1.686h4.878v-1.967l-2.963-2.097h5.73V.347H.48zm3.869 3.869H19.65v11.461H4.35V4.217z" transform="translate(11.594 17.436) scale(1.03385)"/></svg>Img
<img class="svg-icon" src="assets/icons/file-pres.svg" alt="file-pres">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>file-spread</title>
<use href="assets/sprites/fullSet.svg#file-spread"></use>
</svg>Inline
<svg viewBox="0 0 48 48" id="file-spread" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M5.716.668v48h40V11.836L34.548.668H5.716zM9.718 4.67h19.988v12.006h12.008v27.99H9.718V4.67zm23.99.818l3.594 3.594 3.593 3.592h-7.187V5.488zm-19.992 13.18v24h24v-24h-24zm4 4h6v6h-6v-6zm10 0h6v6h-6v-6zm-10 10h6v6h-6v-6zm10 0h6v6h-6v-6z" transform="translate(-1.716 -.668)"/></svg>Img
<img class="svg-icon" src="assets/icons/file-spread.svg" alt="file-spread">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>file-text</title>
<use href="assets/sprites/fullSet.svg#file-text"></use>
</svg>Inline
<svg viewBox="0 0 48 48" id="file-text" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M2.455.545v22.91h19.09V5.875l-5.33-5.33H2.455zm1.91 1.91h9.54v5.73h5.73v13.36H4.365V2.455zm11.45.39l1.714 1.716 1.715 1.714h-3.43v-3.43zm-9.546 7.25v1.91h11.462v-1.91H6.269zm0 3.81v1.91h11.462v-1.91H6.269zm0 3.82v1.91h11.462v-1.91H6.269z" transform="matrix(2.09535 0 0 2.09517 -1.144 -1.142)"/></svg>Img
<img class="svg-icon" src="assets/icons/file-text.svg" alt="file-text">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>file-unknown</title>
<use href="assets/sprites/fullSet.svg#file-unknown"></use>
</svg>Inline
<svg id="file-unknown" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M2.455.545v22.91h19.09V5.875l-5.33-5.33H2.455zm1.91 1.91h9.54v5.73h5.73v13.36H4.365V2.455zm11.45.39l3.43 3.43h-3.43v-3.43zm-3.737 6.32a6.22 6.22 0 00-1.783.242 7.656 7.656 0 00-1.512.628l.756 1.555a7.84 7.84 0 011.198-.5c.4-.123.8-.185 1.199-.185.39 0 .694.08.913.242a.79.79 0 01.342.685c0 .19-.033.366-.1.528a1.43 1.43 0 01-.342.486 5.841 5.841 0 01-.77.613c-.486.342-.814.68-.985 1.013-.171.324-.257.723-.257 1.198v.514h1.698v-.314c0-.2.029-.371.086-.514.067-.143.18-.29.342-.442a5.46 5.46 0 01.685-.556c.562-.4.98-.8 1.255-1.2.276-.399.414-.888.414-1.468 0-.77-.275-1.384-.827-1.84-.542-.457-1.313-.686-2.312-.686zm-.399 8.132c-.352 0-.647.09-.884.271-.238.18-.357.49-.357.928 0 .418.119.722.357.912.237.181.532.272.884.272.324 0 .604-.091.842-.272.247-.19.371-.494.371-.912 0-.438-.124-.747-.37-.928a1.352 1.352 0 00-.843-.271z" transform="translate(-1.142 -1.142) scale(2.09516)"/></svg>Img
<img class="svg-icon" src="assets/icons/file-unknown.svg" alt="file-unknown">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>file-video</title>
<use href="assets/sprites/fullSet.svg#file-video"></use>
</svg>Inline
<svg id="file-video" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M2.455.545v22.91h19.09V5.875l-5.33-5.33H2.455zm1.91 1.91h9.54v5.73h5.73v13.36H4.365V2.455zm11.45.39l1.714 1.716 1.715 1.714h-3.43v-3.43zm-.391 7.241l-1.51 1.515v-1.506H6.276v8.59h7.638V17.17l1.51 1.516h2.3v-8.6h-2.3zm-7.238 1.92h3.82v4.77h-3.82v-4.77zm7.628.392v3.973l-1.9-1.906v-.16l1.9-1.907z" transform="matrix(2.09535 0 0 2.09515 -1.144 -1.142)"/></svg>Img
<img class="svg-icon" src="assets/icons/file-video.svg" alt="file-video">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>file-zip</title>
<use href="assets/sprites/fullSet.svg#file-zip"></use>
</svg>Inline
<svg id="file-zip" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M4 0v48h40V9.174L34.824 0H4zm4.002 4.002h10.344a5.918 5.918 0 00-.35 2.002v10.004h12.008V6.004c0-.7-.125-1.375-.35-2.002h3.514l6.83 6.83v33.166H8.002V4.002zm15.998 0c1.129 0 2.002.873 2.002 2.002v6.002h-4.004V6.004c0-1.129.873-2.002 2.002-2.002z"/></svg>Img
<img class="svg-icon" src="assets/icons/file-zip.svg" alt="file-zip">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>filetype-doc</title>
<use href="assets/sprites/fullSet.svg#filetype-doc"></use>
</svg>Inline
<svg version="1.1" id="filetype-doc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M2.418.508v22.984h19.164V5.86L16.23.507H2.417zm1.984 1.984h9.465v5.73h5.731v3.008H4.402V2.492zm11.45.444l1.475 1.475 1.829 1.827h-3.304V2.936zm-3.73 9.388c.513 0 .933.1 1.264.304.336.198.583.48.742.847.159.362.238.788.238 1.277 0 .49-.08.92-.244 1.285a1.837 1.837 0 01-.736.848c-.33.203-.754.304-1.27.304-.512 0-.935-.101-1.27-.304a1.868 1.868 0 01-.742-.854c-.159-.366-.239-.795-.239-1.285 0-.486.08-.91.239-1.271a1.83 1.83 0 01.741-.847c.336-.203.761-.304 1.278-.304zm5.263.006c.234 0 .47.027.708.08.243.048.472.126.688.232l-.33.807a3.483 3.483 0 00-.51-.192 1.833 1.833 0 00-.57-.086c-.379 0-.678.143-.899.43-.216.283-.324.673-.324 1.172 0 .499.103.886.31 1.164.212.274.53.41.953.41.208 0 .406-.024.596-.072.194-.049.389-.11.583-.185v.86a3.285 3.285 0 01-1.29.239c-.504 0-.919-.1-1.245-.298a1.86 1.86 0 01-.722-.847c-.155-.366-.232-.792-.232-1.278 0-.476.089-.898.266-1.264.176-.366.434-.653.774-.86.34-.208.754-.312 1.244-.312zm-12.166.067H6.78c.741 0 1.319.196 1.734.589.419.388.628.953.628 1.694 0 .543-.1.995-.304 1.357a1.94 1.94 0 01-.86.814c-.37.18-.81.271-1.318.271H5.22v-4.725zm6.904.767c-.42 0-.724.142-.914.424-.185.282-.278.67-.278 1.164 0 .495.093.883.278 1.166.19.278.492.417.907.417.424 0 .725-.14.906-.417.186-.283.278-.671.278-1.166 0-.494-.092-.882-.278-1.164-.18-.282-.48-.424-.9-.424zm-5.892.06v3.065h.423c.954 0 1.43-.523 1.43-1.57 0-.507-.112-.882-.337-1.124-.225-.248-.556-.372-.993-.372H6.23zm-1.83 5.058h15.197v3.226H4.402v-3.226z" transform="matrix(2.02302 0 0 2.0884 -.276 -1.06)"/></svg>Img
<img class="svg-icon" src="assets/icons/filetype-doc.svg" alt="filetype-doc">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>filetype-docx</title>
<use href="assets/sprites/fullSet.svg#filetype-docx"></use>
</svg>Inline
<svg version="1.1" id="filetype-docx" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M2.418.508v22.984h19.164V5.86L16.23.507H2.417zm1.984 1.984h9.465v5.73h5.731v3.008H4.402V2.492zm11.45.444l1.475 1.475 1.829 1.827h-3.304V2.936zm-6.037 9.388c.512 0 .934.1 1.265.304.335.198.583.48.741.847.16.362.239.788.239 1.277 0 .49-.082.92-.245 1.285a1.835 1.835 0 01-.735.848c-.331.203-.755.304-1.272.304-.511 0-.935-.101-1.27-.304a1.868 1.868 0 01-.742-.854c-.158-.366-.238-.795-.238-1.285 0-.486.08-.91.238-1.271a1.83 1.83 0 01.742-.847c.335-.203.76-.304 1.277-.304zm5.263.006c.234 0 .47.027.708.08.243.048.473.126.689.232l-.331.807a3.483 3.483 0 00-.51-.192 1.827 1.827 0 00-.569-.086c-.38 0-.68.143-.9.43-.217.283-.325.673-.325 1.172 0 .499.104.886.311 1.164.212.274.53.41.954.41.207 0 .406-.024.596-.072.194-.049.388-.11.582-.185v.86a3.285 3.285 0 01-1.291.239c-.503 0-.918-.1-1.245-.298a1.858 1.858 0 01-.72-.847c-.155-.366-.232-.792-.232-1.278 0-.476.088-.898.264-1.264a2.01 2.01 0 01.774-.86c.34-.208.755-.312 1.245-.312zm-12.167.067h1.562c.742 0 1.32.196 1.735.589.42.388.629.953.629 1.694 0 .543-.101.995-.304 1.357-.203.362-.49.633-.862.814-.37.18-.809.271-1.316.271H2.91v-4.725zm13.881 0h1.126l.973 1.615.953-1.615h1.132l-1.482 2.349 1.595 2.376h-1.166l-1.045-1.701-1.052 1.701H16.7l1.569-2.435-1.477-2.29zm-6.977.767c-.42 0-.723.142-.913.424-.185.282-.278.67-.278 1.164 0 .495.093.883.278 1.166.19.278.492.417.906.417.424 0 .727-.14.908-.417.185-.283.278-.671.278-1.166 0-.494-.093-.882-.278-1.164-.181-.282-.482-.424-.9-.424zm-5.891.06v3.065h.424c.953 0 1.43-.523 1.43-1.57 0-.507-.113-.882-.338-1.124-.225-.248-.556-.372-.993-.372h-.523zm.478 5.058h15.196v3.226H4.402v-3.226z" transform="matrix(2.02302 0 0 2.0884 -.276 -1.06)"/></svg>Img
<img class="svg-icon" src="assets/icons/filetype-docx.svg" alt="filetype-docx">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>filetype-pdf</title>
<use href="assets/sprites/fullSet.svg#filetype-pdf"></use>
</svg>Inline
<svg version="1.1" id="filetype-pdf" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M2.418.508v22.984h19.164V5.86L16.23.507H2.417zm1.984 1.984h9.465v5.73h5.731v3.008H4.402V2.492zm11.45.444l1.475 1.475 1.829 1.827h-3.304V2.936zm-9.7 9.46h1.482c.61 0 1.06.128 1.35.384.292.252.437.61.437 1.073 0 .278-.057.538-.172.78-.114.243-.306.44-.575.59-.265.15-.625.225-1.08.225h-.43v1.674H6.151v-4.725zm4.11 0h1.562c.742 0 1.32.197 1.735.59.42.388.629.953.629 1.694 0 .543-.101.995-.304 1.357-.203.362-.49.633-.862.814-.37.18-.809.271-1.316.271h-1.444v-4.725zm4.879 0h2.708v.82h-1.722v1.22h1.602v.82h-1.602v1.866h-.986v-4.725zm-7.977.827v1.39h.338c.278 0 .497-.054.656-.165.163-.11.244-.298.244-.563 0-.211-.066-.375-.198-.49-.128-.114-.329-.172-.603-.172h-.437zm4.11 0v3.066h.425c.953 0 1.43-.523 1.43-1.57 0-.507-.113-.882-.338-1.124-.225-.248-.556-.372-.993-.372h-.523zm-6.872 5.059h15.196v3.226H4.402v-3.226z" transform="matrix(2.02302 0 0 2.0884 -.276 -1.06)"/></svg>Img
<img class="svg-icon" src="assets/icons/filetype-pdf.svg" alt="filetype-pdf">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>folder-block</title>
<use href="assets/sprites/fullSet.svg#folder-block"></use>
</svg>Inline
<svg id="folder-block" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M4.365.545v5.73H.545v14.321a2.888 2.888 0 002.86 2.859h17.184c.69 0 1.393-.225 1.948-.719.555-.493.918-1.271.918-2.147V2.455h-6.324L15.26.545H4.366zm1.91 1.91h8.184l1.87 1.91h5.216V20.59c0 .398-.114.577-.275.72-.16.143-.413.235-.677.236a.951.951 0 01-.958-.956V6.276H6.275v-3.82zm-3.82 5.73h15.27v12.419c.002.331.056.648.152.94H3.414a.95.95 0 01-.959-.958v-12.4zm7.635 1.901c-2.626 0-4.776 2.147-4.776 4.773a4.79 4.79 0 004.776 4.776 4.79 4.79 0 004.776-4.776c0-2.626-2.15-4.773-4.776-4.773zm0 1.908c.445 0 .865.1 1.239.277l-3.825 3.833a2.88 2.88 0 01-.28-1.245 2.85 2.85 0 012.866-2.865zm2.589 1.629c.177.374.277.792.277 1.236a2.852 2.852 0 01-2.866 2.866 2.88 2.88 0 01-1.232-.274l3.82-3.828z" transform="translate(-1.142 -1.142) scale(2.09516)"/></svg>Img
<img class="svg-icon" src="assets/icons/folder-block.svg" alt="folder-block">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>folder-broken</title>
<use href="assets/sprites/fullSet.svg#folder-broken"></use>
</svg>Inline
<svg id="folder-broken" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M8.004 0v12.006H0v13.062l.89.596-.001.002 7.103 4.742 6.012-4.002 5.969 4.002 6.037-4.006 5.994 4.006 7.103-4.742-.002-.002.891-.596V12.006h-27.99V4.002h17.146l3.916 4.002h10.93v33.992c0 .834-.238 1.208-.576 1.508-.33.293-.847.482-1.389.49a1.989 1.989 0 01-1.931-2.006V28.26l-3.184 2.127-.031-.05-4.832 3.227-5.951-3.959-.04.026-.05-.033-6.03 4.002h-.002l-5.97-4.002L7.996 33.6l-4.883-3.262L0 28.26v13.75c.017 3.28 2.71 5.973 5.99 5.99h36.006c1.445 0 2.917-.472 4.08-1.506C47.24 45.46 48 43.83 48 41.996V4.002H34.75L30.834 0zM4.002 16.008h31.992v6.922l-3.99 2.666-5.99-3.998-6.032 3.998-5.97-4.002-6.016 4.002-3.994-2.668zM14.004 34.41l5.963 3.994.006.004.968-.642 5.104-3.336 5.959 3.982.057-.037.05.033 3.883-2.594v6.182c0 .705.114 1.38.319 2.002H6.012a1.99 1.99 0 01-2.01-2.01v-6.244l3.99 2.664z"/></svg>Img
<img class="svg-icon" src="assets/icons/folder-broken.svg" alt="folder-broken">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>folder-empty</title>
<use href="assets/sprites/fullSet.svg#folder-empty"></use>
</svg>Inline
<svg id="folder-empty" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M4.365.545v5.73H.545v14.321a2.888 2.888 0 002.86 2.859h17.184c.69 0 1.393-.225 1.948-.719.555-.493.918-1.271.918-2.147V2.455h-6.324L15.26.545H4.366zm1.91 1.91h8.184l1.87 1.91h5.216V20.59c0 .398-.114.577-.275.72-.16.143-.413.235-.677.236a.951.951 0 01-.958-.956V6.276H6.275v-3.82zm-3.82 5.73h15.27v12.419c.002.331.056.648.152.94H3.414a.95.95 0 01-.959-.958v-12.4z" transform="translate(-1.142 -1.142) scale(2.09516)"/></svg>Img
<img class="svg-icon" src="assets/icons/folder-empty.svg" alt="folder-empty">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>hardware-home-server</title>
<use href="assets/sprites/fullSet.svg#hardware-home-server"></use>
</svg>Inline
<svg version="1.1" id="hardware-home-server" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M8 0c-.811 0-2.322.658-2.3 1.469V44H4c-.811 0-1.3 1.189-1.3 2 0 .811.489 2 1.3 2h39.7c.81 0 1.6-1.189 1.6-2 0-.811-.79-2-1.6-2H42V1.469C42 .657 40.51 0 39.7 0H8zm1.7 4H38v40H9.7V4zm4.505 2.209c-.811 0-1.47 1.538-1.47 2.35V31.23c0 .812.659 1.47 1.47 1.47h19.59a1.47 1.47 0 001.47-1.47V8.56c0-.812-.659-2.35-1.47-2.35h-19.59zm1.469 4h16.652v3.7H15.674v-3.7zm0 7.7h16.652v3.7H15.674v-3.7zm0 7.7h16.652v3.7H15.674v-3.7zM24 34.262a4.413 4.413 0 00-4.408 4.408A4.413 4.413 0 0024 43.078a4.413 4.413 0 004.408-4.408A4.413 4.413 0 0024 34.262zm0 2.94a1.47 1.47 0 11-.002 2.939A1.47 1.47 0 0124 37.2z"/></svg>Img
<img class="svg-icon" src="assets/icons/hardware-home-server.svg" alt="hardware-home-server">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>hardware-saas</title>
<use href="assets/sprites/fullSet.svg#hardware-saas"></use>
</svg>Inline
<svg version="1.1" id="hardware-saas" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M23.478 5.95l-.041.003c-4.895.2-9.332 2.95-11.688 7.246l-.25.453v.045c-.053.09-.052.05-.117.198v.003l-.006.004c-.609 1.388-.78 2.9-.975 4.397-5.818.82-10.394 5.643-10.39 11.68-.01.183-.012.367 0 .55C.3 36.934 5.61 42.02 12.022 42.027h5.915v-4.013h-5.915a8 8 0 01-8.005-7.676v-.027l-.004-.034a.803.803 0 010-.119l.008-.076V30a7.955 7.955 0 018.017-8.02l1.963.01.05-1.965a11.96 11.96 0 01.987-4.46c.079-.11.233-.316.346-.631a9.963 9.963 0 018.22-4.971h.338a10.026 10.026 0 019.967 10.021v6.036H38a5.969 5.969 0 015.984 6.013v.408a6.143 6.143 0 01-1.738 3.842 6.054 6.054 0 01-4.238 1.754h-12.04v-9.201l2.593 2.592 2.838-2.836-7.444-7.444-7.416 7.444 2.844 2.832 2.568-2.574v13.2h16.061a10.074 10.074 0 007.072-2.921l.008-.014.008-.008a10.162 10.162 0 002.894-6.38l.004-.075v-.615c.012-5.504-4.482-10.02-9.986-10.035h-.09v-2.033c-.026-7.68-6.266-13.953-13.945-14.02h-.008z"/></svg>Img
<img class="svg-icon" src="assets/icons/hardware-saas.svg" alt="hardware-saas">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>hardware-server</title>
<use href="assets/sprites/fullSet.svg#hardware-server"></use>
</svg>Inline
<svg version="1.1" id="hardware-server" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M2.068 0C.926 0 0 .866 0 1.934v12.173c.001 1.067.927 1.334 2.068 1.334h43.864c1.141 0 2.067-.267 2.068-1.334V1.934C48 .866 47.074 0 45.932 0H23.934zM4 4h40v7.441H4zm5.328.121a3.604 3.604 0 00-3.6 3.6c0 1.985 1.615 3.6 3.6 3.6s3.6-1.615 3.6-3.6-1.615-3.6-3.6-3.6zm0 1.6c1.103 0 2 .897 2 2s-.897 2-2 2c-1.102 0-2-.897-2-2s.898-2 2-2zm17.871 0a.8.8 0 00-.799.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.201 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm-11.2 2.4a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zM2.068 16.28C.926 16.28 0 17.145 0 18.213v12.174c.001 1.067.927 1.334 2.068 1.334h43.864c1.141 0 2.067-.267 2.068-1.334V18.213c0-1.068-.926-1.934-2.068-1.934H23.934zm1.932 4h40v7.442H4zm5.328.121a3.604 3.604 0 00-3.6 3.6c0 1.985 1.615 3.6 3.6 3.6s3.6-1.615 3.6-3.6-1.615-3.6-3.6-3.6zm0 1.6c1.103 0 2 .897 2 2s-.897 2-2 2c-1.102 0-2-.897-2-2s.898-2 2-2zM27.2 22a.8.8 0 00-.799.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.201 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm-11.2 2.4a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zM2.068 32.56C.926 32.559 0 33.424 0 34.492v12.174C.001 47.733.927 48 2.068 48h43.864c1.141 0 2.067-.267 2.068-1.334V34.492c0-1.068-.926-1.933-2.068-1.933H23.934zm1.932 4h40V44H4zm5.328.12a3.604 3.604 0 00-3.6 3.6c0 1.985 1.615 3.6 3.6 3.6s3.6-1.615 3.6-3.6-1.615-3.6-3.6-3.6zm0 1.6c1.103 0 2 .897 2 2s-.897 2-2 2c-1.102 0-2-.897-2-2s.898-2 2-2zm17.871 0a.8.8 0 00-.799.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.201 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm-11.2 2.4a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8z"/></svg>Img
<img class="svg-icon" src="assets/icons/hardware-server.svg" alt="hardware-server">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>logo-docker</title>
<use href="assets/sprites/fullSet.svg#logo-docker"></use>
</svg>Inline
<svg version="1.1" id="logo-docker" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M37.026 13.608l.45-.681.786.477.348.249c.84.648 2.607 2.304 2.988 5.052a11.43 11.43 0 012.019-.18c1.602 0 2.679.372 3.291.68l.315.172.204.135.573.468-.198.6a6.132 6.132 0 01-1.41 2.19c-.87.897-2.4 1.956-4.827 2.094l-.534.015h-.444c-1.11 2.931-2.601 6.234-5.106 9.198a21.243 21.243 0 01-5.22 4.464 23.823 23.823 0 01-7.647 2.904 30.263 30.263 0 01-5.86.555c-4.35 0-8.19-.864-10.55-2.376-2.11-1.347-3.73-3.546-4.819-6.53a24.75 24.75 0 01-1.383-8.491 1.548 1.548 0 011.296-1.548l.204-.015h31.62l.277-.021.447-.048c.768-.102 1.938-.33 2.76-.81-.984-1.63-1.263-3.534-.804-5.562a9.9 9.9 0 01.9-2.43zM8.669 17.352l.12.02a.381.381 0 01.231.247l.018.12v3.945l-.018.123a.381.381 0 01-.234.246l-.117.018H4.433a.372.372 0 01-.35-.264l-.022-.12v-3.951l.021-.12a.381.381 0 01.234-.25l.117-.017H8.67zm5.841 0l.117.02a.381.381 0 01.234.247l.018.12v3.945l-.02.123a.381.381 0 01-.235.246l-.117.018h-4.236a.375.375 0 01-.35-.264l-.022-.117v-3.951a.39.39 0 01.255-.37l.117-.02h4.24zm5.929 0l.117.02a.381.381 0 01.23.247l.022.12v3.945l-.021.123a.381.381 0 01-.234.246l-.117.018h-4.237a.372.372 0 01-.35-.264l-.019-.12v-3.951l.018-.12a.381.381 0 01.234-.25l.117-.017h4.24zm5.856 0l.117.02a.381.381 0 01.234.247l.02.12v3.945a.39.39 0 01-.254.369l-.12.018h-4.233a.372.372 0 01-.351-.264l-.018-.12v-3.951l.018-.12a.381.381 0 01.234-.25l.12-.017h4.236zm5.91 0l.117.02a.381.381 0 01.234.247l.018.12v3.945a.39.39 0 01-.255.369l-.117.018h-4.236a.372.372 0 01-.351-.264l-.018-.12v-3.951l.018-.12a.381.381 0 01.234-.25l.12-.017h4.233zm-17.7-5.676l.12.02a.381.381 0 01.23.244l.021.123v3.945a.39.39 0 01-.255.369l-.117.02h-4.233a.375.375 0 01-.35-.27l-.022-.12v-3.944a.39.39 0 01.255-.366l.117-.021h4.236zm5.928 0l.12.02a.381.381 0 01.23.244l.022.123v3.945a.39.39 0 01-.255.369l-.117.02h-4.234a.375.375 0 01-.35-.27l-.019-.12v-3.944l.018-.12a.381.381 0 01.234-.246l.117-.021h4.237zm5.859 0c.162 0 .3.11.35.264l.022.123v3.945a.39.39 0 01-.255.369l-.12.02h-4.23a.375.375 0 01-.351-.27l-.018-.12v-3.944l.018-.12a.381.381 0 01.234-.246l.12-.021h4.236zm0-5.676c.162 0 .3.11.35.264l.022.12v3.948a.39.39 0 01-.255.369l-.12.018h-4.23a.372.372 0 01-.351-.264l-.018-.12V6.384l.018-.12a.381.381 0 01.234-.246L22.059 6h4.236z"/></svg>Img
<img class="svg-icon" src="assets/icons/logo-docker.svg" alt="logo-docker">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>logo-qemu</title>
<use href="assets/sprites/fullSet.svg#logo-qemu"></use>
</svg>Inline
<svg version="1.1" id="logo-qemu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24.006 0C10.752 0 0 10.743 0 24s10.752 24 24.006 24c4.338 0 8.4-1.146 11.91-3.157L37.164 48h9.682l-3.786-9.408A23.69 23.817 0 0048 24C48 10.743 37.26 0 24.006 0zm-6.37 3.953c.796.682.648.398 1.72.27 1.22-.799 1.786 1.894 2.294.392 1.496.195 3.084.683 4.5 1.174a6.894 6.931 0 013.718 2.268l-.028.014.7.931c.09.16.164.33.24.499.284 2.423 2.96 2.392 4.754 3.267 1.534.547 3.38 1.38 3.57 3.24-.386-.085-1.882-1.853-3.06-2.025a7.838 7.88 0 01-2.188-.513l-4.136-.77v-.014a6.07 6.103 0 01-.618-.107v.026l-5.854-.728c.096.067.2.155.296.242l6 1.176v-.014l.418.106 1.678.378c.332.033.668.087.94.135 1.712.475 3.736.39 5.142 1.593-.368.707-2.42.307-3.438.217-.124-.024-.262-.046-.388-.069l-.068-.014c-1.392-.227-2.822-.241-4.162.177h-.014a6.386 6.42 0 00-1.342.608c-1.936 1.132-4.328 1.542-5.934 3.17-1.574 1.704-1.478 4.046-1.208 6.224h.066v.553c.026.19.056.382.08.567.82 4.403 3 8.445 3.68 12.892.13 1.695.406 3.885.618 5.264-.612-.183-.95-2.94-1.088-2.024a76.392 76.802 0 00-7.13-10.557C15.688 30.483 14 28.36 11.97 26.682c-1.37-1.061-.936-3.116-1.074-4.628-.46-1.862-.188-3.716.12-5.576.626-1.936.836-3.957 1.692-5.817 1.306-1.168 1.338-3.278 2.606-4.293.188.117.314.17.4.201l.136.016h.014c.18-.19-1.776-2.244.04-1.432.07-1.08 1.708-.257 1.732-1.2zM25.33 8.34c-.646.019-1.148.262-1.29.674-.228.664.546 1.518 1.732 1.93 1.188.413 2.336.22 2.564-.444.228-.664-.544-1.532-1.732-1.944a3.684 3.704 0 00-1.274-.216z"/></svg>Img
<img class="svg-icon" src="assets/icons/logo-qemu.svg" alt="logo-qemu">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-arrow-down-circle</title>
<use href="assets/sprites/fullSet.svg#ui-arrow-down-circle"></use>
</svg>Inline
<svg version="1.1" id="ui-arrow-down-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M8.056.498a8 8 0 100 16.001 8 8 0 000-16zm0 1.334c3.59 0 6.667 3.077 6.667 6.666 0 3.59-3.077 6.667-6.666 6.667-3.59 0-6.667-3.077-6.667-6.666 0-3.59 3.077-6.667 6.666-6.667zm-.069 2.665c-.328.005-.658.26-.67.76l.079 5.192L5.71 8.826c-.74-.673-1.637.313-.897.986l2.75 2.5a.749.749 0 001.01-.015l1.374-1.292 1.374-1.29c.74-.674-.156-1.633-.896-.96l-.848.82-.848.854-.078-5.192c-.008-.5-.335-.745-.664-.74z" transform="rotate(.862 123.442 13.497) scale(3)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-arrow-down-circle.svg" alt="ui-arrow-down-circle">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-arrow-down</title>
<use href="assets/sprites/fullSet.svg#ui-arrow-down"></use>
</svg>Inline
<svg version="1.1" id="ui-arrow-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M26 3c0-4-4.006-4-4 0v37.7L7.768 26.351c-2.75-2.789-5.577-.194-2.948 2.709 5.703 6.027 11.474 11.976 17.18 18 .595.586 1.277.953 2 .94.77-.01 1.432-.364 2-.94l17.18-18c2.63-2.903-.199-5.498-2.948-2.708L26 40.7z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-arrow-down.svg" alt="ui-arrow-down">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-arrow-left-circle</title>
<use href="assets/sprites/fullSet.svg#ui-arrow-left-circle"></use>
</svg>Inline
<svg version="1.1" id="ui-arrow-left-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M8.056.498a8 8 0 100 16.001 8 8 0 000-16zm0 1.334c3.59 0 6.667 3.077 6.667 6.666 0 3.59-3.077 6.667-6.666 6.667-3.59 0-6.667-3.077-6.667-6.666 0-3.59 3.077-6.667 6.666-6.667zm-.78 3.147c-.177.008-.365.09-.533.276l-2.5 2.75a.749.749 0 00.015 1.01l1.291 1.374 1.291 1.374c.674.74 1.633-.156.96-.896l-.82-.848-.854-.848 5.192-.078c1-.015.98-1.31-.02-1.334l-5.192.079 1.623-1.686c.505-.555.076-1.199-.453-1.173z" transform="rotate(.862 123.442 13.497) scale(3)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-arrow-left-circle.svg" alt="ui-arrow-left-circle">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-arrow-left</title>
<use href="assets/sprites/fullSet.svg#ui-arrow-left"></use>
</svg>Inline
<svg version="1.1" id="ui-arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M45 26c4 0 4-4.006 0-4H7.3L21.649 7.768c2.789-2.75.194-5.577-2.709-2.948C12.913 10.523 6.964 16.294.94 22c-.586.595-.953 1.277-.94 2 .01.77.364 1.432.94 2l18 17.18c2.903 2.63 5.498-.199 2.708-2.948L7.3 26z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-arrow-left.svg" alt="ui-arrow-left">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-arrow-right-circle</title>
<use href="assets/sprites/fullSet.svg#ui-arrow-right-circle"></use>
</svg>Inline
<svg version="1.1" id="ui-arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M8.056.498a8 8 0 100 16.001 8 8 0 000-16zm0 1.334c3.59 0 6.667 3.077 6.667 6.666 0 3.59-3.077 6.667-6.666 6.667-3.59 0-6.667-3.077-6.667-6.666 0-3.59 3.077-6.667 6.666-6.667zm.675 3.125c-.53-.01-.939.647-.418 1.186L9.987 7.78l-5.193.078c-.998.053-.98 1.349.02 1.334l5.193-.079-.828.874-.795.872c-.65.76.335 1.627.986.867l1.25-1.413L11.868 8.9a.749.749 0 00-.015-1.01L9.272 5.217c-.174-.18-.364-.257-.54-.26z" transform="rotate(.862 123.442 13.497) scale(3)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-arrow-right-circle.svg" alt="ui-arrow-right-circle">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-arrow-right</title>
<use href="assets/sprites/fullSet.svg#ui-arrow-right"></use>
</svg>Inline
<svg version="1.1" id="ui-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M3 22c-4 0-4 4.006 0 4h37.7L26.351 40.232c-2.789 2.75-.194 5.577 2.709 2.948 6.027-5.703 11.976-11.474 18-17.18.586-.595.953-1.277.94-2-.01-.77-.364-1.432-.94-2l-18-17.18c-2.903-2.63-5.498.199-2.708 2.948L40.7 22z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-arrow-right.svg" alt="ui-arrow-right">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-arrow-top-circle</title>
<use href="assets/sprites/fullSet.svg#ui-arrow-top-circle"></use>
</svg>Inline
<svg version="1.1" id="ui-arrow-top-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M8.056.498a8 8 0 100 16.001 8 8 0 000-16zm0 1.334c3.59 0 6.667 3.077 6.667 6.666 0 3.59-3.077 6.667-6.666 6.667-3.59 0-6.667-3.077-6.667-6.666 0-3.59 3.077-6.667 6.666-6.667zm-.109 2.666a.722.722 0 00-.5.203L4.776 7.283c-.72.695.207 1.654.926.959l1.636-1.674.078 5.192c.053.999 1.349.98 1.334-.02l-.08-5.192.874.828.872.795c.76.65 1.627-.335.867-.986L9.87 5.935 8.458 4.687a.773.773 0 00-.51-.188z" transform="rotate(.862 123.442 13.497) scale(3)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-arrow-top-circle.svg" alt="ui-arrow-top-circle">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-arrow-up</title>
<use href="assets/sprites/fullSet.svg#ui-arrow-up"></use>
</svg>Inline
<svg version="1.1" id="ui-arrow-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M22 45c0 4 4.006 4 4 0V7.3l14.232 14.349c2.75 2.789 5.577.194 2.948-2.709C37.477 12.913 31.706 6.964 26 .94c-.595-.586-1.277-.953-2-.94-.77.01-1.432.364-2 .94l-17.18 18c-2.63 2.903.199 5.498 2.948 2.708L22 7.3z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-arrow-up.svg" alt="ui-arrow-up">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-camera</title>
<use href="assets/sprites/fullSet.svg#ui-camera"></use>
</svg>Inline
<svg viewBox="0 -2 48 48" version="1.1" id="ui-camera" xmlns="http://www.w3.org/2000/svg"><path d="M273 468c-1.656 0-2.205 1.431-3 3l-1.5 3H264a6 6 0 00-6 6v24a6 6 0 006 6h36a6 6 0 006-6v-24a6 6 0 00-6-6h-4.5l-1.5-3c-.884-1.745-1.344-3-3-3h-18zm9 11.877a12.165 12.165 0 0112.166 12.164A12.165 12.165 0 01282 504.207a12.165 12.165 0 01-12.166-12.166A12.165 12.165 0 01282 479.877zm0 3.924a8.165 8.165 0 00-8.164 8.164A8.165 8.165 0 00282 500.13a8.165 8.165 0 008.164-8.166A8.165 8.165 0 00282 483.8z" transform="translate(-258 -467)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-camera.svg" alt="ui-camera">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-cancel</title>
<use href="assets/sprites/fullSet.svg#ui-cancel"></use>
</svg>Inline
<svg id="ui-cancel" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M12 .545C5.685.545.545 5.685.545 12S5.685 23.455 12 23.455 23.455 18.315 23.455 12 18.315.545 12 .545zm0 1.91c2.297 0 4.4.806 6.044 2.15L4.606 18.046A9.511 9.511 0 012.456 12 9.53 9.53 0 0112 2.455zm7.394 3.5A9.511 9.511 0 0121.544 12 9.53 9.53 0 0112 21.545c-2.297 0-4.4-.806-6.044-2.15l13.438-13.44z" transform="translate(-1.142 -1.142) scale(2.09516)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-cancel.svg" alt="ui-cancel">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-check-with-border</title>
<use href="assets/sprites/fullSet.svg#ui-check-with-border"></use>
</svg>Inline
<svg version="1.1" id="ui-check-with-border" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M5.334 0C2.401 0 0 2.4 0 5.334v37.332C0 45.599 2.4 48 5.334 48h37.332C45.599 48 48 46.933 48 44V21.334h-4V44H4V4h28V0H5.334zM44.09 5.242L21.184 28.158l-8.075-8.07-2.828 2.828 10.903 10.898L46.92 8.07l-2.83-2.828z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-check-with-border.svg" alt="ui-check-with-border">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-check</title>
<use href="assets/sprites/fullSet.svg#ui-check"></use>
</svg>Inline
<svg version="1.1" id="ui-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M47.35 10.973c2.28-2.411-.363-5.093-2.807-2.849L16.121 36.13 3.471 23.292c-2.412-2.28-5.094.364-2.85 2.808l13.65 13.852a2.578 2.578 0 003.644.026z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-check.svg" alt="ui-check">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-chevron-down</title>
<use href="assets/sprites/fullSet.svg#ui-chevron-down"></use>
</svg>Inline
<svg version="1.1" id="ui-chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-.304 30.41l175.66 175.116 175.117-175.66-20.666-20.602-154.514 154.994L20.298 9.744z" transform="translate(.05 9.243) scale(.13685)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-chevron-down.svg" alt="ui-chevron-down">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-chevron-left</title>
<use href="assets/sprites/fullSet.svg#ui-chevron-left"></use>
</svg>Inline
<svg version="1.1" id="ui-chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-80.912-122.112l23.978-24.104 24.105 23.979-2.821 2.835-21.269-21.157-21.158 21.268z" transform="rotate(-89.881 62.04 -94.76) scale(.99832)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-chevron-left.svg" alt="ui-chevron-left">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-chevron-right</title>
<use href="assets/sprites/fullSet.svg#ui-chevron-right"></use>
</svg>Inline
<svg version="1.1" id="ui-chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-80.912-122.112l23.978-24.104 24.105 23.979-2.821 2.835-21.269-21.157-21.158 21.268z" transform="scale(-.99832 .99832) rotate(-89.881 38.105 -70.828)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-chevron-right.svg" alt="ui-chevron-right">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-chevron-up</title>
<use href="assets/sprites/fullSet.svg#ui-chevron-up"></use>
</svg>Inline
<svg version="1.1" id="ui-chevron-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-80.912-122.112l23.978-24.104 24.105 23.979-2.821 2.835-21.269-21.157-21.158 21.268z" transform="translate(80.521 156.67) scale(.99831)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-chevron-up.svg" alt="ui-chevron-up">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-clock</title>
<use href="assets/sprites/fullSet.svg#ui-clock"></use>
</svg>Inline
<svg id="ui-clock" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M12 .545C5.685.545.545 5.685.545 12S5.685 23.455 12 23.455 23.455 18.315 23.455 12 18.315.545 12 .545zm0 1.91A9.53 9.53 0 0121.545 12a9.53 9.53 0 01-10.523 9.495 9.53 9.53 0 01-8.555-9.988A9.529 9.529 0 0112 2.456zm-.956 1.905v5.998A1.915 1.915 0 0010.095 12 1.92 1.92 0 0012 13.905c.169 0 .333-.023.49-.066l3.603 3.606 1.352-1.352-3.606-3.604c.043-.156.066-.32.066-.489 0-.694-.385-1.309-.95-1.642V4.36h-1.91z" transform="translate(-1.142 -1.142) scale(2.09516)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-clock.svg" alt="ui-clock">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-earth</title>
<use href="assets/sprites/fullSet.svg#ui-earth"></use>
</svg>Inline
<svg version="1.1" id="ui-earth" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M213.333 0c-10.177 0-20.168.757-29.965 2.135a213.333 213.333 0 00-.66.087 212.03 212.03 0 00-29.479 6.424 211.71 211.71 0 00-28.177 10.486 213.333 213.333 0 00-.642.295 212.819 212.819 0 00-26.025 14.236 213.333 213.333 0 00-.729.469 213.938 213.938 0 00-23.298 17.43 213.333 213.333 0 00-1.372 1.181 214.677 214.677 0 00-20.243 20.243 213.333 213.333 0 00-1.18 1.372 213.938 213.938 0 00-17.431 23.298 213.333 213.333 0 00-.469.73 212.819 212.819 0 00-14.236 26.024 213.333 213.333 0 00-.295.642A211.71 211.71 0 008.646 153.23a212.03 212.03 0 00-6.424 29.48 213.333 213.333 0 00-.087.66C.757 193.164 0 203.155 0 213.332c0 10.178.757 20.168 2.135 29.966a213.333 213.333 0 00.087.66 212.03 212.03 0 006.424 29.478 211.71 211.71 0 0010.486 28.178 213.333 213.333 0 00.295.642 212.818 212.818 0 0014.236 26.024 213.333 213.333 0 00.469.73 213.938 213.938 0 0017.43 23.298 213.333 213.333 0 001.181 1.372 214.677 214.677 0 0020.243 20.243 213.333 213.333 0 001.372 1.18 213.938 213.938 0 0023.298 17.43 213.333 213.333 0 00.73.47 212.818 212.818 0 0026.024 14.236 213.333 213.333 0 00.642.295 211.71 211.71 0 0028.177 10.486 212.03 212.03 0 0029.48 6.423 213.333 213.333 0 00.66.087c9.796 1.378 19.787 2.136 29.964 2.136 10.178 0 20.168-.758 29.966-2.136a213.333 213.333 0 00.66-.087 212.03 212.03 0 0029.478-6.423 211.71 211.71 0 0028.178-10.486 213.333 213.333 0 00.642-.295 212.817 212.817 0 0026.024-14.237 213.333 213.333 0 00.73-.468 213.938 213.938 0 0023.298-17.43 213.333 213.333 0 001.372-1.181 214.677 214.677 0 0020.243-20.243 213.333 213.333 0 001.18-1.372 213.938 213.938 0 0017.43-23.299 213.333 213.333 0 00.47-.729 212.817 212.817 0 0014.236-26.024 213.333 213.333 0 00.295-.642 211.71 211.71 0 0010.486-28.178 212.03 212.03 0 006.423-29.479 213.333 213.333 0 00.087-.66c1.378-9.797 2.136-19.787 2.136-29.965 0-3.513-.093-6.997-.26-10.468a213.333 213.333 0 000-.105 215.47 215.47 0 00-.713-9.635c-.021-.23-.03-.464-.052-.694a213.333 213.333 0 000-.035c-.308-3.166-.717-6.304-1.163-9.427-.044-.311-.076-.627-.121-.938a213.333 213.333 0 00-.018-.104 212.44 212.44 0 00-1.77-10.208 212.18 212.18 0 00-2.292-10.226 211.814 211.814 0 00-18.802-48.733 213.236 213.236 0 00-5.157-9.097 213.234 213.234 0 00-5.173-8.16c-.151-.227-.282-.467-.434-.694a213.333 213.333 0 00-.07-.104 213.712 213.712 0 00-5.33-7.552c-.216-.295-.406-.61-.625-.903a213.333 213.333 0 00-.052-.07c-1.688-2.27-3.45-4.483-5.225-6.683-.396-.491-.763-1.006-1.163-1.494a213.333 213.333 0 00-.087-.104c-1.688-2.05-3.447-4.038-5.209-6.024-.525-.593-1.013-1.219-1.545-1.806a213.333 213.333 0 00-.156-.173 214.852 214.852 0 00-14.653-14.636 213.333 213.333 0 00-1.805-1.545c-1.986-1.761-3.974-3.52-6.025-5.208l-.104-.087a213.333 213.333 0 00-1.493-1.163c-2.2-1.776-4.413-3.537-6.684-5.226l-.07-.052a213.333 213.333 0 00-.902-.625 213.722 213.722 0 00-7.552-5.33l-.104-.07a213.333 213.333 0 00-.695-.433 213.235 213.235 0 00-8.16-5.174 213.25 213.25 0 00-9.097-5.156 211.814 211.814 0 00-48.732-18.802 212.178 212.178 0 00-10.226-2.292 212.445 212.445 0 00-10.208-1.77l-.105-.018a213.333 213.333 0 00-.937-.122c-3.123-.445-6.262-.854-9.427-1.163h-.035a213.333 213.333 0 00-.694-.052c-3.195-.3-6.402-.554-9.636-.712-.034-.001-.07.002-.104 0A213.333 213.333 0 00213.333 0zm1.51 17.813a195.556 195.556 0 01146.615 67.934l-66.927-15.99-28.889 57.76 25.799 64.48h31.285l61.267 115.954a195.556 195.556 0 01-170.66 100.938 195.556 195.556 0 01-19.6-1.545c-.795-1.108-2.285-2.5-5.105-4.34l57.066-113.212-12.447-87.118h-71.181l-60.556-24.22-16.684 33.386 12.014 60.087 41.823 41.823 16.736 86.18A195.556 195.556 0 0117.778 213.334 195.556 195.556 0 0139.01 124.74l67.657 45.92 96.007-79.618V42.986c2.708-.167 8.15-17.211 12.17-25.173zm-81.475 44.722l37.274 12.135v1.337l-66.857 55.469-12.17-6.007 41.753-62.934zm173.576 53.94l36.997 24.688 23.82 85.886L346.544 160h-33.437l-12.414-31.042 6.25-12.482zM119.062 219.932l36.84 14.74 49.584-.018 7.118 49.757-33.785 67.57h-8.16v-51.494l-44.34-44.358-7.257-36.197z" transform="scale(.1125)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-earth.svg" alt="ui-earth">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-edit</title>
<use href="assets/sprites/fullSet.svg#ui-edit"></use>
</svg>Inline
<svg id="ui-edit" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M19.8.545a3.646 3.646 0 00-2.585 1.07L7.3 11.53l-1.288 6.458L12.47 16.7l9.914-9.914a3.646 3.646 0 001.07-2.586A3.668 3.668 0 0019.803.545H19.8zM.546 2.455v21h21V12h-1.91v9.545H2.455V4.365h10.506v-1.91H.545zm19.254 0h.002c.975 0 1.744.77 1.744 1.744v.002c0 .463-.183.906-.51 1.233l-9.506 9.505-3.084.616.616-3.084 9.505-9.506c.327-.327.77-.51 1.233-.51z" transform="translate(-1.142 -1.142) scale(2.09515)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-edit.svg" alt="ui-edit">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-external-link</title>
<use href="assets/sprites/fullSet.svg#ui-external-link"></use>
</svg>Inline
<svg version="1.1" id="ui-external-link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M45.42 0L29.992.008a2.571 2.571 0 00-2.57 2.572c0 1.42 1.153 1.477 2.572 1.428l11.572-.404L17.9 26.482c-2.255 2.423.426 5.07 2.846 2.813L44.43 6.398 44 18c.002 3.429 4.002 3.427 4-.002L47.992 2.57c0-.68-.268-1.33-.748-1.812l-.008-.004-.002-.008A2.567 2.567 0 0045.42 0zM7.715 6.857A7.715 7.715 0 000 14.572v25.713A7.715 7.715 0 007.715 48h25.713a7.715 7.715 0 007.715-7.715V26.572c0-3.428-4-3.428-4 0v13.713c0 1.42-2.295 3.715-3.715 3.715H7.715C6.295 44 4 41.705 4 40.285V14.572c0-1.42 2.295-3.715 3.715-3.715h13.713c3.428 0 3.428-4 0-4z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-external-link.svg" alt="ui-external-link">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-feed</title>
<use href="assets/sprites/fullSet.svg#ui-feed"></use>
</svg>Inline
<svg version="1.1" id="ui-feed" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M2.75 1c-1 0-1 1.083 0 1.083 5.937 0 11.167 5.23 11.167 11.167 0 1 1.083 1 1.083 0C15 6.485 9.515 1 2.75 1zm0 5.417c-1 0-1 1.083 0 1.083a5.75 5.75 0 015.75 5.75c0 1 1.083 1 1.083 0 0-4.004-2.829-6.833-6.833-6.833zM3.5 11c-2 0-2 3 0 3s2-3 0-3z" transform="translate(-7.385 -3.692) scale(3.6923)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-feed.svg" alt="ui-feed">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-light-dark</title>
<use href="assets/sprites/fullSet.svg#ui-light-dark"></use>
</svg>Inline
<svg id="ui-light-dark" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 0C10.769 0 0 10.769 0 24s10.769 24 24 24c12.235 0 22.356-9.21 23.813-21.059.118-.964.187-1.945.187-2.941 0-.965-.064-1.916-.176-2.852a24 24 0 00-.023-.185 23.84 23.84 0 00-.524-2.8 23.767 23.767 0 00-.869-2.743 24 24 0 00-.056-.145 23.909 23.909 0 00-1.157-2.515 24 24 0 00-.066-.127 24.025 24.025 0 00-1.412-2.291 24 24 0 00-.254-.356 24.15 24.15 0 00-1.557-1.941 24 24 0 00-.304-.336 24.251 24.251 0 00-1.774-1.727 24 24 0 00-.35-.3 24.137 24.137 0 00-2.11-1.602 24 24 0 00-.179-.115 24.01 24.01 0 00-2.36-1.371 24 24 0 00-.071-.041 24 24 0 00-.004.002A23.841 23.841 0 0024 0zm0 4c2.355 0 4.611.408 6.707 1.15A24 24 0 0021.434 24a24 24 0 009.277 18.85A20.038 20.038 0 0124 44C12.93 44 4 35.07 4 24S12.93 4 24 4z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-light-dark.svg" alt="ui-light-dark">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-link</title>
<use href="assets/sprites/fullSet.svg#ui-link"></use>
</svg>Inline
<svg version="1.1" id="ui-link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M33.988.003c-2.956.06-6.031 1.2-8.852 3.806l-3.812 3.664c-2.317 2.389.316 5.107 2.797 2.887l3.762-3.615c3.964-3.725 9.94-3.005 13.2.336 3.262 3.34 3.808 9.303-.072 13.115l-6.554 6.41c-3.624 3.484-11.165 2.853-14.117-1.207-2.004-2.921-5.59-.546-3.424 2.257a13.49 13.49 0 009.724 5.495h.002a13.524 13.524 0 0010.553-3.71l6.629-6.374.035-.033c6.209-6.202 4.75-13.988.129-18.733-2.6-2.669-6.2-4.376-10-4.298zM20.263 14.684a13.51 13.51 0 00-9.75 3.932l-6.51 6.496-.033.033c-6.092 6.314-4.491 14.07.217 18.73 4.709 4.66 12.525 6.223 18.86.148l3.742-3.732c2.272-2.43-.41-5.101-2.85-2.836l-3.693 3.684c-3.895 3.796-9.885 3.185-13.207-.096-3.323-3.28-3.978-9.231-.17-13.113l6.433-6.53c3.558-3.549 11.111-3.056 14.14.95 2.056 2.884 5.596.443 3.378-2.32a13.489 13.489 0 00-9.822-5.315h-.004a13.601 13.601 0 00-.73-.031z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-link.svg" alt="ui-link">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-logout</title>
<use href="assets/sprites/fullSet.svg#ui-logout"></use>
</svg>Inline
<svg version="1.1" id="ui-logout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-85.333-42.667v48h40v-10h-4v6h-32v-40h32v6h4v-10h-40zm36 12.614l-3 3.394 6.5 5.992h-24.5v4h24.5l-6.5 5.813 3 3.394 12.017-11.297-12.017-11.296z" transform="translate(85.333 42.667)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-logout.svg" alt="ui-logout">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-note</title>
<use href="assets/sprites/fullSet.svg#ui-note"></use>
</svg>Inline
<svg version="1.1" id="ui-note" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0v384h260.219L384 260.219V0H0zm32 32h320v181.594H213.594V352H32V32zm213.594 213.594H352L245.594 352V245.594z" transform="scale(.125)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-note.svg" alt="ui-note">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-pin</title>
<use href="assets/sprites/fullSet.svg#ui-pin"></use>
</svg>Inline
<svg id="ui-pin" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M18.832 0a4.826 4.826 0 00-1.764.323 5.143 5.143 0 00-2.59 1.953 5.266 5.266 0 00-.933 2.947c-.001 1.48.88 2.828 2.123 3.846l-.043 8.37c-.67.464-1.368.89-1.944 1.47a14.472 14.472 0 00-4.289 10.313l.006 2.08 12.637.006L22.96 48h2.064l.94-16.69 12.637.006.008-2.08A14.48 14.48 0 0034.38 18.97c-.587-.6-1.307-1.038-1.994-1.516l-.03-8.377c1.243-1.017 2.12-2.365 2.12-3.844 0-2.021-1.286-4.137-3.516-4.903a4.844 4.844 0 00-1.74-.326h-.012zm-.041 4.168l10.44.004h.011a.679.679 0 01.256.05l.055.02.055.02c.578.193.697.526.697.969 0 .443-.123.779-.701.97l-1.432.475.049 13.016 1.068.592c.78.433 1.496.976 2.12 1.614l.005.005.01.01c1.428 1.43 2.199 3.281 2.604 5.229l-20.048-.008c.41-1.965 1.191-3.832 2.64-5.266l.009-.007.006-.006a9.231 9.231 0 012.084-1.575l1.068-.591.06-13.017-1.431-.476c-.578-.193-.7-.528-.7-.97 0-.444.124-.78.702-.972l.05-.017.055-.02a.67.67 0 01.254-.047z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-pin.svg" alt="ui-pin">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-qrcode</title>
<use href="assets/sprites/fullSet.svg#ui-qrcode"></use>
</svg>Inline
<svg version="1.1" id="ui-qrcode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M0 0v20h20V0H0zm20 20v4h4v-4h-4zm4 4v4h4v-4h-4zm4 4v4h-4v4h4v4h8v-4h4v4h4v2h4V28h-4v4h-4v-4h-4.041v-3.592h-4V28H28zm12 0h4v-4h-4v4zM28 0v20h20V0H28zM3.637 3.637h12.726v12.726H3.637V3.637zm28 0h12.726v12.726H31.637V3.637zM7.982 8.166l.002 3.668h4.034V8.166H7.982zm28 0l.002 3.668h4.034V8.166h-4.036zM0 28v20h20V28H0zm3.637 3.637h12.726v12.726H3.637V31.637zm4.345 4.529l.002 3.668h4.034v-3.668H7.982zM24 44v4h8v-4h-8zm12 0v4h4v-4h-4zm8 0v4h4v-4h-4z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-qrcode.svg" alt="ui-qrcode">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-secret</title>
<use href="assets/sprites/fullSet.svg#ui-secret"></use>
</svg>Inline
<svg version="1.1" id="ui-secret" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M38.991 28.903l2.24-5.87A1.498 1.498 0 0039.826 21h-5.484c1.031-1.772 1.669-3.806 1.669-6v-.028c3.675-.731 6-1.79 6-2.972 0-1.247-2.56-2.353-6.572-3.094-.863-3.075-2.531-6.169-3.807-7.763a3.01 3.01 0 00-3.703-.825l-2.587 1.294a2.998 2.998 0 01-2.682 0L20.072.317a3.01 3.01 0 00-3.703.825c-1.266 1.594-2.944 4.688-3.807 7.763C8.56 9.645 6 10.752 6 12c0 1.181 2.326 2.24 6 2.972V15c0 2.194.638 4.228 1.67 6H8.277a1.499 1.499 0 00-1.379 2.09l2.42 5.645c-3.76 2.184-6.32 6.206-6.32 10.866v4.2A4.207 4.207 0 007.2 48h33.602c2.315 0 4.2-1.884 4.2-4.2v-4.2c0-4.538-2.42-8.476-6.01-10.697zM19.5 45l-3.9-18 4.65 3 2.25 3.75zm9 0l-3-11.25L27.75 30l4.65-3zm3.91-27.985c-.366 1.115-.657 2.306-1.547 3.131-.947.872-4.5 2.1-6-2.344-.263-.787-1.444-.787-1.716 0-1.594 4.707-5.25 3.038-6 2.344-.891-.825-1.191-2.016-1.547-3.131-.075-.235-.59-.535-.59-.544v-1.013c2.652.338 5.718.544 9 .544 3.28 0 6.346-.197 9-.544v1.013c-.01.008-.525.3-.6.544z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-secret.svg" alt="ui-secret">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-settings</title>
<use href="assets/sprites/fullSet.svg#ui-settings"></use>
</svg>Inline
<svg id="ui-settings" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path id="path1" d="M226.073 0c-4.554 0-8.258 3.689-8.258 8.214v10.241a63.277 63.277 0 00-11.766 6.778l-8.968-5.15a8.263 8.263 0 00-4.114-1.095 8.313 8.313 0 00-7.163 4.114l-17.197 29.57a8.155 8.155 0 00-.83 6.245 8.14 8.14 0 003.849 4.972l8.939 5.121a62.814 62.814 0 00-.356 6.763c0 2.284.114 4.543.356 6.764l-8.94 5.135a8.137 8.137 0 00-3.847 4.973 8.082 8.082 0 00.829 6.216l17.197 29.598c1.471 2.532 4.217 4.1 7.163 4.1a8.26 8.26 0 004.114-1.095l8.968-5.136a63.25 63.25 0 0011.766 6.764v10.256c0 2.191.851 4.251 2.412 5.801a8.246 8.246 0 005.846 2.398h34.394c4.554 0 8.258-3.675 8.258-8.2v-10.255a63.213 63.213 0 0011.766-6.764l8.968 5.136a8.258 8.258 0 004.114 1.095c2.948 0 5.692-1.567 7.163-4.1l17.197-29.598a8.082 8.082 0 00.83-6.216 8.164 8.164 0 00-3.849-4.988l-8.939-5.12c.241-2.221.356-4.48.356-6.764 0-2.283-.114-4.543-.356-6.763l8.94-5.12a8.125 8.125 0 003.847-4.973 8.155 8.155 0 00-.829-6.246l-17.197-29.569a8.314 8.314 0 00-7.163-4.114 8.26 8.26 0 00-4.114 1.095l-8.968 5.15a63.277 63.277 0 00-11.766-6.778V8.214c0-4.525-3.704-8.214-8.258-8.214h-34.394zm17.197 30.31c25.11 0 45.464 20.353 45.464 45.463s-20.354 45.464-45.464 45.464-45.464-20.354-45.464-45.464S218.16 30.31 243.27 30.31zM88.66 136.391c-6.83 0-12.387 5.526-12.387 12.313v15.377a94.792 94.792 0 00-17.641 10.152l-13.453-7.71a12.45 12.45 0 00-6.186-1.643c-4.42 0-8.522 2.36-10.73 6.157L2.468 215.406a12.197 12.197 0 00-1.243 9.354c.857 3.175 2.906 5.817 5.771 7.459l13.409 7.695a94.058 94.058 0 000 20.276l-13.409 7.695c-2.866 1.643-4.914 4.283-5.771 7.46a12.16 12.16 0 001.243 9.338l25.795 44.383c2.208 3.798 6.312 6.157 10.73 6.157 2.162 0 4.305-.562 6.186-1.643l13.453-7.71a94.847 94.847 0 0017.64 10.152V351.4c0 3.287 1.285 6.377 3.627 8.702a12.367 12.367 0 008.76 3.611h51.592c6.83 0 12.387-5.527 12.387-12.313v-15.377a94.792 94.792 0 0017.641-10.152l13.453 7.71a12.442 12.442 0 006.186 1.643c4.421 0 8.522-2.358 10.73-6.157l25.795-44.383a12.16 12.16 0 001.243-9.339 12.232 12.232 0 00-5.772-7.473l-13.408-7.681a94.056 94.056 0 000-20.276l13.408-7.695c2.867-1.64 4.917-4.283 5.772-7.46a12.196 12.196 0 00-1.243-9.353l-25.78-44.368a12.47 12.47 0 00-10.745-6.172 12.46 12.46 0 00-6.186 1.658l-13.453 7.71a94.792 94.792 0 00-17.641-10.152v-15.377c0-6.787-5.556-12.313-12.387-12.313H88.66zm210.774 15.155c-3.188 0-5.787 2.575-5.787 5.742v7.178a44.194 44.194 0 00-8.228 4.735l-6.29-3.596a5.792 5.792 0 00-7.888 2.102l-12.032 20.719a5.691 5.691 0 002.102 7.844l6.26 3.581a43.978 43.978 0 00-.252 4.736c0 1.598.083 3.181.252 4.736l-6.26 3.581a5.719 5.719 0 00-2.694 3.493 5.662 5.662 0 00.592 4.351l12.032 20.72a5.792 5.792 0 007.888 2.1l6.29-3.595a44.22 44.22 0 008.228 4.735v7.178c0 1.534.595 2.97 1.688 4.055a5.798 5.798 0 004.1 1.687h24.063c3.188 0 5.787-2.575 5.787-5.742v-7.178a44.194 44.194 0 008.228-4.735l6.29 3.596a5.79 5.79 0 007.888-2.102l12.032-20.719a5.662 5.662 0 00.592-4.351 5.718 5.718 0 00-2.694-3.493l-6.26-3.581c.169-1.555.252-3.138.252-4.736 0-1.598-.083-3.181-.252-4.736l6.26-3.581a5.698 5.698 0 002.102-7.844l-12.032-20.72a5.792 5.792 0 00-7.888-2.1l-6.29 3.595a44.194 44.194 0 00-8.228-4.735v-7.178c0-3.167-2.6-5.742-5.787-5.742h-24.064zm12.032 21.222c17.577 0 31.819 14.242 31.819 31.819 0 17.577-14.242 31.834-31.819 31.834-17.577 0-31.819-14.257-31.819-31.834 0-17.577 14.242-31.819 31.82-31.819zm-197.01 9.087c37.663 0 68.195 30.532 68.195 68.196s-30.532 68.196-68.196 68.196c-37.663 0-68.196-30.532-68.196-68.196s30.533-68.196 68.196-68.196z" transform="translate(-.105) scale(.13197)"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-settings.svg" alt="ui-settings">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-share</title>
<use href="assets/sprites/fullSet.svg#ui-share"></use>
</svg>Inline
<svg id="ui-share" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M40.008 0c-4.39 0-7.996 3.601-7.996 7.992 0 .573.063 1.13.18 1.67l-18.186 9.092a7.987 7.987 0 00-6.014-2.746C3.602 16.008 0 19.609 0 24c0 4.39 3.601 7.992 7.992 7.992a7.987 7.987 0 006.014-2.746l18.185 9.092a7.913 7.913 0 00-.18 1.67c0 4.39 3.606 7.992 7.997 7.992C44.398 48 48 44.399 48 40.008c0-4.39-3.601-7.996-7.992-7.996-2.389 0-4.544 1.07-6.014 2.75L15.81 25.67a7.94 7.94 0 00.18-1.67 7.94 7.94 0 00-.18-1.67l18.185-9.092c1.47 1.68 3.625 2.75 6.014 2.75 4.39 0 7.992-3.605 7.992-7.996C48 3.602 44.399 0 40.008 0zm0 4.002a3.96 3.96 0 013.99 3.99 3.963 3.963 0 01-3.99 3.994 3.966 3.966 0 01-3.994-3.994 3.963 3.963 0 013.994-3.99zM7.992 20.01A3.963 3.963 0 0111.986 24a3.963 3.963 0 01-3.994 3.99A3.96 3.96 0 014.002 24a3.96 3.96 0 013.99-3.99zm32.016 16.004a3.963 3.963 0 013.99 3.994 3.96 3.96 0 01-3.99 3.99 3.963 3.963 0 01-3.994-3.99 3.966 3.966 0 013.994-3.994z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-share.svg" alt="ui-share">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-tag</title>
<use href="assets/sprites/fullSet.svg#ui-tag"></use>
</svg>Inline
<svg version="1.1" id="ui-tag" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M14.194 10.139q0-1.68-1.188-2.868t-2.867-1.188q-1.68 0-2.868 1.188T6.083 10.14q0 1.679 1.188 2.867t2.868 1.188q1.679 0 2.867-1.188t1.188-2.867zM48 28.389q0 1.678-1.172 2.85L31.27 46.829Q30.036 48 28.388 48q-1.68 0-2.851-1.172L2.883 24.143Q1.68 22.97.84 20.943 0 18.915 0 17.236V4.056q0-1.648 1.204-2.852T4.055 0h13.18q1.68 0 3.708.84 2.027.84 3.231 2.043l22.654 22.622Q48 26.741 48 28.388z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-tag.svg" alt="ui-tag">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-tags</title>
<use href="assets/sprites/fullSet.svg#ui-tags"></use>
</svg>Inline
<svg version="1.1" id="ui-tags" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M11.324 12.942q0-1.34-.948-2.288-.948-.948-2.288-.948-1.34 0-2.287.948-.948.948-.948 2.288 0 1.34.948 2.287.948.948 2.287.948 1.34 0 2.288-.948.948-.948.948-2.287zM38.294 27.5q0 1.34-.935 2.275L24.948 42.212q-.986.935-2.3.935-1.34 0-2.275-.935L2.3 24.114q-.96-.935-1.63-2.553Q0 19.943 0 18.604V8.089q0-1.315.96-2.275.961-.96 2.275-.96H13.75q1.34 0 2.958.669 1.617.67 2.578 1.63l18.073 18.048q.935.985.935 2.3zm9.706 0q0 1.34-.935 2.275L34.654 42.212q-.986.935-2.3.935-.91 0-1.491-.354-.582-.354-1.34-1.137l11.88-11.88q.935-.936.935-2.275 0-1.315-.935-2.3L23.33 7.153q-.96-.96-2.578-1.63-1.618-.67-2.957-.67h5.662q1.34 0 2.957.67 1.618.67 2.578 1.63l18.073 18.048q.935.985.935 2.3z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-tags.svg" alt="ui-tags">Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
<title>ui-trash</title>
<use href="assets/sprites/fullSet.svg#ui-trash"></use>
</svg>Inline
<svg id="ui-trash" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M19.998 0c-3.291 0-6.004 2.712-6.004 6.004v2H3.99v4.002H6.1l1.695 30.326c.166 3.159 2.816 5.67 5.978 5.668h20.454c3.162.002 5.812-2.51 5.978-5.668L41.9 12.006h2.11V8.004H34.006v-2C34.006 2.712 31.293 0 28.002 0zm0 4.002h8.004c1.129 0 2.002.873 2.002 2.002v2H17.996v-2c0-1.129.873-2.002 2.002-2.002zm-9.887 8.004H37.89l-1.682 30.113v.004a1.953 1.953 0 01-1.98 1.875H13.773a1.953 1.953 0 01-1.98-1.875v-.004zm3.883 3.99v24.012h4.002V15.996zm8.004 0v24.012h4.004V15.996zm8.006 0v24.012h4.002V15.996z"/></svg>Img
<img class="svg-icon" src="assets/icons/ui-trash.svg" alt="ui-trash">