Elements
#
Forms
#
Radio {% include 'elements/forms/radio' %}
#
HTML
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioa1" name="radioa" type="radio" checked="checked" />
                <label class="field-set__label field-set__label--radio" for="radioa1">Visa (debit)</label>
            </div>
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioa2" name="radioa" type="radio" />
                <label class="field-set__label field-set__label--radio" for="radioa2">Visa (credit)</label>
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioa1" name="radioa" type="radio" checked="checked" />
                <label class="field-set__label field-set__label--radio" for="radioa1">{{values.1}}</label>
            </div>
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioa2" name="radioa" type="radio" />
                <label class="field-set__label field-set__label--radio" for="radioa2">{{values.2}}</label>
            </div>
        </div>
    </div>
</div>
{
    "values": {
        "1": "Visa (debit)",
        "2": "Visa (credit)"
    }
}
Disclaimer {% include 'elements/forms/disclaimer' %}
#
HTML
<div class="form__disclaimer">
    <div class="article-inner">
        <p><em>We’d love to occasionally contact you using your email address. We will share updates on our latest campaigns and ways that you can take action. Of course, you can change your preferences at any time – just email info@tearfund.org or call 0208 977 9144. We promise never to pass your details on to another organisation for marketing purposes.</em></p>
    </div>
</div>
Twig
<div class="form__disclaimer">
    <div class="article-inner">
        <p><em>{{ disclaimer }}</em></p>
    </div>
</div>
{
    "disclaimer": "We\u2019d love to occasionally contact you using your email address. We will share updates on our latest campaigns and ways that you can take action. Of course, you can change your preferences at any time \u2013 just email info@tearfund.org or call 0208 977 9144. We promise never to pass your details on to another organisation for marketing purposes."
}

We’d love to occasionally contact you using your email address. We will share updates on our latest campaigns and ways that you can take action. Of course, you can change your preferences at any time – just email info@tearfund.org or call 0208 977 9144. We promise never to pass your details on to another organisation for marketing purposes.

Input Button {% include 'elements/forms/input-button' %}
#
HTML
<div class="field-set">
    <label class="field-set__title" for="text">Address</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item form-small-col-8 form-large-col-10 field-set__item--pad-right">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
            <div class="field-set__item form-small-col-4 form-large-col-2">
                <input type="submit" value="Find" class="secondary-button">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <label class="field-set__title" for="text">{{ label }}</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item form-small-col-8 form-large-col-10 field-set__item--pad-right">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
            <div class="field-set__item form-small-col-4 form-large-col-2">
                <input type="submit" value="{{button}}" class="secondary-button">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Address",
    "button": "Find"
}
Input {% include 'elements/forms/input' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Text Input</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Text Input"
}
Merged Fields Three {% include 'elements/forms/merged-fields~three' %}
#
HTML
<div class="field-set field-set--merged">
    <span class="field-set__title" for="postcode">Text Field</span> 
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item form-large-col-4">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
            <div class="field-set__item form-large-col-4">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
            <div class="field-set__item form-large-col-4">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set field-set--merged">
    <span class="field-set__title" for="postcode">{{ merged_field_label }}</span>

    <div class="field-set__content">
        <div class="field-set__items">
            
            {% for field in merged_fields %}
                <div class="field-set__item form-large-col-{{ merge_fields_col }}">
                    <label class="field-set__label">Text Field</label>
                    <input class="field-set__input" type="text">
                </div>
            {% endfor %}

        </div>
    </div>
</div>
{
    "merged_field_label": "Text Field",
    "merge_fields_col": 4,
    "merged_fields": {
        "0": {
            "label": "Text Field"
        },
        "1": {
            "label": "Text Field"
        },
        "2": {
            "label": "Text Field"
        }
    }
}
Text Field
Checkbox {% include 'elements/forms/checkbox' %}
#
HTML
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--checkbox default-style" id="checkbox1" name="checkbox" type="checkbox" />
                <label class="field-set__label field-set__label--checkbox" for="checkbox1"><span class="field-set__label-text">This is a really long choice that could be used as a confirmation</span></label>
            </div>
            <div class="field-set__item">
                <input class="field-set__input field-set__input--checkbox default-style" id="checkbox2" name="checkbox" type="checkbox" />
                <label class="field-set__label field-set__label--checkbox" for="checkbox2"><span class="field-set__label-text">Choice B</span></label>
            </div>
            <div class="field-set__item">
                <input class="field-set__input field-set__input--checkbox default-style" id="checkbox3" name="checkbox" type="checkbox" />
                <label class="field-set__label field-set__label--checkbox" for="checkbox3"><span class="field-set__label-text">Choice C</span></label>
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            {% for value in values %}
                <div class="field-set__item">
                    <input class="field-set__input field-set__input--checkbox default-style" id="checkbox{{loop.index}}" name="checkbox" type="checkbox" />
                    <label class="field-set__label field-set__label--checkbox" for="checkbox{{loop.index}}"><span class="field-set__label-text">{{value}}</span></label>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{
    "label": "Title",
    "values": {
        "1": "This is a really long choice that could be used as a confirmation",
        "2": "Choice B",
        "3": "Choice C"
    }
}
Merged Fields {% include 'elements/forms/merged-fields' %}
#
HTML
<div class="field-set field-set--merged">
    <span class="field-set__title" for="postcode">Text Field</span> 
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item form-large-col-6">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
            <div class="field-set__item form-large-col-6">
                <label class="field-set__label">Text Field</label>
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set field-set--merged">
    <span class="field-set__title" for="postcode">{{ merged_field_label }}</span>

    <div class="field-set__content">
        <div class="field-set__items">
            
            {% for field in merged_fields %}
                <div class="field-set__item form-large-col-{{ merge_fields_col }}">
                    <label class="field-set__label">Text Field</label>
                    <input class="field-set__input" type="text">
                </div>
            {% endfor %}

        </div>
    </div>
</div>
{
    "merged_field_label": "Text Field",
    "merge_fields_col": 6,
    "merged_fields": {
        "0": {
            "label": "Text Field"
        },
        "1": {
            "label": "Text Field"
        }
    }
}
Text Field
Input Error {% include 'elements/forms/input~error' %}
#
HTML
<div class="field-set field-set--error">
    <label class="field-set__title" for="text">Email Input</label>
    <span class="error-message">Please enter a valid email address</span> 
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item field-set__item--error">
                <span class="field-set__label">you@yourdomain.com</span> 
                <input class="field-set__input" type="email">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "email",
    "placeholder": "you@yourdomain.com",
    "label": "Email Input",
    "error": "Please enter a valid email address"
}
Please enter a valid email address
you@yourdomain.com
Payment Type {% include 'elements/forms/payment-type' %}
#
HTML
<div class="field-set">
    <div class="field-set__content">
        <div class="col-wrapper">
            <div class="field-set__items">
                <div class="payment-types">
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc1" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc1">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Mastercard (debit)
                            </label>
                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc2" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc2">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Mastercard (credit)
                            </label>
                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc3" name="radioc" type="radio" checked="checked" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc3">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Visa (debit)
                            </label>
                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc4" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc4">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Visa (credit)
                            </label>
                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc5" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc5">
                                <img class="payment-types__icon" src="http://placehold.it/45x30" />
                                Paypal
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__content">
        <div class="col-wrapper">
            <div class="field-set__items">
                <div class="payment-types">
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc1" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc1"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.1}}</label>

                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc2" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc2"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.2}}</label>

                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc3" name="radioc" type="radio" checked="checked" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc3"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.3}}</label>

                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc4" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc4"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.4}}</label>

                        </div>
                    </div>
                    <div class="small-col-6 large-col-fifth">
                        <div class="field-set__item payment-types__item">
                            <input class="field-set__input field-set__input--radio" id="radioc5" name="radioc" type="radio" />
                            <label class="field-set__label field-set__label--radio payment-types__label" for="radioc5"><img class="payment-types__icon" src="http://placehold.it/45x30" />{{payment.5}}</label>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{
    "payment": {
        "1": "Mastercard (debit)",
        "2": "Mastercard (credit)",
        "3": "Visa (debit)",
        "4": "Visa (credit)",
        "5": "Paypal"
    }
}
Input Email {% include 'elements/forms/input~email' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Text Input</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Text Input"
}
Tabbed Radio {% include 'elements/forms/tabbed-radio' %}
#
HTML
<div class="field-set field-set--tabbed-radio">
    <span class="field-set__title">Direct Debit instruction is</span>

    <div class="field-set__content">
        <div class="field-set__items">
            <div class="form-large-col-4">
                <div class="field-set__item">
                    <input class="field-set__input field-set__input--radio" id="radioe1" name="radioe" type="radio" checked="checked" />
                    <label class="field-set__label field-set__label--radio" for="radioe1">New</label>
                </div>
            </div>
            <div class="form-large-col-4">
                <div class="field-set__item">
                    <input class="field-set__input field-set__input--radio" id="radioe2" name="radioe" type="radio" />
                    <label class="field-set__label field-set__label--radio" for="radioe2">Add to existing</label>
                </div>
            </div>
            <div class="form-large-col-4">
                <div class="field-set__item">
                    <input class="field-set__input field-set__input--radio" id="radioe3" name="radioe" type="radio" />
                    <label class="field-set__label field-set__label--radio" for="radioe3">Replace existing</label>
                </div>
            </div>
        </div>
    </div>
Twig
<div class="field-set field-set--tabbed-radio">
<span class="field-set__title">{{label}}</span>
<div class="field-set__content">
    <div class="field-set__items">
        <div class="form-large-col-4">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioe1" name="radioe" type="radio" checked="checked" />
                <label class="field-set__label field-set__label--radio" for="radioe1">{{values.1}}</label>
            </div>
        </div>
        <div class="form-large-col-4">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioe2" name="radioe" type="radio" />
                <label class="field-set__label field-set__label--radio" for="radioe2">{{values.2}}</label>
            </div>
        </div>
        <div class="form-large-col-4">
            <div class="field-set__item">
                <input class="field-set__input field-set__input--radio" id="radioe3" name="radioe" type="radio" />
                <label class="field-set__label field-set__label--radio" for="radioe3">{{values.3}}</label>
            </div>
        </div>
    </div>
</div>
{
    "label": "Direct Debit instruction is",
    "values": {
        "1": "New",
        "2": "Add to existing",
        "3": "Replace existing"
    }
}
Direct Debit instruction is
Input With Limiter {% include 'elements/forms/input-with-limiter' %}
#
HTML
<div class="field-set">
    <div class="field-set__item">
        <div class="field-set__item field-set__input-limit-item form-large-col-12">
            <label class="field-set__label">Text Input</label>
            <input class="field-set__input field-set__input-limit" data-limit="50" type="textarea" />
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__item">
        <div class="field-set__item field-set__input-limit-item form-large-col-12">
            <label class="field-set__label">{{label}}</label>
            <input class="field-set__input field-set__input-limit" data-limit="{{limit}}" type="{{type}}" />
        </div>
    </div>
</div>
{
    "type": "textarea",
    "placeholder": "",
    "label": "Text Input",
    "limit": 50
}
Select {% include 'elements/forms/select' %}
#
HTML
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item field-set__item--select">
                <!-- Multi field so this is a label - it will be visibly hidden though -->
                <label class="field-set__label field-set__label--select">Title</label>
                <div class="field-set__input field-set__input--select">
                    <div class="custom-select">
                        <span class="custom-select__selected-value"></span> 
                        <select class="custom-select__input" id="your-role" name="selecta2">
                            <option value="mr">Mr</option>
                            <option value="miss">Miss</option>
                            <option value="mrs">Mrs</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set">
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item field-set__item--select">
                <!-- Multi field so this is a label - it will be visibly hidden though -->
                <label class="field-set__label field-set__label--select">{{label}}</label>
                <div class="field-set__input field-set__input--select">
                    <div class="custom-select">
                        <span class="custom-select__selected-value"></span>
                        <select class="custom-select__input" id="your-role" name="selecta2">
                            <option value="mr">{{values.1}}</option>
                            <option value="miss">{{values.2}}</option>
                            <option value="mrs">{{values.3}}</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{
    "label": "Title",
    "values": {
        "1": "Mr",
        "2": "Miss",
        "3": "Mrs"
    }
}
Input Tooltip {% include 'elements/forms/input~tooltip' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Text Input</label>
    <div class="field-set__content">
        <div class="tooltip">
            <span class="tooltip__button">?</span> 
            <div class="tooltip__content" style="display: none;">Tooltip text</div>
        </div>
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Text Input",
    "tooltip": "Tooltip text"
}
?
Input Date {% include 'elements/forms/input-date' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Date</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label">Select Date</span> 
                <input class="field-set__input field-set__input-date" value="15-8-2018" data-min-date="15.8.2018" data-max-date="15.10.2018" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input field-set__input-date" value="{{ default_date }}" data-min-date="15.8.2018" data-max-date="15.10.2018" type="{{ type }}">
            </div>
        </div>
    </div>
</div>  
{
    "type": "text",
    "placeholder": "Select Date",
    "label": "Date",
    "default_date": "15-8-2018"
}
Select Date
Input Datetime {% include 'elements/forms/input-datetime' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Date</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label">Select Date</span> 
                <input class="field-set__input field-set__input-datetime" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input field-set__input-datetime" type="{{ type }}">
            </div>
        </div>
    </div>
</div>  
{
    "type": "text",
    "placeholder": "Select Date",
    "label": "Date"
}
Select Date
Input Time {% include 'elements/forms/input-time' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Time</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item ">
                <span class="field-set__label">Select Time</span> 
                <input class="field-set__input field-set__input-time" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input field-set__input-time" type="{{ type }}">
            </div>
        </div>
    </div>
</div>  
{
    "type": "text",
    "placeholder": "Select Time",
    "label": "Time"
}
Select Time
Input Sortcode {% include 'elements/forms/input-sortcode' %}
#
HTML
<div class="field-set ">
    <label class="field-set__title" for="text">Sort code</label>
    <div class="field-set__content">
        <div class="field-set__items">
            <div class="field-set__item field-set__item--sort-code ">
                <span class="field-set__label"></span> 
                <input class="field-set__input" type="text">
            </div>
        </div>
    </div>
</div>
Twig
<div class="field-set {% if error %} field-set--error{% endif %}">
    <label class="field-set__title" for="text">{{ label }}</label>
    {% if error %}<span class="error-message">{{error}}</span>{% endif %}
    <div class="field-set__content">
        {% if tooltip %}
            <div class="tooltip">
                <span class="tooltip__button">?</span>
                <div class="tooltip__content" style="display: none;">{{ tooltip }}</div>
            </div>
        {% endif %}
        <div class="field-set__items">
            <div class="field-set__item field-set__item--sort-code {% if error %} field-set__item--error{% endif %}">
                <span class="field-set__label">{{ placeholder }}</span>
                <input class="field-set__input" type="{{ type }}">
            </div>
        </div>
    </div>
</div>
{
    "type": "text",
    "placeholder": "",
    "label": "Sort code"
}
Toggle {% include 'elements/forms/toggle' %}
#
HTML
<div class="inner">
    <div class="field-set">
        <div class="field-set__content">
            <div class="field-set__items">
                <div class="field-set__item">
                    <label class="field-set__label field-set__label--toggle">
                        <h4>
                            Tearfund action emails
                        </h4>
                        Join us and find out more about how you can put your faith into action to see His Kingdom come. 
                    </label>
                    <div class="field-set__item--switch">
                        <input class="field-set__input field-set__input--switch" id="checkboxa" name="checkbox" type="checkbox" checked="checked" />
                        <span class="field-set__switch-slider"></span> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Twig
<div class="inner">
    <div class="field-set">
        <div class="field-set__content">
            <div class="field-set__items">
                <div class="field-set__item">
                    <label class="field-set__label field-set__label--toggle">
                        <h4>Tearfund action emails</h4>
                        Join us and find out more about how you can put your faith into action to see His Kingdom come.
                    </label>
                    <div class="field-set__item--switch">
                        <input class="field-set__input field-set__input--switch" id="checkboxa" name="checkbox" type="checkbox" checked="checked" />
                        <span class="field-set__switch-slider"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{}
Scaffolding
#
Columns {% include 'elements/scaffolding/columns' %}
#
HTML
<div class="inner clearfix patternlab-grid-display">
    <div class="large-col-12">One column</div>
    <div class="large-col-6">Two columns</div>
    <div class="large-col-6">Two columns</div>
    <div class="large-col-4">Three columns</div>
    <div class="large-col-4">Three columns</div>
    <div class="large-col-4">Three columns</div>
    <div class="large-col-3">Four columns</div>
    <div class="large-col-3">Four columns</div>
    <div class="large-col-3">Four columns</div>
    <div class="large-col-3">Four columns</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
    <div class="large-col-1">1</div>
</div>
Twig
<div class="inner clearfix patternlab-grid-display">
	<div class="large-col-12">One column</div>
	<div class="large-col-6">Two columns</div>
	<div class="large-col-6">Two columns</div>
	<div class="large-col-4">Three columns</div>
	<div class="large-col-4">Three columns</div>
	<div class="large-col-4">Three columns</div>
	<div class="large-col-3">Four columns</div>
	<div class="large-col-3">Four columns</div>
	<div class="large-col-3">Four columns</div>
	<div class="large-col-3">Four columns</div>

	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>
	<div class="large-col-1">1</div>


</div>
{
    "row": {
        "1": {
            "span": "6"
        },
        "2": {
            "span": "6"
        }
    }
}
One column
Two columns
Two columns
Three columns
Three columns
Three columns
Four columns
Four columns
Four columns
Four columns
1
1
1
1
1
1
1
1
1
1
1
1
Colours
#
Tints {% include 'elements/colours/tints' %}
#
HTML
<div class="pl-color pl-color-green-tint-100">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-90">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-80">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-70">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-60">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-50">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-40">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-30">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-20">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-10">
    <div class="pl-color-swatch"></div>
</div>
Twig
<div class="pl-color pl-color-green-tint-100">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-90">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-80">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-70">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-60">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-50">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-40">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-30">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-20">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-tint-10">
	<div class="pl-color-swatch"></div>
</div>
{}
Greys {% include 'elements/colours/greys' %}
#
HTML
<div class="pl-color pl-color-dark-grey">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-mid-grey">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-light-grey">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-footer-grey">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-border-grey">
    <div class="pl-color-swatch"></div>
</div>
Twig
<div class="pl-color pl-color-dark-grey">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-mid-grey">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-light-grey">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-footer-grey">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-border-grey">
	<div class="pl-color-swatch"></div>
</div>
{}
Brand {% include 'elements/colours/brand' %}
#
HTML
<div class="pl-color pl-color-green-primary">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-secondary">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-yellow-primary">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-yellow-secondary">
    <div class="pl-color-swatch"></div>
</div>
Twig
<div class="pl-color pl-color-green-primary">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-green-secondary">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-yellow-primary">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-yellow-secondary">
	<div class="pl-color-swatch"></div>
</div>
{}
Secondary {% include 'elements/colours/secondary' %}
#
HTML
<div class="pl-color pl-color-brand-green">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-red">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-turquoise">
    <div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-orange">
    <div class="pl-color-swatch"></div>
</div>
Twig
<div class="pl-color pl-color-brand-green">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-red">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-turquoise">
	<div class="pl-color-swatch"></div>
</div>
<div class="pl-color pl-color-brand-orange">
	<div class="pl-color-swatch"></div>
</div>
{}
Headings
#
H2 {% include 'elements/headings/h2' %}
#
HTML
<h2>
    Lorem ipsum dolor sit amet consectetur
</h2>
Twig
<h2>{{title}}</h2>
{
    "title": "Lorem ipsum dolor sit amet consectetur"
}

Lorem ipsum dolor sit amet consectetur

H5 {% include 'elements/headings/h5' %}
#
HTML
<h5>
    Lorem ipsum dolor sit amet consectetur
</h5>
Twig
<h5>{{title}}</h5>
{
    "title": "Lorem ipsum dolor sit amet consectetur"
}
Lorem ipsum dolor sit amet consectetur
H4 {% include 'elements/headings/h4' %}
#
HTML
<h4>
    Lorem ipsum dolor sit amet consectetur
</h4>
Twig
<h4>{{title}}</h4>
{
    "title": "Lorem ipsum dolor sit amet consectetur"
}

Lorem ipsum dolor sit amet consectetur

H3 {% include 'elements/headings/h3' %}
#
HTML
<h3>
    Lorem ipsum dolor sit amet consectetur
</h3>
Twig
<h3>{{title}}</h3>
{
    "title": "Lorem ipsum dolor sit amet consectetur"
}

Lorem ipsum dolor sit amet consectetur

H6 {% include 'elements/headings/h6' %}
#
HTML
<h6>
    Lorem ipsum dolor sit amet consectetur
</h6>
Twig
<h6>{{title}}</h6>
{
    "title": "Lorem ipsum dolor sit amet consectetur"
}
Lorem ipsum dolor sit amet consectetur
H1 {% include 'elements/headings/h1' %}
#
HTML
<h1 class=" ">
    Lorem ipsum dolor sit amet consectetur
</h1>
Twig
<h1 class="{% if center %}center-text{% endif %} {% if underline %}heading-underline{% endif %}">{{title}}</h1>
{
    "title": "Lorem ipsum dolor sit amet consectetur"
}

Lorem ipsum dolor sit amet consectetur

H1 Underline {% include 'elements/headings/h1~underline' %}
#
HTML
<h1 class="center-text heading-underline">
    Lorem ipsum dolor sit amet consectetur
</h1>
Twig
<h1 class="{% if center %}center-text{% endif %} {% if underline %}heading-underline{% endif %}">{{title}}</h1>
{
    "title": "Lorem ipsum dolor sit amet consectetur",
    "underline": true,
    "center": true
}

Lorem ipsum dolor sit amet consectetur

H1 Centered {% include 'elements/headings/h1~centered' %}
#
HTML
<h1 class="center-text ">
    Lorem ipsum dolor sit amet consectetur
</h1>
Twig
<h1 class="{% if center %}center-text{% endif %} {% if underline %}heading-underline{% endif %}">{{title}}</h1>
{
    "title": "Lorem ipsum dolor sit amet consectetur",
    "center": true
}

Lorem ipsum dolor sit amet consectetur

Text
#
Strong {% include 'elements/text/strong' %}
#
HTML
<strong>Strong is used to indicate strong importance</strong>
Twig
<strong>{{ text }}</strong>
{
    "text": "Strong is used to indicate strong importance"
}
Strong is used to indicate strong importance
Italic {% include 'elements/text/italic' %}
#
HTML
The <i>i element</i> is text that is set off from the normal text
Twig
The <i>i element</i> is text that is set off from the normal text
{}
The i element is text that is set off from the normal text
Link {% include 'elements/text/link' %}
#
HTML
<a href="#">Link text</a>
Twig
<a href="#">{{ text }}</a>
{
    "text": "Link text"
}
Bold {% include 'elements/text/bold' %}
#
HTML
The <b>b element</b> is stylistically different text from normal text, without any special importance
Twig
The <b>b element</b> is stylistically different text from normal text, without any special importance
{}
The b element is stylistically different text from normal text, without any special importance
Horizontal Line
#
Horizontal Line {% include 'elements/horizontal-line/horizontal-line' %}
#

Used as a divider between content.

HTML
<div class="hr"></div>
Twig
<div class="hr"></div>
{}