{% raw %}
{% extends "mote/element/index.html" %}
{% load mote_tags %}
{% with element.json.data.Button as "button" %}
{% block codeblock %}
<div class="sg-code-block">
    <h4 class="title">
      Springster Menu
    </h4>
    <div class="description">
      <p>The 3 main navigation links that we place in the header are Search, User Tools (Log In, Register, Profile), and Menu.</p>
    </div>
    <div class="code-example">
        <pre>
            <code class="language-markup">
                <xmp>
                  {% render element %}
                </xmp>
            </code>
        </pre>
    </div>
</div>
<div class="sg-code-block">
    <h4 class="title">
      Basic Menu
    </h4>
    <div class="description">
      <p>Primary button style. Solid background color. No border.</p>
    </div>
    <div class="code-example">
        <pre>
            <code class="language-markup">
                <xmp>
                  {% render element.aspect.basics.menu.menu-base %}
                </xmp>
            </code>
        </pre>
    </div>
</div>
<div class="sg-code-block">
    <h4 class="title">
      Basic Toggle Menu with icons
    </h4>
    <div class="description">
    </div>
    <div class="code-example">
        <pre>
            <code class="language-markup">
                <xmp>
                  {% render element.aspect.basics.menu.menu-icon %}
                </xmp>
            </code>
        </pre>
    </div>
</div>
<div class="sg-code-block">
    <h4 class="title">
      Profile|Menu icons
    </h4>
    <div class="description">
    </div>
    <div class="code-example">
        <pre>
            <code class="language-markup">
                <xmp>
                  {% render element.aspect.basics.menu.menu-with_home-toggle %}
                </xmp>
            </code>
        </pre>
    </div>
</div>
<div class="sg-code-block">
    <h4 class="title">
      Menu Items with profile icon
    </h4>
    <div class="description">
      <p>Secondary button style. No background colour. Has a border.</p>
    </div>
    <div class="code-example">
        <pre>
            <code class="language-markup">
                <xmp>
                  {% render element.aspect.basics.menu.menu-with_profile-icon %}
                </xmp>
            </code>
        </pre>
    </div>
</div>
<div class="sg-code-block">
    <h4 class="title">
      Menu Items with search icon
    </h4>
    <div class="description">
      <p>Secondary button style. No background colour. Has a border.</p>
    </div>
    <div class="code-example">
        <pre>
            <code class="language-markup">
                <xmp>
                  {% render element.aspect.basics.menu.menu-with_search-icon %}
                </xmp>
            </code>
        </pre>
    </div>
</div>
{% endblock %}
{% endwith %}
{% endraw %}
