<div class="container">
<!-- MOBILE VIEW -->
<div class="row visible-xs">
<div class="col-xs-12">
<div class="tags visible">
<div class="tag-movu">
<i class="material-icons star">star</i>
<span>Movu recommendation</span>
</div>
<div class="tag-regional">
<i class="material-icons region">place</i>
<span>Regional</span>
</div>
</div>
<div class="provider-offer-default with-tags">
<!-- headline -->
<h2 class="headline">Scholler Umuzge Test AG</h2>
<!-- rating section -->
<div class="row">
<div class="col-xs-12">
<movu-star-rating disabled value="3.7" rate_number="3" overall_rating_number="3/5" global_rate_text="Good">
</movu-star-rating>
</div>
</div>
<!-- badge section -->
<div class="row">
<div class="col-xs-12">
<div class="border-bottom">
<h4 class="number-bookings">601 bookings</h4>
<br class="visible-sm">
<span class="movu">with MOVU</span>
<div class="movu-icons-wrapper clearfix">
<div class="icon-holder">
<div class="movu-badge movu-badge-friendliness-de"></div>
</div>
<div class="icon-holder">
<div class="movu-badge movu-badge-carefulness-de"></div>
</div>
<div class="icon-holder">
<div class="movu-badge movu-badge-punctuality-de"></div>
</div>
</div>
</div>
</div>
</div>
<!-- price section -->
<div class="row">
<div class="col-xs-12 text-center">
<p class="old-price">chf2269.-</p>
<h1 class="new-price">CHF 1990.-</h1>
<!-- button cta primary -->
<movu-button primary text="click me" cta></movu-button>
</div>
</div>
</div>
</div>
</div>
<!-- TABLET VIEW -->
<div class="row visible-sm visible-md">
<div class="col-sm-7 col-md-6">
<div class="tags visible">
<div class="tag-movu">
<i class="material-icons star">star</i>
<span>Movu recommendation</span>
</div>
<div class="tag-regional">
<i class="material-icons region">place</i>
<span>Regional</span>
</div>
</div>
<div class="provider-offer-default with-tags">
<div class="row">
<!-- headline section -->
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4">
<div class="logo"></div>
</div>
<div class="col-sm-8">
<h2 class="headline">Scholler Umuzge Test AG</h2>
</div>
</div>
</div>
<!-- ratings section -->
<div class="col-sm-12">
<movu-star-rating disabled value="3.7" rate_number="3" overall_rating_number="3/5" global_rate_text="Good">
</movu-star-rating>
</div>
<!-- badge section -->
<div class="col-sm-12 movu-spacing-8-top">
<div class="row">
<div class="col-sm-4">
<h4 class="number-bookings">601 bookings</h4>
<p class="movu">with MOVU</p>
</div>
<div class="col-sm-8">
<div class="movu-icons-wrapper clearfix">
<div class="icon-holder">
<div class="movu-badge movu-badge-friendliness-de"></div>
</div>
<div class="icon-holder">
<div class="movu-badge movu-badge-carefulness-de"></div>
</div>
<div class="icon-holder">
<div class="movu-badge movu-badge-punctuality-de"></div>
</div>
</div>
</div>
</div>
</div>
<!-- price section -->
<div class="col-sm-12 text-right">
<p class="old-price">chf2269.-</p>
<h1 class="new-price">CHF 1990.-</h1>
<movu-button primary text="click me" cta></movu-button>
</div>
</div>
</div>
</div>
</div>
<!-- DESKTOP VIEW -->
<div class="row visible-lg">
<div class="col-lg-8">
<div class="tags visible">
<div class="tag-movu">
<i class="material-icons star">star</i>
<span>Movu recommendation</span>
</div>
<div class="tag-regional">
<i class="material-icons region">place</i>
<span>Regional</span>
</div>
</div>
<div class="provider-offer-default with-tags">
<div class="row">
<!-- headline, ratings and badges section -->
<div class="col-lg-8">
<div class="row">
<div class="col-lg-3">
<div class="logo"></div>
</div>
<div class="col-lg-9">
<h2 class="headline">Scholler Umuzge Test AG</h2>
</div>
</div>
<!-- ratings -->
<div class="row">
<div class="col-lg-12">
<movu-star-rating disabled value="3.7" rate_number="3" overall_rating_number="3/5" global_rate_text="Good">
</movu-star-rating>
</div>
</div>
<div class="row desktop">
<div class="col-lg-4">
<h4 class="number-bookings">601 bookings</h4>
<p class="movu">with MOVU</p>
</div>
<!-- badges -->
<div class="col-lg-8">
<div class="movu-icons-wrapper clearfix">
<div class="icon-holder">
<div class="movu-badge movu-badge-friendliness-de"></div>
</div>
<div class="icon-holder">
<div class="movu-badge movu-badge-carefulness-de"></div>
</div>
<div class="icon-holder">
<div class="movu-badge movu-badge-punctuality-de"></div>
</div>
</div>
</div>
</div>
</div>
<!-- price section -->
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 text-right">
<p class="old-price movu-spacing-18-top">chf2269.-</p>
<h1 class="new-price">CHF 1990.-</h1>
<!-- accordion -->
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Accordion default</h2>
<movu-accordion heading="ACCORDION" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus, orci ut tincidunt vulputate, tortor erat maximus dolor, vel convallis ligula."></movu-accordion>
</div>
<div class="col-md-6">
<h2>Accordion disabled</h2>
<movu-accordion heading="ACCORDION" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus, orci ut tincidunt vulputate, tortor erat maximus dolor, vel convallis ligula." disabled></movu-accordion>
</div>
<div class="col-md-6">
<h2>Accordion with icon</h2>
<movu-accordion icon_name="mic" heading="ACCORDION" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus, orci ut tincidunt vulputate, tortor erat maximus dolor, vel convallis ligula."></movu-accordion>
</div>
<div class="col-md-6">
<h2>Accordion with two rows headline</h2>
<movu-accordion custom_class="two-rows-headline" heading="ACCORDION IN 2 ROWS. SUPER LONG TITLE NAME" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus, orci ut tincidunt vulputate, tortor erat maximus dolor, vel convallis ligula."></movu-accordion>
</div>
<div class="col-md-6">
<h2>Accordion with dynamic content</h2>
<movu-accordion heading="ACCORDION" description="<p>Learn more about the next steps:</p>
<ol class='ordered-list'>
<li>Choose an offer that best meets your needs and price expectation.</li>
<li>Choose one of the following payment methods: Credit card, invoice or cash on the service day. </li>
<li>After the booking both you and the company will receive a booking confirmation email as well as the necessary contact information. </li>
<li>The company will contact you 1-2 days after your booking to discuss all the relevant details and the procedure on the service day.</li>
</ol>">
</movu-accordion>
</div>
</div>
</div>
<movu-button primary text="click me" cta></movu-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<!-- MOBILE VIEW -->
<div class="row visible-xs">
<div class="col-xs-12">
<div class="{{ tagClass }}">
{% render '@tag-movu' %}
{% render '@tag-movu--regional' %}
</div>
<div class="{{ cardClass }}">
<!-- headline -->
<h2 class="headline">Scholler Umuzge Test AG</h2>
<!-- rating section -->
<div class="row">
<div class="col-xs-12">
{% render '@star-rating' %}
</div>
</div>
<!-- badge section -->
<div class="row">
<div class="col-xs-12">
<div class="border-bottom">
<h4 class="number-bookings">601 bookings</h4>
<br class="visible-sm">
<span class="movu">with MOVU</span>
<div class="movu-icons-wrapper clearfix">
{% render '@trust-badge', { badgeClass: "movu-badge-friendliness-de" } %}
{% render '@trust-badge', { badgeClass: "movu-badge-carefulness-de" } %}
{% render '@trust-badge', { badgeClass: "movu-badge-punctuality-de" } %}
</div>
</div>
</div>
</div>
<!-- price section -->
<div class="row">
<div class="col-xs-12 text-center">
<p class="old-price">chf2269.-</p>
<h1 class="new-price">CHF 1990.-</h1>
<!-- button cta primary -->
<movu-button primary text="click me" cta></movu-button>
</div>
</div>
</div>
</div>
</div>
<!-- TABLET VIEW -->
<div class="row visible-sm visible-md">
<div class="col-sm-7 col-md-6">
<div class="{{ tagClass }}">
{% render '@tag-movu' %}
{% render '@tag-movu--regional' %}
</div>
<div class="{{ cardClass }}">
<div class="row">
<!-- headline section -->
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4">
<div class="logo"></div>
</div>
<div class="col-sm-8">
<h2 class="headline">Scholler Umuzge Test AG</h2>
</div>
</div>
</div>
<!-- ratings section -->
<div class="col-sm-12">
{% render '@star-rating' %}
</div>
<!-- badge section -->
<div class="col-sm-12 movu-spacing-8-top">
<div class="row">
<div class="col-sm-4">
<h4 class="number-bookings">601 bookings</h4>
<p class="movu">with MOVU</p>
</div>
<div class="col-sm-8">
<div class="movu-icons-wrapper clearfix">
{% render '@trust-badge', { badgeClass: "movu-badge-friendliness-de" } %}
{% render '@trust-badge', { badgeClass: "movu-badge-carefulness-de" } %}
{% render '@trust-badge', { badgeClass: "movu-badge-punctuality-de" } %}
</div>
</div>
</div>
</div>
<!-- price section -->
<div class="col-sm-12 text-right">
<p class="old-price">chf2269.-</p>
<h1 class="new-price">CHF 1990.-</h1>
<movu-button primary text="click me" cta></movu-button>
</div>
</div>
</div>
</div>
</div>
<!-- DESKTOP VIEW -->
<div class="row visible-lg">
<div class="col-lg-8">
<div class="{{ tagClass }}">
{% render '@tag-movu' %}
{% render '@tag-movu--regional' %}
</div>
<div class="{{ cardClass }}">
<div class="row">
<!-- headline, ratings and badges section -->
<div class="col-lg-8">
<div class="row">
<div class="col-lg-3">
<div class="logo"></div>
</div>
<div class="col-lg-9">
<h2 class="headline">Scholler Umuzge Test AG</h2>
</div>
</div>
<!-- ratings -->
<div class="row">
<div class="col-lg-12">
{% render '@star-rating' %}
</div>
</div>
<div class="row desktop">
<div class="col-lg-4">
<h4 class="number-bookings">601 bookings</h4>
<p class="movu">with MOVU</p>
</div>
<!-- badges -->
<div class="col-lg-8">
<div class="movu-icons-wrapper clearfix">
{% render '@trust-badge', { badgeClass: "movu-badge-friendliness-de" } %}
{% render '@trust-badge', { badgeClass: "movu-badge-carefulness-de" } %}
{% render '@trust-badge', { badgeClass: "movu-badge-punctuality-de" } %}
</div>
</div>
</div>
</div>
<!-- price section -->
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 text-right">
<p class="old-price movu-spacing-18-top">chf2269.-</p>
<h1 class="new-price">CHF 1990.-</h1>
<!-- accordion -->
{% render '@accordion', accordionData, true %}
<movu-button primary text="click me" cta></movu-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"tagClass": "tags visible",
"cardClass": "provider-offer-default with-tags",
"accordionData": {
"title_example": "See detailed price",
"content": "<div class='row'> <div class='col-lg-12'> <div class='row movu-spacing-8-top'> <div class='col-lg-6 text-left movu-spacing-16-bottom'> <p class='service'>Moving service</p> </div> <div class='col-lg-6 text-right movu-spacing-16-bottom'> <p class='service-price'>chf 29300.-</p> </div> </div> <div class='row'> <div class='col-lg-6 text-left movu-spacing-16-bottom'> <p class='service'>Disassembling/ Assembling of furniture</p> </div> <div class='col-lg-6 text-right movu-spacing-16-bottom'> <p class='service-price'>chf 99.-</p> </div> </div> <div class='row'> <div class='col-lg-6 text-left movu-spacing-16-bottom'> <p class='service'>Renting wardrobe boxes</p> </div> <div class='col-lg-6 text-right movu-spacing-16-bottom'> <p class='service-price'>chf 230.-</p> </div> </div> <div class='row'> <div class='col-lg-6 text-left'> <p class='service'>Furniture lift</p> </div> <div class='col-lg-6 text-right'> <p class='service-price'>chf 33.-</p> </div> </div> </div> </div>"
}
}
No notes defined.