{%- from 'macros/icons.html' import render_icon %}


  <p>A simple dropdown menu:</p>

  {%- set example_dropdown -%}
<div class="dropdown right">
  <button class="dropdown-toggle button"><span>Toggle</span> {{ render_icon('caret-down') }}</button>
  <ol>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li class="divider"></li>
    <li><a href="#">Three</a></li>
  </ol>
</div>
  {%- endset %}

  <div class="example">
    <div class="example-result">
{{ example_dropdown }}
    </div>
    <div class="example-code">
      {% call render_code_block() -%}
{{ example_dropdown }}
      {%- endcall %}
    </div>
  </div>

{%- from 'macros/icons.html' import render_icon %}


  <p>A simple dropdown menu:</p>

  {%- set example_dropdown -%}
<div class="dropdown">
  <button class="dropdown-toggle button"><span>Left-aligned (default)</span> {{ render_icon('caret-down') }}</button>
  <ol>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li class="divider"></li>
    <li><a href="#">Three</a></li>
  </ol>
</div>

<div class="dropdown right">
  <button class="dropdown-toggle button"><span>Right-aligned</span> {{ render_icon('caret-down') }}</button>
  <ol>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li class="divider"></li>
    <li><a href="#">Three</a></li>
  </ol>
</div>
  {%- endset %}

  <div class="example">
    <div class="example-result">
{{ example_dropdown }}
    </div>
    <div class="example-code">
      {% call render_code_block() -%}
{{ example_dropdown }}
      {%- endcall %}
    </div>
  </div>

Add example for right-align dropdown to style guide
Add example for right-align dropdown to style guide
