{% include anchor.html name="Variables" %}

<div class="content">
  <p>
    {% if include.custom_message %}{{ include.custom_message }}{% else %}You can use these variables to <strong>customize</strong> this {%if include.element %}element{% elsif include.layout %}layout{% else %}component{% endif %}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endif %}
  </p>
</div>

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Default value</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Default value</th>
    </tr>
  </tfoot>
  <tbody>
    {% for variable in page.variables %}
      <tr>
        <td>
          <code>{{ variable.name }}</code>
        </td>
        <td>
          <code>{{ variable.value }}</code>
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>