Edit group

<div class="brick brick--vertical">
  <div class="brick__wrapper prose clearfix">
      <h1>Edit group</h1>
  </div>
</div>
<div class="brick brick--vertical">
  <div class="brick__wrapper prose clearfix">
      <div class="content-columns content-columns--two-columns content-columns--padding">
          <div class="content-columns__column">
              <!-- START form-item-text_field component -->
              <div class="form-item form-item--text">
                  <label for="text_field">Group name</label>
                  <input type="text" id="text_field" value="Red group">
                  <div class="form-item__description">Group names can be 2-50 characters in length.</div>
              </div>
              <!-- END form-item-text_field component -->
          </div>
      </div>
  </div>
</div>

<div class="brick brick--vertical">
  <div class="brick__wrapper prose clearfix">
      <h2 class="h6">Select courses for this group</h2>
      <!-- START widgets/acccordion component -->
      <ul class="accordion accordion--clear" data-accordion-controls="false">
          <li class="accordion__child">
              <h2 id="accordion-a1" data-accordion-trigger class="accordion__toggle" tabindex="0" aria-expanded="false" aria-controls="accordion-a1-panel">Filter courses</h2>
              <div id="accordion-a1-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-a1"
                  aria-hidden="true" role="region">
                  <div class="accordion__inner-wrapper">
                      <!-- Small button start -->
                      <button class="button button--small">Clear filters</button>
                      <!-- Small button end -->
                      <div class="content-columns content-columns--four-columns content-columns--padding-wide">
                          <div class="content-columns__column">
                              <!-- START form-item-text_field component -->
                              <div class="form-item form-item--text">
                                  <label for="text_field_01">Course title</label>
                                  <input type="text" id="text_field_01">
                              </div>
                              <!-- END form-item-text_field component -->
                          </div>
                          <div class="content-columns__column">
                              <!-- START form-item-text_field component -->
                              <div class="form-item form-item--text">
                                  <label for="text_field_02">Department</label>
                                  <input type="text" id="text_field_02">
                              </div>
                              <!-- END form-item-text_field component -->
                              <div class="form-item__checkbox">
                                  <input type="checkbox" checked="checked" name="checkbox_button" id="chi_1" value="checkbox_1" />
                                  <label for="chi_1">Aberystwyth Law School</label>
                              </div>
                          </div>
                          <div class="content-columns__column">
                              <!-- START form-item-text_field component -->
                              <div class="form-item form-item--text">
                                  <label for="text_field_03">Location</label>
                                  <input type="text" id="text_field_03">
                              </div>
                              <div class="form-item__checkbox">
                                  <input type="checkbox" checked="checked" name="checkbox_button" id="chi_2" value="checkbox_2" />
                                  <label for="chi_2">Cheltenham</label>
                              </div>
                              <!-- END form-item-text_field component -->
                          </div>
                          <div class="content-columns__column">
                              <!-- START form-item-text_field component -->
                              <div class="form-item form-item--text">
                                  <label for="text_field_04">Outcome qualification</label>
                                  <input type="text" id="text_field_04">
                              </div>
                              <!-- END form-item-text_field component -->
                              <div class="form-item__checkbox">
                                  <input type="checkbox" checked="checked" name="checkbox_button" id="chi_3" value="checkbox_3" />
                                  <label for="chi_3">Bachelor of Arts (with Honours) - BA (Hons)</label>
                              </div>
                              <div class="form-item__checkbox">
                                  <input type="checkbox" checked="checked" name="checkbox_button" id="chi_4" value="checkbox_4" />
                                  <label for="chi_4">Bachelor of Science (with Honours) - BSc (Hons)</label>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </li>
      </ul>
      <!-- END widgets/acccordion component -->

      <!-- START header-with-meta component -->
      <div class="heading-with-meta">
          <h2 class="h6">2 courses selected</h2>
          <div class="heading-with-meta__meta">
              <button class="button button--secondary">Cancel</button>
              <button class="button button--primary">Save changes</button>
          </div>
      </div>
      <!-- END header-with-meta component -->

      <!-- START widgets/acccordion component -->
      <ul class="accordion accordion--complex accordion--highlight" data-accordion-controls="false">
          <li class="accordion__child">
              <div id="id0ce5b29aa2" data-accordion-trigger class="accordion__toggle accordion__toggle--with-checkbox"
                  tabindex="0" aria-expanded="false" aria-controls="idc8420d89b1">
                  <h3 class="accordion__label">Arithmetic (Mental)</h3>
                  <input type="checkbox" class="accordion__checkbox" name="checkbox_button" id="id2f0259c8a6" value="checkbox_1"
                      aria-label="Select row" onclick="event.stopPropagation();">
                  <div class="accordion__badges">
                      <span class="badge badge--courseid">AB12</span> </div>
              </div>
              <div id="idc8420d89b1" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="id0ce5b29aa2"
                  aria-hidden="true" role="region">
                  <div class="accordion__inner-wrapper">
                      <h4>Bachelors of science (BSc) - 2 options</h4>
                      <div class="table-responsive table-borderless table-hide-head-row">
                          <table>
                              <thead>
                                  <tr>
                                      <th>Study option</th>
                                      <th>Start date</th>
                                      <th>Location</th>
                                      <th>Duration</th>
                                  </tr>
                              </thead>
                              <tbody>
                                  <tr>
                                      <td>Full-time</td>
                                      <td>January 202X</td>
                                      <td>Cheltenham</td>
                                      <td>3 years</td>
                                  </tr>
                                  <tr>
                                      <td>Full-time</td>
                                      <td>September 202X</td>
                                      <td>Cheltenham</td>
                                      <td>3 years</td>
                                  </tr>
                              </tbody>
                          </table>
                      </div>
                      <h4>Masters of science (BSc) - 2 options</h4>
                      <div class="table-responsive table-borderless table-hide-head-row">
                          <table>
                              <thead>
                                  <tr>
                                      <th>Study option</th>
                                      <th>Start date</th>
                                      <th>Location</th>
                                      <th>Duration</th>
                                  </tr>
                              </thead>
                              <tbody>
                                  <tr>
                                      <td>Full-time</td>
                                      <td>January 202X</td>
                                      <td>Cheltenham</td>
                                      <td>4 years</td>
                                  </tr>
                                  <tr>
                                      <td>Full-time</td>
                                      <td>September 202X</td>
                                      <td>Cheltenham</td>
                                      <td>4 years</td>
                                  </tr>
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
          </li>
          <li class="accordion__child">
              <div id="ida915ff7bd6" data-accordion-trigger class="accordion__toggle accordion__toggle--with-checkbox"
                  tabindex="0" aria-expanded="false" aria-controls="id16650d29f7">
                  <h2 class="accordion__label">Creative cross-stitch</h2>
                  <input type="checkbox" class="accordion__checkbox" name="checkbox_button" id="id35cfff6820" value="checkbox_1"
                      aria-label="Select row" onclick="event.stopPropagation();">
                  <div class="accordion__badges">
                      <span class="badge badge--courseid">DE23</span>
                  </div>
              </div>
              <div id="id16650d29f7" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="ida915ff7bd6"
                  aria-hidden="true" role="region">
                  <div class="accordion__inner-wrapper">
                      <p></p>
                  </div>
              </div>
          </li>
      </ul>
      <!-- END widgets/acccordion component -->

      <!-- START pagination component -->
      <ul class="pagination clearfix">
          <li class="pagination__item"><a href="#" title="First page" class="pagination__link pagination__link--first">First
                  page</a></li>
          <li class="pagination__item"><a href="#" title="Previous page" class="pagination__link pagination__link--previous">Previous
                  page</a></li>
          <li class="pagination__item"><a href="#" class="pagination__link">1</a></li>
          <li class="pagination__item"><a href="#" class="pagination__link">2</a></li>
          <li class="pagination__item"><a href="#" class="pagination__link pagination__link--current">3</a></li>
          <li class="pagination__item"><a href="#" class="pagination__link">4</a></li>
          <li class="pagination__item"><a href="#" title="Next page" class="pagination__link pagination__link--next">Next
                  page</a></li>
          <li class="pagination__item"><a href="#" title="Last page" class="pagination__link pagination__link--last">Last
                  page</a></li>
      </ul>
      <!-- END pagination component -->

  </div>
</div>

<div class="brick brick--vertical">
  <div class="brick__wrapper prose clearfix">
      <div class="buttons">
          <div class="buttons__group">
              <button class="button button--primary" type="button">Save changes</button>
              <button class="button button--secondary" type="button">Cancel</button>
          </div>
      </div>
  </div>
</div>