Reports and downloads
2 reports selected
Provider details
| csv | Report name | |
|---|---|---|
|
|
|
Provider details report one |
|
|
|
Provider details report two |
My saved reports
| csv | Report name | Actions | |
|---|---|---|---|
|
|
|
My saved report one | |
|
|
|
My saved report two |
Default reports
| csv | Report name | Actions | |
|---|---|---|---|
|
|
|
Default report one | |
|
|
|
Default report two |
Source data
| csv | Report name | Actions |
|---|---|---|
|
|
Source data report one | |
|
|
Source data report two |
<div class="brick brick--vertical">
<div class="brick__wrapper clearfix">
<h1>Reports and downloads</h1>
</div>
</div>
<div class="brick brick--vertical">
<div class="brick__wrapper clearfix prose">
<!-- START form-item-select component -->
<div class="form-item form-item--inline">
<label for="select_element">Select cycle</label>
<select id="select_element">
<option value="1">2018 - 2019</option>
<option value="2">2017 - 2018</option>
<option value="3">2016 - 2017</option>
</select>
</div>
<!-- END form-item-select component -->
</div>
</div>
<div class="brick brick--vertical">
<div class="brick__wrapper clearfix prose">
<section class="content-section--highlight-secondary">
<!-- START header-with-actions component -->
<div class="header header--with-actions">
<h2>2 reports selected</h2>
<div class="header__actions">
<button class="button button--primary button--inline" type="button">Download</button>
</div>
</div>
<!-- END header-with-actions component -->
</section>
<section class="content-section--highlight">
<h3>Provider details</h3>
<div class="table-responsive table-borderless">
<table>
<thead>
<tr>
<th class="column-width--10pc">csv</th>
<th class="column-width--10pc">pdf</th>
<th>Report name</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_32" value="chnl_32" />
<label for="chnl_32">Select csv format</label>
</div>
<!-- END form-item-checkboxes_no_label component -->
</td>
<td>
<!-- START form-item-checkboxes_no_label component -->
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_31" value="chnl_31" />
<label for="chnl_31">Select pdf format</label>
</div>
<!-- END form-item-checkboxes_no_label component -->
</td>
<td>Provider details report one</td>
</tr>
<tr>
<td>
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_34" value="chnl_34" />
<label for="chnl_34">Select csv format</label>
</div>
<!-- END form-item-checkboxes_no_label component -->
</td>
<td>
<!-- START form-item-checkboxes_no_label component -->
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_33" value="chnl_33" />
<label for="chnl_33">Select pdf format</label>
</div>
<!-- END form-item-checkboxes_no_label component -->
</td>
<td>Provider details report two</td>
</tr>
</tbody>
</table>
</div>
<h3>My saved reports</h3>
<div class="table-responsive table-borderless table-col4-right ">
<table>
<thead>
<tr>
<th class="column-width--10pc">csv</th>
<th class="column-width--10pc">pdf</th>
<th>Report name</th>
<th data-th="Actions" class="column-actions-heading">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_2" value="chnl_2" />
<label for="chnl_2">Select csv format</label>
</div>
<!-- END form-item-checkboxes_no_label component -->
</td>
<td>
<!-- START form-item-checkboxes_no_label component -->
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_1" value="chnl_1" />
<label for="chnl_1">Select pdf format</label>
</div>
<!-- END form-item-checkboxes_no_label component -->
</td>
<td>My saved report one</td>
<td> <button class="button button--small button--secondary" data-modal-light-trigger data-modal-light-id="modal-1">Unsave</button>
<button class="button button--small">View</button>
</td>
</tr>
<tr>
<td>
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_4" value="chnl_4" />
<label for="chnl_4">Select csv format</label>
</div>
<!-- END form-item-checkboxes_no_label component -->
</td>
<td>
<!-- START form-item-checkboxes_no_label component -->
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_3" value="chnl_3" />
<label for="chnl_3">Select pdf format</label>
</div>
<!-- END form-item-checkboxes_no_label component -->
</td>
<td>My saved report two</td>
<td> <button class="button button--small button--secondary" data-modal-light-trigger data-modal-light-id="modal-1">Unsave</button>
<button class="button button--small">View</button>
</td>
</tr>
</tbody>
</table>
</div>
<h3>Default reports</h3>
<div class="table-responsive table-borderless table-col4-right ">
<table>
<thead>
<tr>
<th class="column-width--10pc">csv</th>
<th class="column-width--10pc">pdf</th>
<th>Report name</th>
<th data-th="Actions" class="column-actions-heading">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_6" value="chnl_6" />
<label for="chnl_6">Select csv format</label>
</div>
<!-- END form-item-checkboxes_no_label component -->
</td>
<td>
<!-- START form-item-checkboxes_no_label component -->
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_5" value="chnl_5" />
<label for="chnl_5">Select pdf format</label>
</div>
<!-- END form-item-checkboxes_no_label component -->
</td>
<td>Default report one</td>
<td>
<button class="button button--small">View</button>
</td>
</tr>
<tr>
<td>
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_8" value="chnl_8" />
<label for="chnl_8">Select csv format</label>
</div>
<!-- END form-item-checkboxes_no_label component -->
</td>
<td>
<!-- START form-item-checkboxes_no_label component -->
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_7" value="chnl_7" />
<label for="chnl_7">Select pdf format</label>
</div>
<!-- END form-item-checkboxes_no_label component -->
</td>
<td>Default report two</td>
<td>
<button class="button button--small">View</button>
</td>
</tr>
</tbody>
</table>
</div>
<h3>Source data</h3>
<div class="table-responsive table-borderless table-col3-right ">
<table>
<thead>
<tr>
<th class="column-width--20pc">csv</th>
<th>Report name</th>
<th data-th="Actions" class="column-actions-heading">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_10" value="chnl_10" />
<label for="chnl_10">Select csv format</label>
</div>
<!-- END form-item-checkboxes_no_label component -->
</td>
<td>Source data report one</td>
<td>
<button class="button button--small">View</button>
</td>
</tr>
<tr>
<td>
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_12" value="chnl_12" />
<label for="chnl_12">Select csv format</label>
</div>
<!-- END form-item-checkboxes_no_label component -->
</td>
<td>Source data report two</td>
<td>
<button class="button button--small">View</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</div>
<!-- Unsave modal start -->
<div id="modal-1" data-modal-light-state="hidden" class="modal-light">
<aside tabindex="-1" role="dialog" aria-labelledby="label_1" class="modal-light__content prose">
<p class="impact--medium" id="label_1">Are you sure you want to unsave the report</p>
<p class="impact--medium"><strong>My saved report one</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>Unsave report</button>
</div>
</aside>
</div>
<!-- Unsave modal end -->