GDL - Global Design Language

Action: action -- wide 

<label class="u-label-04 u-color-base" for="">Form input action</label>

<div class="u-relative">
    <input class="u-size-full   c-form-size--wide  " type="text" placeholder="Placeholder text">
    <button class="c-form-action c-btn c-btn--reset u-absolute u-cursor-pointer" type="submit">

        <svg class="c-form-icon o-icon o-icon--md">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
        </svg>

    </button>
</div>

<span class="c-form-helper">Text</span>
 
{% if label %}
<label class="{% if small %}u-label-03{% else %}u-label-04{% endif %} u-color-base" for="">{{label}}</label>
{% endif %}

<div class="u-relative">
  <input class="u-size-full {% if small %}c-form-size--small{% endif %} {% if wide %} c-form-size--wide {% endif %} {% if status=='error' %} c-form-input--error {% elif status=='success' %} c-form-input--success {% elif subject %} c-form-input--subject {% endif %}" type="text" placeholder="{{placeholder}}" {% if disabled %}disabled{% endif %}>
  <button class="c-form-action c-btn c-btn--reset u-absolute u-cursor-pointer" type="submit">
    {% if textaction %}
      {{ textaction }}
    {% elif action %}
      <svg class="c-form-icon o-icon {% if small %}o-icon--sm{% else %}o-icon--md{% endif %}">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-{{action}}"></use>
      </svg>
    {% endif %}
  </button>
</div>

{% if helper %}
  <span class="c-form-helper" >{{helper}}</span>
{% endif %}

{% if status=='error' %}
  <svg class="o-icon {% if small %}o-icon--sm{% else %}o-icon--md{% endif %} u-absolute c-form-icon c-form-icon--left">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-alert-triangle"></use>
  </svg>
{% endif %}
 
{
  "helper": "Text",
  "action": "search",
  "placeholder": "Placeholder text",
  "label": "Form input action",
  "wide": true,
  "modifier": "primary"
}

No notes defined.