{% extends "home-office-kit-layout.html" %}

{% block homeOfficeKit_style %}
<!-- Add css to apply just to this page. For example:
.my-style {
  color: red;
}
The <style> tage is already included. -->
{% endblock %}

{% block content %}
<!-- Add your page content here -->
<h1 class="govuk-heading-l">Accordion</h1>
<p class="govuk-body">This accordion should only be used in prototypes. It is not production code.</p>
<p class="govuk-body">It looks like the GOV.UK frontend Accordion v3.14, but works with future version of GOV.UK frontend.</p>
<p class="govuk-body">It allows designers to use the up to date GOV.UK prototype kit, with an older visual style of the accordion (which their service may still be using).</p>

{{ homeOfficeKitLegacyAccordion({
  id: "accordion-default",
  items: [
    {
      heading: {
        text: "Writing well for the web"
      },
      content: {
        html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
      }
    },
    {
      heading: {
        text: "Writing well for specialists"
      },
      content: {
        html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
      }
    },
    {
      heading: {
        text: "Know your audience"
      },
      content: {
        html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
      }
    },
    {
      heading: {
        text: "How people read"
      },
      content: {
        html: "<p class='govuk-body'>This is the content for How people read.</p>"
      }
    }
  ]
 })}}

{% endblock %}