MOVU Components

Personal Info Cleaning Form: Default 

<div class="movu-card-holder personal-info-card">
    <div class="movu-card-block">
        <div class="movu-card-block-inner">
            <div class="title-wrapper">

                <svg class="movu-card-title-icon" style="width:24px; height:24px" viewBox="0 0 24 24">
                    <path fill="#5C5C5C" d="M12,7H15C15.66,7.64 16,8.31 16,9V22H8V15C8,14.72 8.11,14.39 8.3,14L12,7M16,4L15,6H12V5L10,7H9L10,5V4H9V2H14.5A1.5,1.5 0 0,1 16,3.5V4Z" />
                </svg>

                <h3 class="movu-card-title">move-out-cleaning</h3>

            </div>

            <div class="border-2-bottom"></div>

            <section class="clearfix">

                <div class="row">
                    <div class="col-xs-12">
                        <h4 class="personal-info-subheadline movu-spacing-0-top movu-spacing-0-bottom">Cleaning date</h4>
                        <p class="small movu-spacing-8-bottom">You can change the date later.</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-6">
                        <movu-datepicker></movu-datepicker>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 movu-spacing-4-top">
                        <div class="form-check">
                            <label class="checkbox" for="checkbox"> I know my handover date <input type="checkbox" id="checkbox-default" name="checkbox-default" class="checkbox-default"></label>

                        </div>

                    </div>
                </div>

            </section>
        </div>
    </div>
</div>
 
{% extends '@card-with-heading' %}
{% block cardContent %}
    <div class="row">
        <div class="col-xs-12">
            <h4 class="personal-info-subheadline movu-spacing-0-top movu-spacing-0-bottom">Cleaning date</h4>
            <p class="small movu-spacing-8-bottom">You can change the date later.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <movu-datepicker></movu-datepicker>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 movu-spacing-4-top">
            {% render '@checkbox', { checkboxText: 'I know my handover date'}, true %}
        </div>
    </div>
{% endblock %}
 
{
  "cardTitle": "move-out-cleaning",
  "cardClass": "personal-info-card",
  "titleBorderExists": true,
  "headerIcon": "<svg class=\"movu-card-title-icon\" style=\"width:24px; height:24px\" viewBox=\"0 0 24 24\"><path fill=\"#5C5C5C\" d=\"M12,7H15C15.66,7.64 16,8.31 16,9V22H8V15C8,14.72 8.11,14.39 8.3,14L12,7M16,4L15,6H12V5L10,7H9L10,5V4H9V2H14.5A1.5,1.5 0 0,1 16,3.5V4Z\" /></svg>"
}

No notes defined.