--- /dev/null
+{#
+/**
+ * @file
+ * Theme override for a details element.
+ *
+ * Available variables
+ * - attributes: A list of HTML attributes for the details element.
+ * - errors: (optional) Any errors for this details element, may not be set.
+ * - title: (optional) The title of the element, may not be set.
+ * - description: (optional) The description of the element, may not be set.
+ * - children: (optional) The children of the element, may not be set.
+ * - value: (optional) The value of the element, may not be set.
+ *
+ * @see template_preprocess_details()
+ */
+#}
+{#
+ Prefix 'details' class to avoid collision with Modernizr.
+
+ @todo Remove prefix after https://www.drupal.org/node/2981732 has been solved.
+#}
+<details{{ attributes.addClass('seven-details') }}>
+ {%- if title -%}
+ {%
+ set summary_classes = [
+ 'seven-details__summary',
+ required ? 'js-form-required',
+ required ? 'form-required',
+ ]
+ %}
+ <summary{{ summary_attributes.addClass(summary_classes) }}>
+ {{- title -}}
+ </summary>
+ {%- endif -%}
+ <div class="seven-details__wrapper details-wrapper">
+ {% if errors %}
+ <div class="form-item form-item--error-message">
+ <strong>{{ errors }}</strong>
+ </div>
+ {% endif %}
+ {%- if description -%}
+ <div class="seven-details__description">{{ description }}</div>
+ {%- endif -%}
+ {%- if children -%}
+ {{ children }}
+ {%- endif -%}
+ {%- if value -%}
+ {{ value }}
+ {%- endif -%}
+ </div>
+</details>