<div class="price-block">
<div class="price-block__header">
<p class="text-inverted">Hind</p>
</div>
<div class="price-block__content">
<p class="price-block__heading text-medium">Päeva hind:</p>
<p>
<span class="price-block__price--success-bg text-medium">42.50€</span>
<span> KM-ga: 51.00€</span>
</p>
<div class="divider"></div>
<p class="price-block__heading text-medium">Kohustusliku Riskikaitse ühe päeva hind:</p>
<p>
<span class="price-block__price--success-bg text-medium">2.13€</span>
<span> KM-ga: 2.55€</span>
</p>
<div class="divider "></div>
<p class="price-block__heading text-medium">Tasuta rendipäevi nädalas:</p>
<p>6 – pühapäeva ei arveldata juhul kui seadet pühapäeval ei kasutata</p>
<button type="button" class="button button--block price-block__button">
<span class="button__inner">
<span class="button__text">Vaata saadavust</span>
</span>
</button>
</div>
</div>
<div class="price-block">
<div class="price-block__header">
<p class="text-inverted">Hind</p>
</div>
<div class="price-block__content">
<p class="price-block__heading text-medium">Päeva hind:</p>
<p>
<span class="price-block__price--success-bg text-medium">42.50€</span>
<span> KM-ga: 51.00€</span>
</p>
<div class="divider"></div>
<p class="price-block__heading text-medium">Kohustusliku Riskikaitse ühe päeva hind:</p>
<p>
<span class="price-block__price--success-bg text-medium">2.13€</span>
<span> KM-ga: 2.55€</span>
</p>
{% include '@divider' with { modifier: '' } %}
<p class="price-block__heading text-medium">Tasuta rendipäevi nädalas:</p>
<p>6 – pühapäeva ei arveldata juhul kui seadet pühapäeval ei kasutata</p>
{% include '@button' with { class: 'price-block__button', data: data.button, modifier: 'button--block' } %}
</div>
</div>
{
"language": "en-US",
"data": {
"button": {
"text": "Vaata saadavust"
}
}
}
.price-block {
border-radius: $border-radius-base;
background: $L-background;
}
.price-block__header {
padding: 14.5px 16px;
background: $L-background-strong;
display: flex;
justify-content: center;
align-items: center;
border-radius: $border-radius-base $border-radius-base 0 0;
}
.price-block__content {
padding: 16px;
box-shadow: $elevation-02;
border-radius: 0 0 $border-radius-base $border-radius-base;
}
.price-block__heading {
margin-bottom: 2px;
}
.price-block__price--success-bg {
background: $L-success-background;
}
.price-block__button {
margin-top: 16px;
}
import './price-block.scss';