{% macro infolabel(text) %}
    <div class="info-label">
        {{text | e}}
    </div>
{% endmacro %}

{% macro infocontent() %}
    <div class="docs-info">
        {{caller()}}
    </div>
{% endmacro %}

{% macro fancylabel(text) %}
    <div class="fancy-label">
        {{text | e}}
    </div>
{% endmacro %}

{% macro sassfile(filename) %}
    <span class="snippet-code sass-file-name">{{filename}}.scss</span>
{% endmacro %}

{% macro sassvar(name) %}
    <span class="snippet-code sass-var">${{name}}</span>
{% endmacro %}

{% macro mixin(name) %}
<span class="snippet-code mixin-code">
    <span class="include">@include</span>
    <span class="mixin-name">{{name}}</span>
</span>
{% endmacro %}

{% macro templateclass(class) %}
    <span class="snippet-code template-class">.{{class}}</span>
{% endmacro %}

{% macro code(class, content) %}
<div class="ui-docs-code">
<pre class="ui-snippet">
<button type="button" class="code-btn">Copy</button>
<code class="{{class}}">{{content | e}}
</code>
</pre>
</div>
{% endmacro %}

{% macro codecenter(class, content) %}
<div class="ui-docs-code">
<pre class="ui-snippet center">
<button type="button" class="code-btn">Copy</button>
<code class="{{class}}">{{content | e}}
</code>
</pre>
</div>
{% endmacro %}

{% macro togglebutton(id) %}
<div id="uikit-switch-item">
    <input type="checkbox" id="{{id}}">
    <span class="toggle">
        <label for="{{id}}">
            <i></i>
        </label>
    </span>
</div>
{% endmacro %}