Front W - Pattern Library

Details list 

<details class="details">
      <summary class="details__summary">Hier ist eine Überschrift</summary>

      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>

  </details>
  <details class="details">
      <summary class="details__summary">Hier ist eine andere Überschrift</summary>

      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>

  </details>
  <details class="details">
      <summary class="details__summary">Hier ist eine dritte Überschrift</summary>

      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>

  </details>
 
{% for item in details %}
  {% include '@details' with {
    'summary': item.summary,
    'content': item.content,
  } %}
{% endfor %}
 
{
  "details": [
    {
      "summary": "Hier ist eine Überschrift",
      "content": "\n          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>\n          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>\n          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>\n        "
    },
    {
      "summary": "Hier ist eine andere Überschrift",
      "content": "\n          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>\n          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>\n          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>\n        "
    },
    {
      "summary": "Hier ist eine dritte Überschrift",
      "content": "\n          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>\n          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>\n          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempora dicta veniam, deleniti a sequi nemo. Corrupti ab pariatur voluptate quis voluptatum accusantium amet, quo maiores alias vel animi quasi.</p>\n        "
    }
  ]
}