<div class="ui_section">

    <div class="mw-flex-row">
        <div class="mw-flex-col-xs-6">
            <h2>Buttons</h2>

            <hr>

            <h3>Default</h3>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-small">Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-medium">Medium</a>
            <a href="javascript:;" class="mw-ui-btn">Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-big">Big</a>

            <a href="javascript:;" class="mw-ui-btn disabled">Disabled</a>
            <button class="mw-ui-btn" disabled>Disabled</button>

            <h3>Invert</h3>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-small mw-ui-btn-invert">Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-medium mw-ui-btn-invert">Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-invert">Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-big mw-ui-btn-invert">Big</a>

            <h3>Info</h3>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-small mw-ui-btn-info">Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-medium mw-ui-btn-info">Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-info">Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-big mw-ui-btn-info">Big</a>

            <h3>Warn</h3>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-small mw-ui-btn-warn">Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-medium mw-ui-btn-warn">Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-warn">Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-big mw-ui-btn-warn">Big</a>

            <h3>Important</h3>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-small mw-ui-btn-important">Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-medium mw-ui-btn-important">Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-important">Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-big mw-ui-btn-important">Big</a>

            <h3>Rounded</h3>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-small mw-ui-btn-rounded">Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-medium mw-ui-btn-rounded">Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-rounded">Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-big mw-ui-btn-rounded">Big</a>

            <h3>Notification</h3>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-small mw-ui-btn-notification">Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-medium mw-ui-btn-notification">Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-notification">Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-big mw-ui-btn-notification">Big</a>

            <h3>Button with icon</h3>


            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-small"><span class="mai-website"></span> Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-medium"><span class="mai-website"></span> Medium</a>
            <a href="javascript:;" class="mw-ui-btn"><span class="mai-website"></span> Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-big"><span class="mai-website"></span> Big</a>

            <h3>Icon only</h3>

            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-small"><span class="mw-icon-gear"></span></a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-medium"><span class="mw-icon-gear"></span></a>
            <a href="javascript:;" class="mw-ui-btn"><span class="mw-icon-gear"></span></a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-big"><span class="mw-icon-gear"></span></a>


            <h3>Button with image</h3>

            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-small"><span class="mw-ui-btn-img" style="background-image: url(https://picsum.photos/50/50?v=1896727020)"></span> Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-medium"><span class="mw-ui-btn-img" style="background-image: url(https://picsum.photos/50/50?v=270356512)"></span> Medium</a>
            <a href="javascript:;" class="mw-ui-btn"><span class="mw-ui-btn-img" style="background-image: url(https://picsum.photos/50/50?v=664070448)"></span> Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-big"><span class="mw-ui-btn-img" style="background-image: url(https://picsum.photos/50/50?v=331172226)"></span> Big</a>

            <h3>Mixed</h3>
            <div class="mw-ui-btn-nav">
                <a href="javascript:;" class="mw-ui-btn">Home</a>
                <a href="javascript:;" class="mw-ui-btn"><span class="mw-icon-gear"></span></a>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div class="mw-ui-btn-nav">
                <a href="javascript:;" class="mw-ui-btn">Home</a>
                <a href="javascript:;" class="mw-ui-btn"><span class="mw-icon-arrow-down-b"></span></a>
            </div>
            <br><br>
            <div class="mw-ui-btn-nav">
                <a href="javascript:;" class="mw-ui-btn"><span class="mw-icon-magnify"></span></a>
                <input type="text" class="mw-ui-field" placeholder="Search..." />
                <a href="javascript:;" class="mw-ui-btn"><span class="mw-icon-gear"></span></a>
            </div>


        </div>
        <div class="mw-flex-col-xs-6">
            <h2>Outlined Buttons</h2>

            <hr>

            <h3>Default</h3>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-small">Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-medium">Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline">Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-big">Big</a>

            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline disabled">Disabled</a>
            <button class="mw-ui-btn mw-ui-btn-outline" disabled>Disabled</button>

            <h3>Invert</h3>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-small mw-ui-btn-invert">Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-medium mw-ui-btn-invert">Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-invert">Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-big mw-ui-btn-invert">Big</a>

            <h3>Info</h3>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-small mw-ui-btn-info">Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-medium mw-ui-btn-info">Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-info">Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-big mw-ui-btn-info">Big</a>

            <h3>Warn</h3>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-small mw-ui-btn-warn">Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-medium mw-ui-btn-warn">Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-warn">Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-big mw-ui-btn-warn">Big</a>

            <h3>Important</h3>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-small mw-ui-btn-important">Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-medium mw-ui-btn-important">Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-important">Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-big mw-ui-btn-important">Big</a>

            <h3>Rounded</h3>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-small mw-ui-btn-rounded">Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-medium mw-ui-btn-rounded">Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-rounded">Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-big mw-ui-btn-rounded">Big</a>

            <h3>Notification</h3>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-small mw-ui-btn-notification">Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-medium mw-ui-btn-notification">Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-notification">Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-big mw-ui-btn-notification">Big</a>

            <h3>Button with icon</h3>


            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-small"><span class="mai-website"></span> Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-medium"><span class="mai-website"></span> Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline"><span class="mai-website"></span> Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-big"><span class="mai-website"></span> Big</a>

            <h3>Icon only</h3>

            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-small"><span class="mw-icon-gear"></span></a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-medium"><span class="mw-icon-gear"></span></a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline"><span class="mw-icon-gear"></span></a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-big"><span class="mw-icon-gear"></span></a>


            <h3>Button with image</h3>

            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-small"><span class="mw-ui-btn-img" style="background-image: url(https://picsum.photos/50/50?v=1896727020)"></span> Small</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-medium"><span class="mw-ui-btn-img" style="background-image: url(https://picsum.photos/50/50?v=270356512)"></span> Medium</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline"><span class="mw-ui-btn-img" style="background-image: url(https://picsum.photos/50/50?v=664070448)"></span> Normal</a>
            <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline mw-ui-btn-big"><span class="mw-ui-btn-img" style="background-image: url(https://picsum.photos/50/50?v=331172226)"></span> Big</a>

            <h3>Mixed</h3>
            <div class="mw-ui-btn-nav">
                <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline">Home</a>
                <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline"><span class="mw-icon-gear"></span></a>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div class="mw-ui-btn-nav">
                <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline">Home</a>
                <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline"><span class="mw-icon-arrow-down-b"></span></a>
            </div>
            <br><br>
            <div class="mw-ui-btn-nav">
                <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline"><span class="mw-icon-magnify"></span></a>
                <input type="text" class="mw-ui-field" placeholder="Search..." />
                <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline"><span class="mw-icon-gear"></span></a>
            </div>
            <br>
            <h3>Dropdown</h3>
            <div class="mw-ui-btn-nav">
                <a href="javascript:;" class="mw-ui-btn mw-ui-btn-outline"><span class="mw-icon-magnify"></span></a>
                <input type="text" class="mw-ui-field" placeholder="Search..." />
                <div class="mw-dropdown mw-dropdown-default">
                    <span class="mw-dropdown-value mw-ui-btn mw-dropdown-val">Choose</span>
                    <div class="mw-dropdown-content">
                        <ul>
                            <li value="1">Option 1</li>
                            <li value="2">Option 2 !!!</li>
                            <li value="3">Option 3</li>
                        </ul>
                    </div>
                </div>
            </div>
            <br>
            <br>
            <div class="mw-ui-btn-nav">
                <div class="mw-dropdown mw-dropdown-default">
                    <span class="mw-dropdown-value mw-ui-btn mw-dropdown-val">Choose</span>
                    <div class="mw-dropdown-content">
                        <ul>
                            <li value="1">Option 1</li>
                            <li value="2">Option 2 !!!</li>
                            <li value="3">Option 3</li>
                        </ul>
                    </div>
                </div>
                <input type="text" class="mw-ui-field" placeholder="Search..." />
            </div>
        </div>
    </div>
    <h2>Link</h2>
    <a href="javascript:;" class="mw-ui-link">Lorem ipsum</a>

</div>