1. Component Guide
  2. Accordion (experimental)
  3. Condensed layout
Accordion (experimental) example

Condensed layout

This is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.

How it looks (preview)

How to call this example

<%= render "govuk_publishing_components/components/accordion", {
  condensed: true,
  items: [
    {
      heading: {
        text: "Understanding agile project management"
      },
      content: {
        html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Agile and government services: an introduction</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Agile methods: an introduction</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Core principles of agile</a> </li> </ul>")
      }
    },
    {
      heading: {
        text: "Working with agile methods"
      },
      summary: {
        text: "Workspaces, tools and techniques, user stories, planning."
      },
      content: {
        html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Creating an agile working environment</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Agile tools and techniques</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Set up a team wall</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Writing user stories</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Planning in agile</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Deciding on priorities</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Developing a roadmap</a> </li> </ul>")
      }
    },
    {
      heading: {
        text: "Governing agile services"
      },
      content: {
        html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Governance principles for agile service delivery</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Measuring and reporting progress</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Spend controls: check if you need approval to spend money on a service</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Spend controls: apply for approval to spend money on a service</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Spend controls: the new pipeline process</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Working across organisational boundaries</a> </li> </ul>")
      }
    },
    {
      heading: {
        text: "Phases of an agile project"
      },
      content: {
        html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">How the discovery phase works</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">How the alpha phase works</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">How the beta phase works</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">How the live phase works</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Retiring your service</a> </li> </ul>")
      }
    }
  ]
} %>