51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Paywall: Login

100% 
<form class="o-form">
    <div class="o-paywall o-paywall--register">
        <div class="o-paywall__header">
            <span class="c-badge c-badge--user c-badge--large c-badge--outline">HAZ+</span>
        </div>
        <div class="o-paywall__body">
            <div class="grid-x grid-padding-y grid-padding-x">
                <div class="cell">
                    <h3 class="u-inline-block">
                        Melden Sie sich an:
                    </h3>
                </div>
                <div class="cell medium-6">
                    <div class="o-form__field">
                        <div class="o-form__fluid">
                            <input title="" type="text" class="o-form__input o-form__input--text " placeholder="Bitte ausfüllen" aria-describedby="input-01" required>
                            <label class="o-form__label">E-Mail-Adresse<span class="required">*</span></label>
                        </div>
                        <span class="o-form__status o-form__status--warning">
          
        </span>
                        <span class="o-form__info" id="input-01">[object Object]</span>
                    </div>
                </div>
                <div class="cell medium-6">
                    <div class="o-form__field">
                        <div class="o-form__fluid">
                            <input title="" type="text" class="o-form__input o-form__input--text " placeholder="Bitte ausfüllen" aria-describedby="input-01" required>
                            <label class="o-form__label">Passwort<span class="required">*</span></label>
                        </div>
                        <span class="o-form__status o-form__status--warning">
          
        </span>
                        <span class="o-form__info" id="input-01">[object Object]</span>
                    </div>
                </div>
                <div class="cell medium-6">
                    <fieldset class="o-form__field">
                        <legend></legend>
                        <input class="o-form__input o-form__input--checkbox o-form__input--hidden" type="checkbox" value="stay_logged_in" id="stay_logged_in">
                        <label class="o-form__label o-form__label--checkbox" for="stay_logged_in">
            Angemeldet bleiben?</label>
                    </fieldset>
                </div>
                <div class="cell medium-6 medium-text-right">
                    <a class="c-button" href="#">
    Anmelden
</a>
                </div>
            </div>
        </div>
    </div>
</form>
 
<form class="o-form">
    <div class="o-paywall o-paywall--register">
        <div class="o-paywall__header">
            {% render '@badge--user' with { additionalClasses: 'c-badge--large c-badge--outline' } %}
        </div>
        <div class="o-paywall__body">
            <div class="grid-x grid-padding-y grid-padding-x">
                <div class="cell">
                    {% render '@heading--h3' with { text: 'Melden Sie sich an:', classes: "u-inline-block" } %}
                </div>
                <div class="cell medium-6">
                    {% render '@input' with {
                        label: 'E-Mail-Adresse',
                        input: {
                            id: 'email',
                            type: 'email',
                            required: true,
                            placeholder: 'E-Mail-Adresse',
                        },
                        description: {
                            text: '',
                        },
                    } %}
                </div>
                <div class="cell medium-6">
                    {% render '@input' with {
                        label: 'Passwort',
                        input: {
                            id: 'password',
                            type: 'password',
                            required: true,
                            placeholder: 'Passwort',
                        },
                        description: {
                            text: '',
                        },
                    } %}
                </div>
                <div class="cell medium-6">
                    {% render '@checkbox' with {
                        legend: '',
                        required: false,
                        items: [
                            {
                                label: 'Angemeldet bleiben?',
                                id: 'stay_logged_in',
                                value: 'stay_logged_in',
                            }
                        ],
                    } %}
                </div>
                <div class="cell medium-6 medium-text-right">
                    {% render '@button' with { text: 'Anmelden', type: 'submit' } %}
                </div>
            </div>
        </div>
    </div>
</form>
 
/* No context defined for this component. */

There are no notes for this item.