<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" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z" />
<path fill="#5c5c5c" d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.85 7h10.29l1.08 3.11H5.77L6.85 7zM19 17H5v-5h14v5z" />
<circle cx="7.5" cy="14.5" r="1.5" />
<circle cx="16.5" cy="14.5" r="1.5" />
</svg>
<h3 class="movu-card-title">form headline</h3>
</div>
<div class="border-2-bottom"></div>
<section class="clearfix">
<div class="row">
<div class="col-xs-12">
<div style="display: inline-block;">
<div class="form-radio-btn">
<label class="radio-btn radio checked" for="radio_btn_input">
<div class="radio-btn-title-holder">
<div class="radio-btn-title-section">
<span class="radio-btn-text">Mr</span>
</div>
</div>
<input type="radio" hidden class="radio-btn-default" value="radio-btn-name">
</label>
</div>
</div>
<div style="display: inline-block; margin-left: 16px;">
<div class="form-radio-btn">
<label class="radio-btn radio" for="radio_btn_input">
<div class="radio-btn-title-holder">
<div class="radio-btn-title-section">
<span class="radio-btn-text">Ms</span>
</div>
</div>
<input type="radio" hidden class="radio-btn-default" value="radio-btn-name">
</label>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 no-padding-left no-padding-right-xs">
<movu-text-input message></movu-text-input>
</div>
<div class="col-xs-12 col-sm-6 no-padding-left no-padding-right">
<movu-text-input message></movu-text-input>
</div>
<h4 class="personal-info-subheadline">Form headline h4</h4>
<div class="col-xs-12 col-sm-6 no-padding-left no-padding-right-xs">
<movu-text-input message></movu-text-input>
</div>
<div class="col-xs-12 col-sm-6 no-padding-left no-padding-right">
<movu-text-input message></movu-text-input>
</div>
<p class="small">We use your contact information to send you notifications about your quotes. Your mobile phone number allows us to contact you in case of any questions.</p>
<a class="small movu-spacing-16-top" target="_blank" href="https://www.movu.ch/en/privacy/"> Privacy policy</a>
<div class="row">
<div class="col-xs-12">
<div class="border-2-bottom movu-spacing-16-top"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h4 class="personal-info-subheadline movu-spacing-0-bottom">Moving 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-16-top text-right">
<movu-button primary text="Click me"></movu-button>
</div>
</div>
</section>
</div>
</div>
</div>
{% extends '@card-with-heading' %}
{% block cardContent %}
<div class="row">
<div class="col-xs-12">
<div style="display: inline-block;">
{% render '@radio-button--checked', { radioBtnText: 'Mr' }, true %}
</div>
<div style="display: inline-block; margin-left: 16px;">
{% render '@radio-button', { radioBtnText: 'Ms' }, true %}
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 no-padding-left no-padding-right-xs">
<movu-text-input message></movu-text-input>
</div>
<div class="col-xs-12 col-sm-6 no-padding-left no-padding-right">
<movu-text-input message></movu-text-input>
</div>
<h4 class="personal-info-subheadline">Form headline h4</h4>
<div class="col-xs-12 col-sm-6 no-padding-left no-padding-right-xs">
<movu-text-input message></movu-text-input>
</div>
<div class="col-xs-12 col-sm-6 no-padding-left no-padding-right">
<movu-text-input message></movu-text-input>
</div>
<p class="small">We use your contact information to send you notifications about your quotes. Your mobile phone number allows us to contact you in case of any questions.</p>
<a class="small movu-spacing-16-top" target="_blank" href="https://www.movu.ch/en/privacy/"> Privacy policy</a>
<div class="row">
<div class="col-xs-12">
<div class="border-2-bottom movu-spacing-16-top"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h4 class="personal-info-subheadline movu-spacing-0-bottom">Moving 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>
{% if buttonExists %}
<div class="row">
<div class="col-xs-12 movu-spacing-16-top text-right">
<movu-button primary text="Click me"></movu-button>
</div>
</div>
{% endif %}
{% endblock %}
{
"cardTitle": "form headline",
"cardClass": "personal-info-card",
"titleBorderExists": true,
"headerIcon": "<svg class=\"movu-card-title-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path fill=\"#5c5c5c\" d=\"M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.85 7h10.29l1.08 3.11H5.77L6.85 7zM19 17H5v-5h14v5z\"/><circle cx=\"7.5\" cy=\"14.5\" r=\"1.5\"/><circle cx=\"16.5\" cy=\"14.5\" r=\"1.5\"/></svg>",
"buttonExists": true
}
No notes defined.