<div class="password-form ">
<div class="password-form__inner">
<h1 class="h2 password-form__title">Hello beautiful</h1>
<div class="password-form__text">This page is password protected, to continue<br> enter the password</div>
<form class="password-form__form" action="/" method="post">
<div class="textfield">
<label class="textfield__label " for="password-field">
Password
</label>
<div class="textfield__inner">
<input class="textfield__input" type="password" id="password-field" name="" placeholder="Password">
</div>
</div>
<button type="submit" class="button button--block-xs">
<span class="button__inner">
<span class="button__text">Enter</span>
</span>
</button>
</form>
</div>
</div>
<div class="password-form {{ class }} {{ modifier }}">
<div class="password-form__inner">
{% if data.title %}
{% set headingElement = data.headingElement ?? 'h2' %}
<{{ headingElement }} class="h2 password-form__title">{{ data.title }}</{{ headingElement }}>
{% endif %}
{% if data.text %}
<div class="password-form__text">{{ data.text }}</div>
{% endif %}
<form class="password-form__form" action="{{ data.form.action|default('/') }}" method="post">
{% include '@textfield' with { data: data.field } %}
{% if data.button %}
{% include '@button' with { class: '', modifier: 'button--block-xs', type: 'submit', data: data.button } %}
{% endif %}
</form>
</div>
</div>
{
"language": "en-US",
"data": {
"headingElement": "h1",
"title": "Hello beautiful",
"text": "This page is password protected, to continue<br> enter the password",
"field": {
"type": "password",
"placeholder": "Password",
"label": "Password",
"id": "password-field",
"hiddenLabel": true
},
"button": {
"text": "Enter"
}
}
}
.password-form__inner {
max-width: 650px;
margin: 0 auto;
}
.password-form__inner,
.password-form__form {
> * + * {
margin-top: 32px;
@include bp(sm-min) {
margin-top: 48px;
}
}
}
import './password-form.scss';