---
layout: base
---

<div class="titlebar">
  <a href="https://ibm.biz/cloud-annotations-developer"
    ><span class="prefix">IBM</span>&nbsp;Developer</a
  >
</div>

<div class="sidebar">
  <ol class="stepper">
    {% for item in site[page.collection] %} {% if item.url == page.url %}
    <li class="stepper-item active">
      <a href="{{ item.url | relative_url }}">{{ item.title }}</a>
    </li>
    {% else %}
    <li class="stepper-item">
      <a href="{{ item.url | relative_url }}">{{ item.title }}</a>
    </li>
    {% endif %} {% endfor %}
  </ol>
</div>

<div class="content-wrapper">
  <div class="content markdown-body">
    <h1>{{ page.title }}</h1>
    {{ content }}
  </div>
</div>

<div class="controls-wrapper">
  {% assign hide_prev = "hide" %} {% if page.previous %} {% assign hide_prev =
  "" %} {% endif %}
  <a
    class="button secondary {{ hide_prev }}"
    href="{{ page.previous.url | relative_url }}"
    aria-label="Previous page"
  >
    Back
  </a>
  <div class="spacer"></div>
  {% assign hide_next = "hide" %} {% if page.next %} {% assign hide_next = "" %}
  {% endif %}
  <a
    class="button primary {{ hide_next }}"
    href="{{ page.next.url | relative_url }}"
    aria-label="Next page"
  >
    Next
  </a>
</div>