No notes defined.
<div class='form-row'>
{% include '@form-item' with first|merge({'stacked': true}) %}
{% include '@form-item' with second|merge({'stacked': true}) %}
</div>
<div class='form-row'>
<div class="form-item error stacked">
<label for="postal-code_id">Postal code
</label>
<div class="field-message " id="postal-code_id-description">
Wrap form items in a .form-row element.
<div class="accolade "></div>
</div>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="postal-code_id" aria-describedby="postal-code_id-message" name="postal-code_name" class="text error" aria-invalid="true" />
</div>
<div class="form-item-column">
<div class="field-message error" role="alert" id="postal-code_id-message">
Almost there!
<div class="accolade "></div>
</div>
</div>
</div>
</div>
<div class="form-item success stacked">
<label for="municipality_id">Municipality
</label>
<div class="field-message " id="municipality_id-description">
Place modifier .stacked on the form-items.
<div class="accolade "></div>
</div>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="municipality_id" aria-describedby="municipality_id-message" name="municipality_name" class="text success" />
</div>
<div class="form-item-column">
<div class="field-message success" role="alert" id="municipality_id-message">
Very good!
<div class="accolade "></div>
</div>
</div>
</div>
</div>
</div>
{
"first": {
"label": "Postal code",
"id": "postal-code_id",
"input_component": "input",
"type": "text",
"modifier": "error",
"field_message": "Almost there!",
"field_description": "Wrap form items in a .form-row element.",
"name": "postal-code_name"
},
"second": {
"label": "Municipality",
"id": "municipality_id",
"input_component": "input",
"type": "text",
"modifier": "success",
"field_message": "Very good!",
"field_description": "Place modifier .stacked on the form-items.",
"name": "municipality_name"
}
}
.form-row {
display: flex;
flex-wrap: wrap;
width: calc(100% + .8rem);
max-width: 21.3rem;
margin-right: -.4rem;
margin-left: -.4rem;
@include desktop {
width: calc(50% + .8rem);
}
> * {
flex-basis: calc((21.3rem - 100%) * 999);
flex-grow: 1;
margin-right: .4rem;
margin-left: .4rem;
}
}