MOVU Components

Add Room: With Content 

<movu-card heading="Room name">

    <div slot="body">
        <div class="card-item-box no-padding-left no-padding-right clearfix">
            <div class="col-xs-8 col-sm-9 no-padding-left card-item-box-size">
                <span class="card-item-number">1</span>
                <span class="card-item-separator">x</span>
                <span class="card-item-name">Special title treatment</span>
            </div>
            <div class="edit-delete-box">
                <div class="btn-edit-item">
                    <i class="material-icons qa-edit-btn">edit</i>
                </div>
                <div class="btn-delete-item">
                    <i class="material-icons-outlined qa-delete-btn">close</i>
                </div>
            </div>
        </div>
        <div class="card-item-attributes">

            <span class="card-attribute-name small">Attribute 1</span>

            <span class="card-attribute-name small">Attribute 2</span>

        </div>
        <p class="card-comment small">Comment et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi.</p>
    </div>

    <div slot="footer">
        <movu-button secondary text="Add item" icon_name="control_point"></movu-button>
    </div>
</movu-card>
 
{% extends "@inventory-add-room-template" %}
  {% block main %}
    {% if additionalClass %}
      <div slot="body">
        <div class="card-item-box no-padding-left no-padding-right clearfix">
          <div class="col-xs-8 col-sm-9 no-padding-left card-item-box-size">
            <span class="card-item-number">{{ cardNumber }}</span>
            <span class="card-item-separator">x</span>
            <span class="card-item-name">{{ cardItemTitle }}</span>
          </div>
          <div class="edit-delete-box">
            <div class="btn-edit-item">
              <i class="material-icons qa-edit-btn">edit</i>
            </div>
            <div class="btn-delete-item">
              <i class="material-icons-outlined qa-delete-btn">close</i>
            </div>
          </div>
        </div>
        <div class="card-item-attributes">
          {% for attribute in attributes %}
            <span class="card-attribute-name small">{{ attribute }}</span>
          {% endfor %}
        </div>
        <p class="card-comment small">{{ cardItemDescription }}</p>
      </div>
    {% endif %}
  {% endblock %}
 
{
  "cardHeaderTitle": "Room name",
  "cardNumber": "1",
  "cardItemTitle": "Special title treatment",
  "cardItemDescription": "Comment et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi.",
  "attributes": [
    "Attribute 1",
    "Attribute 2"
  ],
  "additionalClass": "with-content"
}

No notes defined.