Components

Blockquote

Introduction to toolkit-driven development

<blockquote>
    <p>Introduction to toolkit-driven development</p>
</blockquote>

Button

<button class="button">Submit</button>

Footer

<div class="footer">
    <p class="mb-xl">
        <a href="https://github.com/fbrctr/fabricator">
            <svg class="stamp">
                <use xlink:href="#symbol-word-mark-outline" />
            </svg>
        </a>
    </p>
    <p>Fabricator is developed by <a href="https://twitter.com/LukeAskew/">@LukeAskew</a></p>
    <p>This site was <a href="/components.html">built with Fabricator</a> | <a href="https://github.com/fbrctr/fbrctr.github.io">site source</a></p>
</div>

Header Bar

Docs Source

<div class="header-bar">
    <a href="docs">Docs</a>
    <span class="header-bar__divider">
		<svg class="bolt">
			<use xlink:href="#symbol-bolt" />
		</svg>
	</span>
    <a href="https://github.com/fbrctr/fabricator">Source</a>
</div>

Hero

Build your UI toolkit

Start Building View demo

<div class="hero">
    <img src="/assets/toolkit/images/logo.svg" alt="Fabricator">
    <h1 class="hero__byline">
		Build your UI toolkit
	</h1>
    <a href="/docs" class="button">Start Building</a>
    <a href="/demo" class="d-b pt-l" target="_blank">View demo</a>
</div>

Lists

Link

<ul class="link-list">
    <li class="list-header">List Header</li>
    <li>
        <a href="#">List Item</a>
    </li>
    <li>
        <a href="#">List Item</a>
    </li>
    <li>
        <a href="#">List Item</a>
    </li>
    <li>
        <a href="#">List Item</a>
    </li>
</ul>

Ordered

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

<ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ol>

Piped

<ul class="piped-list">
    <li>
        <a href="#">Home</a>
    </li>
    <li class="pipe">
        <svg class="bolt">
            <use xlink:href="#symbol-bolt" />
        </svg>
    </li>
    <li>
        <a href="#">Docs</a>
    </li>
    <li class="pipe">
        <svg class="bolt">
            <use xlink:href="#symbol-bolt" />
        </svg>
    </li>
    <li>
        <a href="#">Source</a>
    </li>
</ul>

Unordered

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

<ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>

Page Header

<div class="page-header">
    <a href="/">
        <img src="/assets/toolkit/images/head.svg" alt="Fabricator">
    </a>
    <div class="section-title"></div>
</div>

Paragraph

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.

<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam <a href="#">venenatis vestibulum</a>. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor
    mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.</p>

Symbols

Symbols are SVG and the <symbol> method described here - CSS-Tricks - SVG symbol a Good Choice for Icons

This element is a hidden <svg> element that persists on every page.

Include a symbol using the following syntax:

<svg>
    <use xlink:href="#symbol-{name}" />
</svg>

<svg style="display: none">
    <symbol id="symbol-bolt" viewBox="0 0 24 39">
        <path d="M15.55 24.013L23.224 0 11.767 17.797l-3.31-3.853L0 38.454l11.932-18.378 3.62 3.937z" />
    </symbol>
    <symbol id="symbol-word-mark-outline" viewbox="0 0 512 230.4">
        <g>
            <path d="M421.4 196.5c-.2-1.5-1.6-2.7-3.1-2.5l-149.9 8.4 5.7-14.2c.2-1-.1-2-.8-2.7-.7-.7-1.7-1-2.6-.9L93.1 217.5c-1.5.3-2.6 1.7-2.4 3.3.2 1.6 1.6 2.7 3.1 2.6l155.9-9.6-4.9 13.4c-.1.9.2 1.9.9 2.5.6.5 1.3.8 2 .8.2 0 .4 0 .6-.1L419 199.8c1.5-.3 2.6-1.7 2.4-3.3zm-170.1 27.3l4.8-12.9c.1-.9-.2-1.8-.8-2.4-.6-.6-1.3-.9-2.1-.9h-.2l-103.5 5.5 117.8-21.9-5.6 13.7c-.2.9 0 1.9.7 2.6.6.7 1.5 1.1 2.5 1l102.4-4.6-116 19.9zM325 69.3c4-.2 9-.5 13-.8V53.8c-4 .3-9 .7-13 .9v14.6zM78 57.3c4 .8 9 1.6 13 2.3V42.7c-4-.9-9-1.9-13-3v17.6zM179 68.9c4 .2 8.5.4 12.6.6.5 0 .4-.1 1.4-.1V55.1c-5-.2-10-.5-14-.8v14.6zM140 50.5c-4-.5-9-1.1-13-1.7v15.6c4 .5 9 1 13 1.4V50.5zM127 145.8c5-.7 10-1.4 16-2v-68c-6-.5-11-1-16-1.6v71.6z"
            />
            <path d="M511.1 179.3c-.8-1.4-3.4-9.1-5.8-47.5-1.3-20.4-2.2-46.8-2.6-71.5 5.5-2 7.3-7.3 7.3-11.9V18.8c0-5.4-2.4-8.3-4.4-9.8-2.4-1.8-5-2.1-6.4-2.1-3.1 0-5.8 1.2-7.6 2.3-5.6 3-12.7 5.9-20.9 8.6-.2.1-.3.1-.5.2-3.8 1.5-5.9 4.5-6.7 7.5l-1.8.6c-.2.1-.4.1-.5.2-1 .4-2 .9-2.8 1.6-.2-.2-.3-.4-.5-.6-2-2.2-4.8-3.5-7.8-3.5-1.2 0-2.3.2-3 .4-7.4 1.8-15.4 3.5-23.8 5.1-.4.1-.8.2-1.3.3-2.5.8-4.9 2.7-6.4 5.4-.5-1-1.2-1.8-2.1-2.5-1.4-1.1-3.2-1.8-5-1.8-.5 0-1 .1-1.6.2-.3.1-2 .4-2.6.5-13.9 2.2-28.9 4.2-44.5 5.7-1.3.1-2.6.6-3.7 1.3-.1.1-.3.2-.4.3-1.2.9-2.1 2.2-2.6 3.6-1.9-2.6-5.1-4.1-8.9-4.1-.2 0-.3.2-.5.2h-.1c-.2 0-.4-.1-.7-.1-6.9.6-14 1-21.2 1.4h-.8c-5.7.2-8.8 2.4-10.3 4.3-1.3 1.6-1.9 3.2-2.1 4.4-.2 0-.3.1-.5.1-1.3-4.6-5.5-7.9-10.8-7.9-.1 0-.3-.1-.3-.1v.1c-7.5.3-15.2.5-22.8.6h-.3c-3.1 0-7.3.7-10 4.1-.4.6-.8 1.2-1.1 1.8-1-3.3-4-5.8-7.7-5.8h-1.7c-10.4 0-20.9-.2-31.1-.5h-1c-2.1 0-4.1.8-5.6 2.2-1.5 1.5-2.5 3.6-2.5 5.7v.3h-.7c-1.1 0-2.1.2-3.1.6-.2-5.1-4.3-9.1-10-9.6h-.5c-8.2-.4-16.3-.9-24.2-1.5h-.2c-1.4-.1-2.7-.2-3.1-.3H170.5c-2 0-4.1.7-5.6 2.1-1.6 1.5-2.8 3.6-2.8 5.9v.1h.3v.1h-.8c-1.6 0-3.5.5-4.5 1.3V46c0-4.7-3.3-8.6-8.3-9.9-.5-.1-1-.3-1.5-.3-8.3-.9-16.4-2-24.2-3.1-1-.2-2.3-.4-2.8-.5-.6-.1-1.2-.2-1.9-.2-1.8 0-3.7.6-5.1 1.7-1.9 1.5-3.2 3.8-3.2 6.3v.3h-.6c-.5 0-1.4.1-1.4.2v-3.7c0-4-2.9-7.3-6.8-7.9-.6-.1-2.8-.4-5.2-.9-6.2-1.2-12.2-2.6-17.8-4-3-.9-6-2-6.1-2-.9-.4-1.9-.5-2.9-.5-1.6 0-3.2.5-4.5 1.4-.8.5-1.4 1.2-1.9 1.9-.6-2.9-2.9-5.3-5.9-6.1-.4-.1-1.2-.3-1.6-.5-.1 0-.2 0-.2-.1-11.5-3.8-20.5-7.8-26.8-12-2.5-1.8-5.3-3.9-5.9-4.3C20.8.6 19.1 0 17.4 0c-1.2 0-2.6.3-3.7.8C10.9 2.1 9 5 9 8v.3h-.6c-1.3 0-2.5.3-3.7.9C1.8 10.6 0 13.6 0 16.8v8.5l1.7 169.4c0 3.3 2 6.2 4.9 7.6 1.1.5 2.4.8 3.6.8 2 0 3.9-.7 5.4-1.9 1.5-1.2 3.3-2.5 5.4-3.8 2.2-1.3 3.6-3.6 4-6.1 1.3-1 2.9-2.1 4.6-3.1 2.4-1.5 3.8-4.1 3.8-6.9L32 74.9c.3.1.5.1.8.2.2.1.5.1.7.2l.5.1.4.1c.2.1.5.1.7.1 1.5.3 3.3.7 3.3.7.6.1 1.2.2 1.8.2 1.9 0 4-.7 5.5-1.9 2-1.6 3.4-4 3.4-6.6v-.8h.2c1 0 1.8-.2 2.8-.6v106.8c0 2.6 1.2 5.1 3.2 6.7 1.5 1.1 3.3 1.8 5.1 1.8.7 0 1.5-.1 2.2-.3 1.9-.5 3.8-1 6.1-1.6 3.8-.9 6.4-4.3 6.4-8.2v-.5c1-.1 1.2-.3 1.8-.4.5 1.3 1.4 2.5 2.5 3.5 1.5 1.2 3.4 1.9 5.4 1.9.6 0 1.1-.1 1.7-.2 1.9-.4 4.1-.8 6.4-1.2 4-.7 7.1-4.3 7.1-8.3v-.6c0-.1.9-.2 1.4-.3.4 1.8 1.3 3.5 2.8 4.7 1.5 1.2 3.4 1.9 5.4 1.9.6 0 1.1-.1 1.6-.2 1.3-.2 5.7-1.1 9.9-1.8 5.6-.8 11.3-1.5 17-2.1 5.6-.4 11.6-3.8 12.5-10.1.8-.3 1.3-.6 2.3-1v.2c0 2.4 1 4.6 2.8 6.2 1.6 1.5 3.6 2.3 5.8 2.3h.7c2.2-.2 4.6-.3 6.6-.5 4.4-.3 8.2-4 8.2-8.5v-.8s.3 0 .6-.1c2.6-.2 4.7-1.7 6-3.7 1.3 3 2.6 5.6 4.1 7.8 1.6 2.3 4.2 3.7 7 3.7h.3c2.5-.1 4.7-.2 6.9-.3 1.9-.1 3.6-.7 5-1.8 1.5 1.1 3.2 1.7 5 1.7h.5c.1 0 .4.2.7.2 10.3-.3 20.8-.2 31.2-.2h1.7c3.5 0 6.5-2.3 7.8-5.3 1.8 3 5.2 5.1 9.7 5.1.1 0 .3-.1.4-.1 8 .1 16.1.3 24 .6h.7c3.3-.1 6.2-1.4 8.3-3.5.9-1 1.6-2 2-3 .5 4 3.8 7.1 8 7.3 2.2.1 4.3.2 6.3.3h.5c2.2 0 4.1-.8 5.6-2.3 1.7-1.6 2.5-3.8 2.5-6.2v-.8h.7c.3 0 .3 0 1.3-.1v2.1c0 4.4 3.2 8.1 7.6 8.5 2 .2 4 .3 6.2.5h.7c2.1 0 4.2-.8 5.8-2.2 1.8-1.6 2.8-3.9 2.8-6.3v-.9h.2c2 0 3.8-.7 5.3-2.1 1.6-1.5 2.5-3.7 2.5-5.9V67c3-.3 7-.7 10-1.1v95c0 4.3 3.3 7.9 7.6 8.4 2 .3 4.1.5 6.3.8.4.1.8.1 1.2.1 2.1 0 4.3-.7 5.8-2.1 1.8-1.6 3.1-3.9 3.1-6.4v-.8h.1c1.9 0 3.8-.7 5.2-2 1.7-1.5 2.7-3.7 2.7-6V61.7c0-.1.8-.1 1.2-.2 1.1-.1 2.8-.4 3.1-.5 1.4-.2 2.7-.8 3.7-1.6V162c0 1.1-.1 2.7.4 4.4 1.2 4.4 4.6 7.5 9.2 8.3.2 0 .4.1.6.1 8.1 1.5 15.8 3.1 22.9 4.9.1 0 .3.1.4.1.5.1 1.4.3 2.7.3 2.6 0 5.1-.8 7.1-2.3 2.3-1.8 3.9-4.3 4.4-7.3.4-.1 1.4-.2 1.4-.4v7.1c0 3.7 2.3 7 5.8 8.1 2.1.7 4.1 1.3 6.1 2 .9.3 1.8.5 2.8.5 1.8 0 3.4-.5 4.8-1.6 2.2-1.6 3.5-4.2 3.5-6.9v-.8h.5c.6 4.3 1.3 7.9 2 10.8.6 2.4 2.1 4.5 4.3 5.6 2.5 1.3 4.8 2.6 6.7 3.9 1.4 1 3.1 1.5 4.8 1.5 2.1 0 4.1-.8 5.7-2.2 2.1-1.9 3-4.5 2.8-7.1h.3c2 0 3.9-.7 5.3-2 2.7-2.5 3.4-6.5 1.7-9.7zM57 31.9c0 .8-.3 1.5-.9 1.9-.4.3-.8.4-1.3.4-.2 0-.5 0-.7-.1 0 0-3.3-1.1-5.8-2-.5-.2-1.1-.4-1.6-.6-.3-.1-.6-.2-.7-.3h-.1C38.3 28.6 32 25.8 26 22.8v22.3c6 2.1 13.6 4.2 21.4 6.1h.1c.6.2 1.2.3 1.8.5C50.4 52 51 53 51 54v5.2c0 .7-.2 1.4-.8 1.8-.4.3-.9.5-1.4.5-.2 0-.3 0-.5-.1 0 0-2-.4-3.5-.8-.1 0-.2 0-.3-.1l-.5-.1-.6-.1c-.1 0-.2-.1-.3-.1-6.1-1.5-11.9-3.2-17.2-4.8l1.6 125.9c0 .8-.4 1.6-1.1 2-2.3 1.4-4.3 2.9-6.1 4.3-.4.4-1 .5-1.5.5-.3 0-.7-.1-1-.2-.8-.4-1.4-1.2-1.4-2.1L15 16.4V8c0-.9.5-1.7 1.3-2.1.3-.2.7-.2 1-.2.5 0 1 .2 1.4.5 0 0 3.3 2.5 6.2 4.5 6.8 4.5 16.3 8.8 28.3 12.7h.1s1.1.4 1.9.6c1 .3 1.7 1.2 1.7 2.3v5.6zm45 125.9c0 1.1-.7 2.1-1.8 2.3-2.3.4-4.3.8-6.2 1.2h-.4c-.5 0-1.2-.2-1.6-.5-.5-.4-1-1.1-1-1.8V69.5c-4-.7-9-1.5-13-2.3v95.9c0 1.1-.8 2-1.9 2.3-2.3.6-4.4 1.1-6.3 1.6-.2.1-.4.1-.6.1-.5 0-.9-.2-1.3-.5-.6-.4-.8-1.1-.8-1.8V29.3c0-.8.3-1.5.9-1.9.4-.3.8-.4 1.3-.4.3 0 .5.1.8.2 0 0 3.3 1.3 6.7 2.2 5.8 1.4 11.9 2.8 18.2 4 2.9.5 5.3.9 5.3.9 1.1.2 1.8 1.2 1.8 2.3v121.2zM153 74v73.4c0 4.1-4.2 5.6-6.8 5.8 0 0 .1 0 0 0-5.8.6-11.6 1.4-17.3 2.2-4.9.8-10.2 1.9-10.2 1.9h-.4c-.5 0-1-.2-1.5-.5-.5-.4-.8-1.1-.8-1.8V39.9c0-.7.3-1.4.9-1.8.4-.3.9-.5 1.4-.5.2 0 .4 0 .5.1.8.2 2.6.5 3.3.6h.1c7.8 1.1 16 2.2 24.4 3.1.2 0 .7.1.8.1 2.2.5 4.6 2 4.6 4.4v22.4c0 .2-.3.7-.4 1.1 1 .7 1.7 1.6 2 3.1h-.1c0 .3-.2.5-.2.8 0 .4-.3.6-.3.7zm59.6 73c-.3.9-1.2 1.5-2.1 1.5-2.3.1-4.6.2-7 .3h-.1c-.8 0-1.5-.4-1.9-1-4.9-7.2-8.8-20-11.6-38-2-12.6-2.9-24.5-3.3-30.6-2.5-.1-5.6-.3-7.6-.4V148c0 1.2-.9 2.2-2.1 2.3-2.1.2-4.2.3-6.3.5h-.2c-.6 0-1.2-.2-1.6-.6-.5-.4-.8-1.1-.8-1.7V46.1c0-.7.3-1.3.8-1.7.4-.4 1-.6 1.6-.6h.2s1.6.1 3.3.3l.1.3c8 .6 16.2.8 24.5 1.8h.1c.1 0-.2-.3-.1-.3 2.3.2 4.6 1.3 4.6 3.9v22.6c0 4-2.6 6.2-6 6.9 1.3 20 6 56.5 15 65.1.5.8.9 1.7.5 2.6zm4.4-13.3c-1 .7-2.6 2-3.4 3.5-1.8-3.4-4-9.9-6.3-22-1.8-9.3-3.3-21-4.2-32 3.8-2.2 6-6.1 6-10.6v-2.1c1 .3 1.6.9 2.4.9 0 0 0-.1.1-.1.4.1.7 0 1.1 0H214.3c.1 0-.1 0 0 0 1 0 1.9.1 2.9.1v62.3zm26-77.2v81.6c4 0 7.2.1 10.2.1h1.7c.6 0 1.2.2 1.7.6.4.4.7 1 .7 1.6v5.3c0 1.3-1 2.5-2.3 2.5h-1.7c-10.5 0-21.1-.1-31.5.3-.5 0-.8-.1-.9-.1h-.1c-.6 0-.9-.3-1.3-.7-.5-.4-.5-1.1-.5-1.7v-5.1c0-1.2.7-2.4 1.9-2.5 0 0 .6-.2 1.6-.2 0 0-.1.1 0 .1 3.1-.1 6.5 0 9.5-.1V56.4c-3-.1-6.1-.1-9.1-.2H221.5c-.1 0-.3 0-.4-.1h-.2c-1.2-.1-1.9-1.1-1.9-2.3v-5c0-.6.2-1.2.6-1.7.4-.4 1-.7 1.6-.7h.8c10.3.3 20.8.5 31.3.5h1.7c1.3 0 2.3 1 2.3 2.3v5.1c0 .6-.2 1.2-.7 1.7-.4.4-1 .7-1.6.7h-1.9c-3.1-.1-6.1-.2-10.1-.2zm10 12.4v63.5h-4V71c1-.4 2.6-1.1 3.5-2 .1 0 .5-.1.5-.1zm48.5 77.9c-.7.7-2 1.6-4.2 1.6h-.2-.1c-8-.3-16.2-.5-24.3-.6h-.5c-3.8 0-5.3-2.7-5.3-4.5V51.5c0-.8.3-1.8 1-2.8 1.1-1.3 3-2 5.7-2h.2c7.7-.1 15.5-.3 23.1-.6h.3c2.7 0 5.6 1.6 5.6 5.1v19.3c0 1.3-1.3 2.8-2.5 2.8H294c-1.3 0-2.1-1.5-2.1-2.8V56.1c-5 .1-9 .2-13 .3v81.8c4 .1 8 .2 13 .3v-14.4c0-1.3.8-1.9 2.1-1.9h6.3c1.3 0 2.5.6 2.5 1.9v19.2c.2.5 0 2.2-1.3 3.5zM299 83.4v32.8h-4.9c-4.4 0-8.1 3.5-8.1 7.9v.1h-.7c-.5 0-1.3.2-1.3.3V87.6c0 .1.9.6 1.3.6h6.3c3.2 0 6.4-2.2 7.4-4.8zm51 65.6c0 .7-.5 1.3-1 1.7-.4.4-1.1.6-1.7.6h-.3c-2.1-.2-4.5-.4-6.6-.5-1.2-.1-2.4-1.1-2.4-2.3V78.3c-4 .3-9 .5-13 .8v68.2c0 .6-.3 1.3-.7 1.7-.4.4-1 .6-1.6.6h-.1c-2.1-.1-4.2-.2-6.3-.4-1.2-.1-2.2-1.1-2.2-2.3v-97c0-.5.2-4.5 7.2-4.8h.8c7.3-.4 14.6-.9 21.6-1.5h1c3.1 0 5.4 2 5.4 4.9V149zm59-102.8c-.1 0-2.1.3-3.1.5-4.8.8-9.9 1.5-14.9 2.2V153c0 .7-.2 1.3-.7 1.8-.4.4-.9.6-1.5.6h-.3c-2.1-.3-4.3-.6-6.4-.8-1.2-.1-2.1-1.1-2.1-2.3v-102c-6 .7-12.3 1.4-18.5 2h-.1l-.5.1h-.2c-.6 0-1.3-.2-1.7-.6-.5-.4-.9-1.1-.9-1.7V45c0-.7.5-1.4 1.1-1.8l.2-.1c.3-.2.7-.4 1.1-.4 15.8-1.5 30.9-3.4 44.9-5.7.8-.1 2.4-.4 2.7-.5h.5c.5 0 1.1.2 1.5.5.5.4.9 1.1.9 1.8l.1 5.2c-.1 1-1 2-2.1 2.2zm47 113.2c0 2.6-1.5 4-2.4 4.7-.9.7-2.4 1.1-3.7 1.1-.7 0-1.2-.2-1.4-.2-.1 0-.1-.1-.2-.1-7.3-1.8-15.3-3.5-23.6-5-.1 0-.2 0-.4-.1-2.2-.4-3.7-1.8-4.2-3.9-.3-1.1-.1-2.1-.1-2.5V40.6c0-3.5 2.4-5.2 4-5.6.1-.1.2-.1.4-.1 8.5-1.6 16.7-3.3 24.2-5.1.3-.1.9-.2 1.6-.2 1.4 0 3.1.6 4 1.6 1.1 1.2 1.9 3 1.9 5.3v122.9zm49.6 25.3c-.4.4-1 .6-1.6.6-.5 0-.9-.1-1.3-.4-2.1-1.4-4.5-2.9-7.3-4.3-.6-.3-1-.9-1.2-1.5-2.6-11.3-4.7-33-6.2-64.5-1.1-22.7-1.4-44.6-1.6-55.4-2.1.6-4.5 1.1-6.5 1.7v109.6c0 .8-.5 1.5-1.1 1.9-.4.3-.9.4-1.4.4-.3 0-.5 0-.8-.1-2-.7-4-1.4-6.2-2.1-1-.3-1.5-1.2-1.5-2.2V28.9c0-1.5.3-4.4 3.4-5.6.1 0 .1 0 .1-.1 8.6-2.9 15.9-5.9 21.9-9.1 1-.6 2.8-1.5 4.7-1.5 1.2 0 4.9.5 4.9 6.2v29.8c1 1.8-.3 5.3-3.6 6.5-.1 0-.1.1-.2.1-1.1.3-2.2.7-3.4 1.1.6 45.4 3.6 115.2 9.2 125.7.7.8.5 2-.3 2.7z"
            />
            <path d="M480 50.8c4-1.2 9-2.5 13-3.8V25.7c-4 1.9-9 3.7-13 5.4v19.7zM431 151.1c4 .9 9 1.8 13 2.8V40.7c-4 1-9 1.9-13 2.8v107.6z" />
        </g>
    </symbol>
    <symbol id="symbol-head-outline" viewbox="0 0 512 512">
        <path d="M445.5 268.1c0-20.1-9.2-38.1-23.6-50.1 2-1.4 5.6-1.4 7.4-1.3 1.6.3 4.9 1.1 8.6 3.3 0 0-2.2-9.2-4-13.3-.1-.2-.1-.3-.2-.4-1-2.4-2.3-4.5-3.6-6.4H443v-31.4h-12c-1.1-44.5-19-86.2-50.6-117.8C347.7 18 304.3 0 258.1 0s-89.6 18-122.3 50.7C104.2 82.3 86.3 124 85.2 168.5h-12v31.4H88c-3.5 3.9-7.3 8.7-10 14.1l-.1.1s-6 14.4-11.4 18.1c0 0 11.9 1.3 27.1-4.3h.2c-4.9 11.2-9.7 24.7-11.5 36.8-.9 5.1-3.2 16.8-5.8 19.6 0 0 9.4-4.2 16-8.1 3.1-1.7 7.2-4.7 13.3-9.8-.2.4-.3.9-.5 1.4-2.8 7.5-4.4 12.9-5.1 16.9 0 0 0 .3-.1.7-.2 1-.3 1.9-.3 2.7-.4 4-.5 10.7 1.6 16.1 0 0 5.5-8.2 10-8.6 1.7 0 3.4.2 4.4.9.1 0 .1.1.2.2-1.4 1-2.8 2.1-4.2 3.5-7.6 7.4-11.4 18.2-11.3 32 .1 14.7 5.1 27.6 13.5 36.4-1.5 3.3-6.4 16.5 1.5 35.4.6 1.4 1.9 2.4 3.4 2.7 1.5.3 3-.3 4.1-1.4 2.6-2.9 6.9-6.6 10.3-8.4 2.1 7.5 7.9 21.6 22.8 30.9 5.2 15.4 16.6 26.7 27.8 32 2.7 3.1 13.1 14.5 30.7 25.8 18.7 12.1 49.5 26.4 89.9 26.4 34.7 0 62.3-6 82.1-17.9 14.8-8.9 25.2-21 30.9-35.9 3.2-8.3 2.7-16.6-1.2-22.8-1.2-1.9-2.7-3.6-4.5-4.9l-.4-.4c-1.9-1.5-2-3.1-1.9-4.2.9-2.4 1.1-4.9.6-7.2-.5-2.3-2.3-6.5-8.5-8.2-7.6-2-15.9 3.8-21.4 8.9v-19.7h7.4c4.5 0 8.7-2.6 10.6-6.6 1.9-4 1.1-8.7-2-12.5-1.5-1.8-2.2-3.3-2.7-4.5 7-2.5 13.8-6.8 14.9-14 .4-2.7-.1-5.3-1.4-7.5 7.5-5.9 16-17.7 12.7-34.9 15.7-11.8 25.8-30.6 25.8-51.6zM423.4 208c-3.9.7-7 2.3-9 4.6-2.8-1.7-5.8-3.2-8.8-4.5-.8-3.3-2.4-6-4.3-8.3h17.3c1.7 1.8 4.1 4.5 5.9 8-.3.1-.7.2-1.1.2zm-24.6-17.1v-13.5h16.8v13.5h-16.8zm35.2-13.5v13.5h-14v-13.5h14zm-12-8.9h-29.2v-12c0-2.6 2.1-4.7 4.7-4.7h23.2c.7 5.5 1.2 11 1.3 16.7zM316.4 299c-1.2-1.7-2.2-3.5-3.2-5.3h7.7c.8 1.8 1.6 3.6 2.6 5.3h-7.1zm9.7 4.5c1.5 2.2 3 4.4 4.8 6.4.1.3.3.6.7 1.1 4.3 5.6 0 3.2-1.7 2.1-2-1.4-3.9-3-5.7-4.7-1.6-1.5-3.1-3.2-4.5-4.9h6.4zM307 266.9c1 .2 5.3 1.2 8.5 7.9h-8.2c-.2-1.6-.3-3.2-.4-4.9v-1.8c.1-.4.1-.8.1-1.2zm-30.6-11.6c-.8-3.8-1.8-7.5-3.2-11h36c3 0 5.5 2.5 5.5 5.5s-2.4 5.4-5.3 5.5h-33zm40.2 23.9c.6 3.4 1.5 6.7 2.6 9.9h-8c-1.3-3.2-2.3-6.5-3-9.9h8.4zm.1-41.6c-.2-.1-.3-.2-.5-.3 1.3-1.9 2.6-3.7 4.1-5.4h6c-4.5 5-8.5 5.6-9.6 5.7zm7.9-10.2c2.4-2.2 5-4.3 7.7-6.1h3.1c-1.9 1.8-3.7 3.8-5.3 5.8-.1.1-.1.2-.2.2h-5.3zm-17.7 8h-38.1c-11.1-19.1-31.7-32-55.3-32.3h-17.8c-6.7 0-13.2 1-19.4 2.9 3.7-2.7 8.7-4.9 14.7-6.1h22.1c14.7 1.6 39.4 5.3 61.1 13.6 3 1.4 11.3 6.1 13.7 15.4 0 0 6.1-13.9 7.1-23.3.2-1 .3-2.1.3-3.1l21.3 8.6c1.1.4 2.2.4 3.3 0l23.5-9.2c1.7-.5 4.9-1.4 10.3-2.1h32c2.2.9 5.1 2.4 7.4 4.5-3.8-.7-7.7-1.2-11.7-1.2h-17.8c-23.4 0-45 12.4-56.7 32.3zm-148.2-3.5c-1.8 2.7-3.4 5.5-4.8 8.4h-7.5c1.7-3 3.7-5.8 6-8.4h6.3zm-2-4.5c2.2-2.1 4.6-4 7.1-5.6h3.3c-1.8 1.8-3.5 3.7-5.1 5.6h-5.3zm-4.7 17.4c-.7 1.8-1.3 3.5-1.8 5.4H142c.6-1.8 1.3-3.6 2.1-5.4h7.9zm-2.9 9.8c-.7 3.2-1.1 6.6-1.3 10h-8.6c.2-3.4.7-6.7 1.5-10h8.4zm-1.4 14.5c0 1.9.1 3.8.3 5.6h-8.6c-.2-1.6-.3-3.2-.4-4.9v-.8h8.7zm1 10.1c.6 3.4 1.5 6.7 2.6 9.9h-8c-1.3-3.2-2.3-6.5-3-9.9h8.4zm4.3 14.4c.8 1.8 1.7 3.6 2.6 5.4h-7.1c-1.2-1.7-2.2-3.5-3.2-5.4h7.7zm5.2 9.9c1.5 2.3 3.1 4.4 4.8 6.5.1.2.2.3.4.6 4.6 6-3.7.9-3.7.8-1.2-1-2.4-2-3.5-3.1-1.6-1.5-3.1-3.2-4.5-4.9h6.5zm-1.5-35.4c0-8.6 1.9-16.7 5.4-23.9.3-.3.5-.7.6-1.2 9.2-18.3 28.2-30.9 50-30.9 30.9 0 56 25.1 56 56s-25.1 56-56 56-56-25.2-56-56zm-16.9-99.6v-12c0-2.6 2.1-4.6 4.6-4.6h82.2c2.6 0 4.6 2.1 4.6 4.6v12h-91.4zm20.7 8.9v13.5h-16.8v-13.5h16.8zm79.7 0h5.3v13.5h-16.8v-13.5h11.5zm-16 0v13.5h-16.8v-13.5h16.8zm-21.2 0v13.5h-16.8v-13.5H203zm-38.1 0h16.8v13.5h-16.8v-13.5zm121 22.5c1.1 2.5.2 5.9-.9 8.4-7.5-3.4-15.5-6.1-23.4-8.4h24.3zm-14.7-9v-13.5H288v13.5h-16.8zm-4.4 0H250v-13.5h16.8v13.5zm25.7 0v-13.5h16.8v13.5h-16.8zm31.7 9l-5.9 2.3-5.6-2.3h11.5zm-10.5-9v-13.5h16.8v13.5h-16.8zm42.6 0v-13.5h16.8v13.5h-16.8zm-4.5 0H335v-13.5h16.8v13.5zm25.7 0v-13.5h16.8v13.5h-16.8zM306.2 16.1c25.3 7.7 48.6 21.6 67.8 40.9 23.8 23.8 39.3 53.5 45.3 85.9h-21.8c-7.5 0-13.7 6.1-13.7 13.7v12h-23.1c-.7-31.8-9.1-63.8-24.5-92.9-11.5-21.9-26.5-41.1-43.9-56.7-5.8-7.5 12.4-3.3 13.9-2.9zm-48.1-7.2c2.4 0 4.7.1 7.1.2.2.1.3.3.5.4 25.6 16.7 47.3 40.9 62.7 70.2 14.7 27.8 22.7 58.4 23.4 88.8h-69.9c-1.5-61.2-33.6-116.7-85.1-147.7C216 13 236.7 8.9 258.1 8.9zM131.5 68.7h49.7l-.2.3-7.3 5.7 11.2 9.5-1.8 2.2-7.3 8.3 9.2 9.4-2.1 2.5-6.7 7.7 4.1 4.1.9 1.1H103c6.3-18.3 15.9-35.5 28.5-50.8zm-31.3 59.8h90.5c1.7 0 3.3-1 4-2.6.7-1.6.5-3.4-.6-4.8l-5.9-7.1 5.9-7.1c1.4-1.7 1.4-4.1 0-5.7l-5.9-7.1 5.9-7.1c1.4-1.7 1.4-4.1 0-5.7l-5.9-7.1 5.9-7.1c1.1-1.3 1.3-3.2.6-4.8-.7-1.6-2.3-2.6-4-2.6h-51.3c.9-.9 1.8-1.9 2.7-2.8 10.1-10.1 21.3-18.7 33.3-25.7 9.6-4.7 15.8-3.2 18.9-1.6.6.3 1.1.7 1.7 1.1.5.4.7.6.7.6h.2c46.1 29.8 74.6 80.9 76.1 137.1h-32.7v-12c0-7.5-6.1-13.6-13.6-13.6h-82.2c-7.5 0-13.6 6.1-13.6 13.6v12H94.2c.3-13.6 2.4-27 6-39.9zm39 48.9v13.5h-16.8v-13.5h16.8zm-21.3 0v13.5h-16.8v-13.5h16.8zm-35.8 13.5v-13.5h14.5v13.5H82.1zm26.7 95.8c1.1-6.1 5.6-18.9 11.3-32 .4-.7.7-1.4 1.1-2.3 5.5-13.4 5.5-20.2 5.5-20.2-3.4 5-8.4 10.5-11.8 14-.2.1-.4.3-.6.5-8 7.6-17.6 16-23.3 19.9 1.5-11.6 6.5-25.1 11.4-36.2 2.7-5.8 8.8-16.3 8.8-16.3-5.5 3.2-11.6 4.1-13.8 4.4l-12.2 1.2c3.8-8.6 11.6-16.3 15.5-19.8h68.9c-4.7 3.7-7.8 8.2-8.8 13.2-3.8 2.4-7.4 5.1-10.7 8.3-12.4 11.8-19.5 27.7-20 44.6v4.2c.2 6.9 1.5 13.7 3.8 20-2.5.2-6.1.9-10.1 2.3-.9-1.5-2.1-2.6-3.1-3.4-3.5-2.5-8.3-2.7-11.9-2.4zm51.9 87.8c-2.4 4-8.8 16.8-7.5 38.9 0 .3 0 .5.1.8-7.3-7.4-10.4-16-11.6-20.5-1.1-4.7-1.6-9.6-1.6-9.6-5.1.4-12.6 5.7-12.6 5.7-2.2 1.3-4.2 2.9-6 4.3-2.6-9.3-1.4-16.2-.3-19.6 2.2 1.4 4.4 2.5 6.8 3.4 3.7 1.4 7.4 2 11.1 2 7.5 0 14.9-2.7 21.5-7.8v2.4zm0-14.8l-.2.2c-8.5 9.8-19.2 13.3-29.4 9.6-12.9-4.8-21.7-19.8-21.8-37.5-.1-11.2 2.8-19.8 8.5-25.4 8-7.8 19.1-7.7 19.2-7.6.3 0 .6 0 .9-.1 3.2 5.8 7.3 11.2 12.2 15.9 3.3 3.1 6.8 5.9 10.6 8.2v36.7zm238.9 1c-.4 2.7-5.2 7.7-20.6 9.6-15.4 1.9-32.5-3.4-46.2-7.6-.4-.1-.9-.3-1.3-.4-9.5-3.2-25-10.4-25-10.4.2 4.5-3.3 8.6-5.8 11-.3.3-.7.6-1.1.9-4.3 3.6-9.3 7.6-14 7.1-4.5-.6-5.8-2.7-6.3-4.3-.8-2.4-.5-5.5.3-8.2.5-1.3 1.5-3.6 3.2-6 1.9-2.7 7.3-7.4 8.6-7.4 0 0-7.5-6-14.4.7-.2.1-.4.3-.6.5-4.9 4.9-8.3 15.5-5.5 23.4 2 5.8 6.9 9.5 13.7 10.3.7.1 1.4.1 2 .1 7.6 0 14-5.2 18.7-9.2 1.8-1.5 4-3.3 5-3.7 2.9-.9 11.8 1.8 19.8 4.3 14.5 4.5 32.6 10.1 50 8 1.3-.2 3-.4 4.8-.8.7 2.2 2 4.9 4.4 7.8.6.8 1.3 1.9.8 3-.4.9-1.4 1.5-2.5 1.5H213.5c-11.6 0-21.1 9.5-21.1 21.1 0 11.6 9.5 21.1 21.1 21.1h166.4l1.3-1.6c4.6-5.6 13.6-13.3 18.1-12.1 1.8.5 2 1.2 2 1.5.3 1.5-.9 4.4-3.5 6.7-1.2.9-7.5 5.9-7.2 11 0 0 7.6-3.3 12.4-2.3 2.4.7 4.3 2.1 5.6 4.2 2.4 3.7 2.5 9.3.4 14.8-12 31.5-48.2 48.1-104.7 48.1-38.1 0-67.1-13.5-84.7-24.8-19.2-12.3-29.5-24.9-29.6-25l-.7-.8-1-.4c-11.8-5.3-25-19.8-26.2-39.1-1.1-18.4 3.9-30.5 6.7-34.3l.8-1.1c.9-1.2 5.3-6.5 9.6-10.2 0 0-4.4-.5-9.5 1.3v-40.9c8.1 3.5 16.9 5.3 26 5.3h19.6c.3 0 .7 0 1-.1 34.2-1.9 61.4-30.2 61.4-64.9 0-1.3 0-2.5-.1-3.8h20.7c0 .6-.1 1.1-.1 1.7v4.2c.5 17 7.6 32.8 20 44.6 12.3 11.8 28.5 18.2 45.5 18.2h18.5v14.9c-10.4-.4-25.9-2.3-49.3-11.1-24.5-9.2-34.3-30.2-38.2-46.8-.3-1.9-2.9-18.5-2.2-22.5 0 0-9.7 6.5-7 22.3 0 .2 0 .4.1.6.1.3.1.5.2.8v.2c4.2 18.8 15.3 43.1 43.9 53.8 31.1 11.7 49 11.7 59.6 11.7 4 0 7.1 0 8.6.7.9.3 2 1.3 1.7 2.8zm-28.3 39v20.9c-.5 1.7-2 2.9-3.8 2.9h-15.4c-2 0-3.7-1.5-3.9-3.5v-20.3h23.1zm-32.1 0v21.1c-.5 1.6-2 2.7-3.8 2.7H320c-2.2 0-4-1.8-4-4v-19.8h23.2zm-32 0v20.9c-.5 1.6-2 2.9-3.8 2.9H288c-2.1 0-3.7-1.6-3.9-3.6v-20.2h23.1zm-32.1 0v20.7c-.4 1.8-2 3.1-3.9 3.1h-15.4c-1.9 0-3.5-1.3-3.9-3.1v-20.7h23.2zm-32.1 0v20.8c-.4 1.7-2 3-3.9 3h-15.4c-1.9 0-3.5-1.3-3.9-3.1v-20.7H243zm-32 .3v14.3c-8.4-.9-8.9-6.5-8.9-6.5 1.4-4 4.8-7 8.9-7.8zm188.7-51.1c-2.5-.7-5.2-.8-8.7-.9v-15.9c7.3-1.2 14.2-3.6 20.5-7 1.1 14-8.3 21.5-11.8 23.8zm-19.1-24.8c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.2 56-56 56z"
        />
    </symbol>
</svg>

Text Input

Text input

<div class="form-group">
    <label>
        Text input
        <input type="text" id="textInput" class="form-control">
    </label>
</div>