Accordions
Accordions have multiple variations such as large, small, first item initially expanded and steps within the heading of the accordion. Accordions are used to break up large sections of content into more readable drop down revealable sections of content.
If you have one accordion item on a page the 'Open All' option will not display.
Each .c-accordions__item should have a unique ID to ensure users can link to a particular accordion item. A suggested method would be to use the text within the accordion heading as the ID.
Accordion requires a JavaScript plugin which is documented within the JavaScript section of the style guide.
JavaScript class: .js-accordion
Link 1 - Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
- This is item 1
- This is item 2
- This is item 3
- This is item 4
- This is item 5
- This is item 6
- This is item 7
Link 2 - Heading 3. This Is A Heading With A Really Long Title. Two Line Testing for When People Decide To Have A Really Long Heading.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Link 3 - Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Link 4 - Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Link 5 - Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Link 1 - Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
- This is item 1
- This is item 2
- This is item 3
- This is item 4
- This is item 5
- This is item 6
- This is item 7
Link 2 - Heading 3. This Is A Heading With A Really Long Title. Two Line Testing for When People Decide To Have A Really Long Heading.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Link 3 - Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Link 4 - Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Link 5 - Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
<div class="c-accordions [modifier class] js-accordion">
<section class="c-accordions__item is-active" id="accordion1">
<h2 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion1" aria-expanded="true" aria-controls="item1">Link 1 - Heading 2</a></h2>
<div class="c-accordions__item-content" id="item1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<ul>
<li>This is item 1</li>
<li>This is item 2</li>
<li>This is item 3</li>
<li>This is item 4</li>
<li>This is item 5</li>
<li>This is item 6</li>
<li>This is item 7</li>
</ul>
</div>
</section>
<section class="c-accordions__item" id="accordion2">
<h3 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion2" aria-expanded="false" aria-controls="item2">Link 2 - Heading 3. This Is A Heading With A Really Long Title. Two Line Testing for When People Decide To Have A Really Long Heading.</a></h3>
<div class="c-accordions__item-content" id="item2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
</div>
</section>
<section class="c-accordions__item" id="accordion3">
<h4 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion3" aria-expanded="false" aria-controls="item3">Link 3 - Heading 4</a></h4>
<div class="c-accordions__item-content" id="item3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
</div>
</section>
<section class="c-accordions__item" id="accordion4">
<h5 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion4" aria-expanded="false" aria-controls="item4">Link 4 - Heading 5</a></h5>
<div class="c-accordions__item-content" id="item4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
</div>
</section>
<section class="c-accordions__item" id="accordion5">
<h6 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion5" aria-expanded="false" aria-controls="item5">Link 5 - Heading 6</a></h6>
<div class="c-accordions__item-content" id="item5">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
</div>
</section>
</div>Accordions steps
Accordions with steps as headings. These should be used when you need to define the order in which a user needs to do something.
Step 1Link 1 - Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
- This is item 1
- This is item 2
- This is item 3
- This is item 4
- This is item 5
- This is item 6
- This is item 7
Step 2Link 2 - Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Step 3Link 3 - Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Step 4Link 4 - Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Step 5Link 5 - Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
<div class="c-accordions c-accordions--steps js-accordion">
<section class="c-accordions__item" id="accordion-steps1">
<h2 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion-steps1" aria-expanded="false" aria-controls="accordion-steps-item1"><i class="c-accordions__item-heading-small">Step 1</i>Link 1 - Heading 2</a></h2>
<div class="c-accordions__item-content" id="accordion-steps-item1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<ul>
<li>This is item 1</li>
<li>This is item 2</li>
<li>This is item 3</li>
<li>This is item 4</li>
<li>This is item 5</li>
<li>This is item 6</li>
<li>This is item 7</li>
</ul>
</div>
</section>
<section class="c-accordions__item" id="accordion-steps2">
<h3 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion-steps2" aria-expanded="false" aria-controls="accordion-steps-item2"><i class="c-accordions__item-heading-small">Step 2</i>Link 2 - Heading 3</a></h3>
<div class="c-accordions__item-content" id="accordion-steps-item2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
</div>
</section>
<section class="c-accordions__item" id="accordion-steps3">
<h4 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion-steps3" aria-expanded="false" aria-controls="accordion-steps-item3"><i class="c-accordions__item-heading-small">Step 3</i>Link 3 - Heading 4</a></h4>
<div class="c-accordions__item-content" id="accordion-steps-item3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
</div>
</section>
<section class="c-accordions__item" id="accordion-steps4">
<h5 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion-steps4" aria-expanded="false" aria-controls="accordion-steps-item4"><i class="c-accordions__item-heading-small">Step 4</i>Link 4 - Heading 5</a></h5>
<div class="c-accordions__item-content" id="accordion-steps-item4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
</div>
</section>
<section class="c-accordions__item" id="accordion-steps5">
<h6 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion-steps5" aria-expanded="false" aria-controls="accordion-steps-item5"><i class="c-accordions__item-heading-small">Step 5</i>Link 5 - Heading 6</a></h6>
<div class="c-accordions__item-content" id="accordion-steps-item5">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
</div>
</section>
</div>Accordions subheading
Accordions with subheading text. Used as supplementary text to the main accordion heading.
Link 1 - Heading 2Subheading text goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
- This is item 1
- This is item 2
- This is item 3
- This is item 4
- This is item 5
- This is item 6
- This is item 7
Link 2 - Heading 3Subheading text goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Link 3 - Heading 4Subheading text goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Link 4 - Heading 5Subheading text goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Link 5 - Heading 6Subheading text goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
<div class="c-accordions c-accordions--subheading js-accordion">
<section class="c-accordions__item" id="accordion-subheading1">
<h2 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion-subheading1" aria-expanded="false" aria-controls="accordion-subheading-item1">Link 1 - Heading 2<i class="c-accordions__item-heading-small">Subheading text goes here</i></a></h2>
<div class="c-accordions__item-content" id="accordion-subheading-item1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<ul>
<li>This is item 1</li>
<li>This is item 2</li>
<li>This is item 3</li>
<li>This is item 4</li>
<li>This is item 5</li>
<li>This is item 6</li>
<li>This is item 7</li>
</ul>
</div>
</section>
<section class="c-accordions__item" id="accordion-subheading2">
<h3 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion-subheading2" aria-expanded="false" aria-controls="accordion-subheading-item2">Link 2 - Heading 3<i class="c-accordions__item-heading-small">Subheading text goes here</i></a></h3>
<div class="c-accordions__item-content" id="accordion-subheading-item2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
</div>
</section>
<section class="c-accordions__item" id="accordion-subheading3">
<h4 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion-subheading3" aria-expanded="false" aria-controls="accordion-subheading-item3">Link 3 - Heading 4<i class="c-accordions__item-heading-small">Subheading text goes here</i></a></h4>
<div class="c-accordions__item-content" id="accordion-subheading-item3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
</div>
</section>
<section class="c-accordions__item" id="accordion-subheading4">
<h5 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion-subheading4" aria-expanded="false" aria-controls="accordion-subheading-item4">Link 4 - Heading 5<i class="c-accordions__item-heading-small">Subheading text goes here</i></a></h5>
<div class="c-accordions__item-content" id="accordion-subheading-item4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
</div>
</section>
<section class="c-accordions__item" id="accordion-subheading5">
<h6 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion-subheading5" aria-expanded="false" aria-controls="accordion-subheading-item5">Link 5 - Heading 6<i class="c-accordions__item-heading-small">Subheading text goes here</i></a></h6>
<div class="c-accordions__item-content" id="accordion-subheading-item5">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
</div>
</section>
</div>Accordions single
A single accordion. Used for longer accordion headings and FAQ pages.
Link 1 - Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
- This is item 1
- This is item 2
- This is item 3
- This is item 4
- This is item 5
- This is item 6
- This is item 7
<div class="c-accordions js-accordion">
<section class="c-accordions__item" id="accordion-single1">
<h2 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion-single1" aria-expanded="false" aria-controls="item-single1">Link 1 - Heading 2</a></h2>
<div class="c-accordions__item-content" id="item-single1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem. </p>
<ul>
<li>This is item 1</li>
<li>This is item 2</li>
<li>This is item 3</li>
<li>This is item 4</li>
<li>This is item 5</li>
<li>This is item 6</li>
<li>This is item 7</li>
</ul>
</div>
</section>
</div>