<article class="card card--faq card--faq card--reversed" aria-labelledby="card-heading">
    <div class="card-inner">
        <div class="card-media">

            <div class="image image--decorated">
                <div class="image-inner">
                    <span style="padding-bottom: 104.16666666666667%;" class="image-placeholder" data-img-attr='{"src":"/temp/faq-card.jpg","alt":"","srcset":"/temp/faq-card.jpg 1x,/temp/faq-card@2x.jpg 2x","data-object-fit":"cover","data-object-position":"center center"}'></span>
                    <noscript><img src="/temp/faq-card.jpg" alt="" srcset="/temp/faq-card.jpg 1x,/temp/faq-card@2x.jpg 2x" data-object-fit="cover" data-object-position="center center"></noscript>
                </div>
            </div>
        </div>

        <div class="card-content">
            <div class="card-content-inner">
                <header class="card-header">
                    <h2 id="card-heading" class="heading heading--secondary card-heading">Kom godt i gang med en ladeboks derhjemme</h2>
                </header>

                <div class="child-components">

                    <div class="accordion js-accordion">
                        <h3 class="heading heading--small accordion-heading">Installation af ladeboksen</h3>
                        <p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>
                        <h3 class="heading heading--small accordion-heading">Lad op derhjemme</h3>
                        <p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>
                        <h3 class="heading heading--small accordion-heading">Få 24/7 support</h3>
                        <p>There's two paragraphs here.</p>
                        <p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</article>
{% include '@card' with { cardModifiers: ['faq']|merge(cardModifiers|default([])) } %}
{
  "cardModifiers": [
    "faq",
    "reversed"
  ],
  "cardMedia": {
    "type": "image",
    "content": {
      "url": "/temp/faq-card.jpg",
      "width": 672,
      "height": 700,
      "lazyload": true,
      "retina": true,
      "sizes": [
        {
          "url": "/temp/faq-card.jpg"
        },
        {
          "url": "/temp/faq-card@2x.jpg"
        }
      ],
      "classes": [
        "image--decorated"
      ]
    }
  },
  "cardHeading": "Kom godt i gang med en ladeboks derhjemme",
  "childComponents": [
    {
      "type": "accordion",
      "content": {
        "accordionPanels": [
          {
            "heading": "Installation af ladeboksen",
            "body": "<p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>"
          },
          {
            "heading": "Lad op derhjemme",
            "body": "<p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>"
          },
          {
            "heading": "Få 24/7 support",
            "body": "<p>There's two paragraphs here.</p><p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>"
          }
        ]
      }
    }
  ]
}

FAQ Card: Default

Version 2

  • A card-component used with accordion-component
  • Unlimited accordion items