MOVU Components

Personal Info Cleaning Form: Example 

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
            <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>

        </div>
    </div>
</div>
 
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
            {% render "@personal-info-cleaning-form" %}
        </div>
    </div>
</div>
 
{
  "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.