webform-composite-contact.html.twig in Webform 6.x

Default theme implementation of a contact composite webform element.

Available variables:

• content: The contact webform element to be output.
• flexbox: Determines if Flexbox layout should be applied to the composite element.

See also

template_preprocess_webform_composite_contact()

1 theme call to webform-composite-contact.html.twig

WebformContact::getInfo in src/Element/WebformContact.php

Returns the element properties for this element.

File

templates/webform-composite-contact.html.twig

{#
/**
 * @file
 * Default theme implementation of a contact composite webform element.
 *
 * Available variables:
 * - content: The contact webform element to be output.
 * - flexbox: Determines if Flexbox layout should be applied to the composite
 *   element.
 *
 * @see template_preprocess_webform_composite_contact()
 *
 * @ingroup themeable
 */
#}
{% if flexbox %}
<div class="webform-contact">
  {% if content.name or content.company %}
    <div class="webform-flexbox webform-contact__row-1">
      {% if content.name %}
        <div class="webform-flex webform-flex--1 webform-address__name"><div class="webform-flex--container">{{ content.name }}</div></div>
      {% endif %}
      {% if content.company %}
        <div class="webform-flex webform-flex--1 webform-address__company"><div class="webform-flex--container">{{ content.company }}</div></div>
      {% endif %}
    </div>
  {% endif %}

  {% if content.email or content.phone %}
    <div class="webform-flexbox webform-contact__row-2">
      {% if content.email %}
        <div class="webform-flex webform-flex--1 webform-address__email"><div class="webform-flex--container">{{ content.email }}</div></div>
      {% endif %}
      {% if content.phone %}
        <div class="webform-flex webform-flex--1 webform-address__phone"><div class="webform-flex--container">{{ content.phone }}</div></div>
      {% endif %}
    </div>
  {% endif %}

  {% if content.address %}
    <div class="webform-flexbox webform-contact__row-3">
      <div class="webform-flex webform-flex--1 webform-address__address"><div class="webform-flex--container">{{ content.address }}</div></div>
    </div>
  {% endif %}

  {% if content.address_2 %}
    <div class="webform-flexbox webform-contact__row-4">
      <div class="webform-flex webform-flex--1 webform-address__address-2"><div class="webform-flex--container">{{ content.address_2 }}</div></div>
    </div>
  {% endif %}

  {% if content.city or content.state_province or content.postal_code %}
    <div class="webform-flexbox webform-contact__row-5">
      {% if content.city %}
        <div class="webform-flex webform-flex--1 webform-address__city"><div class="webform-flex--container">{{ content.city }}</div></div>
      {% endif %}
      {% if content.state_province %}
        <div class="webform-flex webform-flex--1 webform-address__province"><div class="webform-flex--container">{{ content.state_province }}</div></div>
      {% endif %}
      {% if content.postal_code %}
        <div class="webform-flex webform-flex--1 webform-address__postal-code"><div class="webform-flex--container">{{ content.postal_code }}</div></div>
      {% endif %}
    </div>
  {% endif %}

  {% if content.country %}
    <div class="webform-flexbox webform-contact__row-6">
      <div class="webform-flex webform-flex--1 webform-address__country"><div class="webform-flex--container">{{ content.country }}</div></div>
    </div>
  {% endif %}
</div>
{% else %}
  {{ content }}
{% endif %}