Accordion

Accordions allow users to expand or reduce sections of content. They typically consist of multiple longer blocks of text, with header buttons to open and close each block.

Status
Released
Version

V2.0.2

Last updated

19 Sep 2019

Basic Accordion

With growing public and private investment focused on infrastructure and accelerating urban renewal, it is essential that innovative partnerships are utilised to maximise the environmental, social and economic returns of natural assets such as public and private green spaces, and waterways within cities.

By integrating nature based solutions into mainstream urban policy and planning, construction and maintenance, our society will not only realise the co-benefits of green infrastructure, but we will create liveable cities for the future.

The Internet of Things (IoT) is the logical end to the journey of two technologies: the internet and wireless communications. IoT enables every object in our everyday lives to be connected to the internet. It thereby enables the mass collection, exchange and analysis of data.

The clarity and insight offered via IoT enables better decision making and dynamic planning for complex issues, such as transport management, energy optimisation, green space and natural asset maintenance and the user experience of urban spaces.

Sustainable energy solutions

Urban growth and climate change are demanding innovation in the energy sector and the switch from fossil fuels to affordable, accessible, reliable and sustainable energy resources. The integration of renewable energies into urban environments can be constrained by an imbalance between demand and supply.

Solutions such as micro-grids, renewable energy integration, battery energy storage systems, electric vehicles and intelligent control all provide pathways for our future sustainable cities.

Guidelines

Accordions should be used sparingly, as they hide content from view. Avoid placing a page's core content in an accordion wherever possible. If you must use accordions, make sure their headings clearly indicate what content can be found in each one.

Accordions are only used in three column pages, that is, pages with a left-hand navigation and a right-hand column.

Use
  1. Minimum of 1 accordion
  2. Maximum of 8 accordions
  3. Heading - 70 character count recommended
  4. Description - No character limit
Do not use within an accordion
  1. Images
  2. Buttons
  3. Above a single body paragraph

Accordion Styles

Accordion

Smart Technologies

The Internet of Things (IoT) is the logical end to the journey of two technologies: the internet and wireless communications. IoT enables every object in our everyday lives to be connected to the internet. It thereby enables the mass collection, exchange and analysis of data.

  • Testing list items
  • List item 2
  • List item 3
    1. Ordered list item 1
      1. Ordered list within an ordered list
      2. Ordered list within an ordered list
    2. Ordered list item 2
  1. Ordered list item 1
    1. Ordered list within an ordered list
    2. Ordered list within an ordered list
      1. Ordered list within an ordered list within an ordered list
      2. Ordered list within an ordered list within an ordered list
  2. Ordered list item 2

The clarity and insight offered via IoT enables better decision making and dynamic planning for complex issues, such as transport management, energy optimisation, green space and natural asset maintenance and the user experience of urban spaces.

Firstname Surname
Firstname Surname
Firstname Surname

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum eget sem vitae mollis. Cras at faucibus dolor. Suspendisse potenti. Suspendisse laoreet sem eu dolor sollicitudin sodales. Mauris pharetra, nunc vel consequat pulvinar, lorem mauris auctor tellus, et consectetur lacus quam sit amet felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla vehicula neque in mauris bibendum sagittis. Sed consectetur nunc velit, posuere molestie tellus aliquam sit amet. Vivamus justo nibh, aliquet sit amet condimentum nec, faucibus non neque. Praesent condimentum quam a augue maximus, ut sagittis metus vehicula. Pellentesque quam elit, blandit id viverra sit amet, elementum id risus. Suspendisse eu mi venenatis, finibus dolor at, ornare felis. Aenean ut orci cursus leo placerat fringilla. Pellentesque aliquet massa lorem, sed gravida nisi ultrices ac. In commodo metus vitae eros lobortis rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Phasellus porttitor posuere turpis, at euismod nunc consectetur in. Duis sit amet mi lobortis orci aliquam porttitor et vitae turpis. Curabitur gravida viverra varius. Nunc purus lectus, pretium id ullamcorper sit amet, tincidunt ut ipsum. Nunc iaculis orci eros, quis lobortis velit aliquam ut. Aenean sit amet lobortis dolor. Nullam quis nulla at lectus auctor sagittis. Sed id dictum odio, sed sodales ex. Mauris placerat metus nec quam semper laoreet. Donec eget turpis nulla. Maecenas malesuada lectus elit, at efficitur ante semper vel. Suspendisse vel est eu ante ultrices rutrum. Integer fermentum sem sit amet tellus tincidunt, eget laoreet leo faucibus. Quisque sit amet ante at felis pharetra eleifend.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum eget sem vitae mollis. Cras at faucibus dolor. Suspendisse potenti. Suspendisse laoreet sem eu dolor sollicitudin sodales. Mauris pharetra, nunc vel consequat pulvinar, lorem mauris auctor tellus, et consectetur lacus quam sit amet felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla vehicula neque in mauris bibendum sagittis. Sed consectetur nunc velit, posuere molestie tellus aliquam sit amet. Vivamus justo nibh, aliquet sit amet condimentum nec, faucibus non neque. Praesent condimentum quam a augue maximus, ut sagittis metus vehicula. Pellentesque quam elit, blandit id viverra sit amet, elementum id risus. Suspendisse eu mi venenatis, finibus dolor at, ornare felis. Aenean ut orci cursus leo placerat fringilla. Pellentesque aliquet massa lorem, sed gravida nisi ultrices ac. In commodo metus vitae eros lobortis rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Phasellus porttitor posuere turpis, at euismod nunc consectetur in. Duis sit amet mi lobortis orci aliquam porttitor et vitae turpis. Curabitur gravida viverra varius. Nunc purus lectus, pretium id ullamcorper sit amet, tincidunt ut ipsum. Nunc iaculis orci eros, quis lobortis velit aliquam ut. Aenean sit amet lobortis dolor. Nullam quis nulla at lectus auctor sagittis. Sed id dictum odio, sed sodales ex. Mauris placerat metus nec quam semper laoreet. Donec eget turpis nulla. Maecenas malesuada lectus elit, at efficitur ante semper vel. Suspendisse vel est eu ante ultrices rutrum. Integer fermentum sem sit amet tellus tincidunt, eget laoreet leo faucibus. Quisque sit amet ante at felis pharetra eleifend. 

                        <div class="accordion">
                            <div class="accordion__item">
                                <div class="accordion__heading" id="#ACCORDION-ITEM-ID" role="button" aria-expanded="false" aria-controls="#ACCORDION-ITEM-SECTION-ID" tabindex="0">
                                    <h2 class="h5">Smart Technologies</h2>
                                    <i class="icon icon--plusminus"></i>
                                </div>
                                <div class="accordion__body" id="#ACCORDION-ITEM-SECTION-ID" role="region" aria-labelledby="#ACCORDION-ITEM-ID" tabindex="-1">
                                    <p>The Internet of Things (IoT) is the logical end to the journey of two technologies:  the internet and wireless communications.  IoT enables every object in our everyday lives to be connected to the internet. It thereby enables the mass collection, exchange and analysis of data.</p>
                                    <p>The clarity and insight offered via IoT enables better decision making and dynamic planning for complex issues, such as transport management, energy optimisation, green space and natural asset maintenance and the user experience of urban spaces.</p>
                                </div>
                            </div>
                        </div>