<div class="{{ css }}">
  <div class="{{ component_css.card }}">
    {% if heading %}
    <div class="{{ component_css.header }}">
      <h4 class="header-title">{{ heading }}</h4>
      {% if actions %}
      <div x-data="{ open: false }" class="dropdown">
        <button x-on:click="open = ! open" aria-expanded="false" class="dropdown-btn">
          Actions
        </button>
        <div x-show="open" class="dropdown-content">
          {% for a in actions %}
          <a href="{{a.0}}">{{a.1}}</a>
          {% endfor %}
        </div>
      </div>
      {% endif %}
    </div>
    {% endif %}
    {% if image_url %}
        <img class="{{ component_css.image }}" src="{{image_url}}" alt="{{ element_id }}">
    {% endif %}
    <div class="{{ component_css.body }}">
      {{ components }}
    </div>
    {% if footer %}
      <div class="{{ component_css.footer }}">{{ footer }}</div>
    {% endif %}
  </div>
</div>