Manage groups
-
Red group
-
Yellow group
-
Green group
<div class="brick brick--vertical">
<div class="brick__wrapper prose clearfix">
<h1>Manage groups</h1>
</div>
</div>
<div class="brick brick--vertical">
<div class="brick__wrapper prose clearfix">
<button class="button button--primary" type="button">Create new group</button>
<!-- START widgets/acccordion-buttons component -->
<ul class="accordion accordion--highlight" data-accordion-controls="false">
<li class="accordion__child">
<div id="accordion-ab1" data-accordion-trigger class="accordion__toggle accordion__toggle--buttons" tabindex="0" aria-expanded="false" aria-controls="accordion-ab1-panel">
<h2 class="accordion__label">Red group</h2>
<span class="accordion__buttons">
<!-- Multiaction button start -->
<div data-multiaction-button='{"orientation": "vertical", "small": true}' data-multiaction-button-label=More
id="id6c16b3b392">
<button class="button" type="button">Edit group</button>
<button class="button" type="button" data-modal-light-trigger data-modal-light-id="modal-2">Delete group</button>
</div>
<!-- Multiaction button end -->
</span>
</div>
<div id="accordion-ab1-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-ab1"
aria-hidden="true" role="region">
<div class="accordion__inner-wrapper">
<div class="table-responsive table-borderless">
<table>
<caption>Courses in this group</caption>
<thead>
<tr>
<th>Course</th>
<th>UCAS application code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arithmetic (Mental)</td>
<td>A1A1</td>
</tr>
<tr>
<td>Creative writing</td>
<td>E4W3</td>
</tr>
<tr>
<td>Cooking with your microwave</td>
<td>D3S2</td>
</tr>
<tr>
<td>Synchronised swimming</td>
<td>V6X3</td>
</tr>
</tbody>
</table>
</div>
<div class="buttons">
<div class="buttons__group">
</div>
<div class="buttons__group">
<button class="button button--small button--secondary" type="button" data-modal-light-trigger
data-modal-light-id="modal-2">Delete group</button>
<button class="button button--small button--primary" type="button">Edit group</button>
</div>
</div>
</div>
</div>
</li>
<li class="accordion__child">
<div id="accordion-ab2" data-accordion-trigger class="accordion__toggle accordion__toggle--buttons accordion__toggle--buttons-right"
tabindex="0" data-aria-expanded="false" aria-controls="accordion-ab2-panel">
<h2 class="accordion__label">Yellow group</h2>
<span class="accordion__buttons">
<!-- Multiaction button start -->
<div data-multiaction-button='{"orientation": "vertical", "small": true}' data-multiaction-button-label=More
id="id6c16b3b393">
<button class="button" type="button">Edit group</button>
<button class="button" type="button">Delete group</button>
</div>
<!-- Multiaction button end -->
</span>
</div>
<div id="accordion-ab2-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-ab2"
aria-hidden="true" role="region">
<div class="accordion__inner-wrapper">
<p class="paragraph-highlight">No courses have been added to this group</p>
<div class="buttons">
<div class="buttons__group">
</div>
<div class="buttons__group">
<button class="button button--small button--secondary" type="button">Delete group</button>
<button class="button button--small button--primary" type="button">Edit group</button>
</div>
</div>
</div>
</div>
</li>
<li class="accordion__child">
<div id="accordion-ab3" data-accordion-trigger class="accordion__toggle accordion__toggle--buttons accordion__toggle--buttons-right"
tabindex="0" aria-expanded="false" aria-controls="accordion-ab3-panel">
<h2 class="accordion__label">Green group</h2>
<span class="accordion__buttons">
<!-- Multiaction button start -->
<div data-multiaction-button='{"orientation": "vertical", "small": true}' data-multiaction-button-label=More
id="id6c16b3b394">
<button class="button" type="button">Edit group</button>
<button class="button" type="button">Delete group</button>
</div>
<!-- Multiaction button end -->
</span>
</div>
<div id="accordion-ab3-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-ab3"
aria-hidden="true" role="region">
<div class="accordion__inner-wrapper">
<p class="paragraph-highlight">No courses have been added to this group</p>
<div class="buttons">
<div class="buttons__group">
</div>
<div class="buttons__group">
<button class="button button--small button--secondary" type="button">Delete group</button>
<button class="button button--small button--primary" type="button">Edit group</button>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- END widgets/acccordion component -->
</div>
</div>
<!-- Delete group modal start -->
<div id="modal-2" data-modal-light-state="hidden" class="modal-light">
<aside tabindex="-1" role="dialog" aria-labelledby="label_2" class="modal-light__content prose">
<p class="impact--medium" id="label_2">Are you sure you want to delete the group</p>
<p class="impact--medium"><strong>Red group</strong></p>
<div class="buttons__group">
<button class="button button--small button--secondary" type="button" data-modal-light-close>Cancel</button>
<button class="button button--small button--primary" type="button" data-modal-light-close>Delete group</button>
</div>
</aside>
</div>
<!-- Delete group modal end -->