The elements on this page have been designed for the member pages and currently rely on a container class, this requires selecting the "member" option on the top right of this page.
The section class is based on the bootstrap .card class.
<section class="section">
<div class="section-body">
This should be fine
</div>
</section>Easily add a heading container to your section with .section-heading. You may also include any <h1>-<h6> with a .section-title class to add a pre-styled heading. However, the font sizes of <h1>-<h6> are overridden by .section-heading.
For proper link coloring, be sure to place links in headings within .section-title.
<section class="section">
<div class="section-heading">
Section without title
</div>
<div class="section-body">
This should be fine
</div>
</section>
<section class="section">
<div class="section-heading">
<h1 class="section-title">Section title</h1>
</div>
<div class="section-body">
This should be fine
</div>
</section>You can use .section-row to create rows inside .section-body elements.
A row element will show a border when multiple .section-row elements are displayed.
You can use the bootstrap columns to create multiple columns.
<section class="section">
<div class="section-row">
<div class="col-xs-12">
Client Name
</div>
</div>
<div class="section-row">
<div class="col-xs-6">
client@example.com
</div>
<div class="col-xs-6">
example@client.com
</div>
</div>
</section>Using .section-vertical-center on the .section-row element will make the .col-* element behave like a table.
If you use it in combination with .section-cell (as a child element) you can make table cells, all content inside will be centered vertically.
We can use a .label together with .label-section to display a label that suits the layout.
Below is an example of how we display user data (on the member pages) that can be edited through the button on the right side.
<section class="section">
<div class="section-row section-vertical-center">
<div class="col-xs-12">
<div class="section-cell">
<div class="label label-section">
Name:
</div>
<span>Client Name</span>
</div>
<div class="section-cell">
<a class="float-right btn btn-lg member-btn" href="#">
<i class="fas fa-edit"></i>
</a>
</div>
</div>
</div>
<div class="section-row section-vertical-center">
<div class="col-xs-12">
<div class="section-cell">
<div class="label label-section">
Emailaddress:
</div>
<span>user@example.com</span>
</div>
<div class="section-cell text-right">
<a class=" btn btn-lg member-btn" href="#">
<i class="fas fa-edit"></i>
</a>
</div>
</div>
</div>
</section><section class="section">
<div class="section-row">
<div class="col-xs-12">
<div class="label label-section">
<label class="control-label">First name</label>
</div>
<span>
<input class="form-control" type="text">
</span>
</div>
</div>
<div class="section-row">
<div class="col-xs-12">
<div class="label label-section">
<label class="control-label">Last name (required)</label>
</div>
<span>
<input class="form-control" type="text" value="">
</span>
</div>
</div>
<div class="section-row-btn">
<button name="button" type="submit" class="btn btn-block btn-primary">Save</button>
<a class="btn btn-block btn-gray btn-sm" href="#">Cancel</a>
</div>
</section>Add any non-bordered .table within a section for a seamless design.
Some default section content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<section class="section">
<!-- Default section contents -->
<div class="section-heading">
<div class="section-title">Section title</div>
</div>
<div class="section-body">
<p>Some default section content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<!-- Table -->
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</section>| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<section class="section">
<!-- Default section contents -->
<div class="section-heading">
<div class="section-title">Section title</div>
</div>
<div class="section-row">
<div class="col-xs-12">
<!-- Table -->
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>By using .nav together with .nav-sub within the .section-heading element, we can create a sub menu which can be used together with tabbed content.
We add the .tab-content class to the .section-body element and wrap the content per tab in a div element with the .tab-pane class. See the example below.
This is content for tab 1
This is content for tab 2
<section class="section">
<div class="section-heading border-0">
<ul class="nav nav-sub nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab" aria-expanded="true">Tab 1</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab" aria-expanded="false">Tab 2</a>
</li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<div class="section-row">
<div class="col-xs-12">
<p>This is content for tab 1</p>
</div>
</div>
</div>
<div role="tabpanel" class=" tab-pane fade" id="tab2">
<div class="section-row">
<div class="col-md-12">
<p>This is content for tab 2</p>
</div>
</div>
</div>
</div>
</section>Including collapsible content for the “installments” tab.
We'll send a charge to your bank on the following date. You may select a more convenient date. Keep in mind that it might take several days until the charge is received and processed by your bank.
| Date | Amount | Description | Payment |
|---|---|---|---|
| 25 Sep 2017 | EUR 6,68 | Direct Debit |
<section class="section">
<div class="section-heading border-0">
<ul class="nav nav-sub nav-tabs" role="tablist">
<li role="presentation" class="nav-item">
<a class="nav-link active" href="#installments" aria-controls="installments" role="tab" data-toggle="tab" aria-expanded="true">Installments</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#payments" aria-controls="payments" role="tab" data-toggle="tab" aria-expanded="false">Payments</a>
</li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="installments">
<div class="section-row">
<div class="col-xs-12">
<p>We'll send a charge to your bank on the following date. You may select a more convenient date. Keep in mind that it might take several days until the charge is received and processed by your bank.</p>
</div>
</div>
<div class="section-row section-vertical-center">
<div class="col-xs-12">
<div class="section-cell" style="width:40%">
<a class="section-clickable" data-toggle="collapse" href="#installment-1" aria-expanded="false" aria-controls="installment-1">
#1 -
31 Jul 2017
</a>
</div>
<div class="section-cell">
<a class="section-clickable" data-toggle="collapse" href="#installment-1" aria-expanded="false" aria-controls="installment-1">
EUR 7,66
</a>
</div>
<div class="section-cell">
<a class="btn collapsed section-clickable" role="button" data-toggle="collapse" href="#installment-1" aria-expanded="false" aria-controls="installment-1">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
</div>
</div>
</div>
<div class="small bg-gray collapse installment" id="installment-1">
<div class="section-row">
<div class="col-xs-6">
<div class="label label-section">Net amount</div>
<span>EUR 6,66</span>
</div>
<div class="col-xs-6">
<div class="label label-section">Transaction costs</div>
<span>EUR 1,00</span>
</div>
</div>
<div class="section-row">
<div class="col-xs-6">
<div class="label label-section">Additional costs</div>
<span>
EUR 0,00
</span>
</div>
<div class="col-xs-6">
<div class="label label-section">Total</div>
<span>EUR 7,66</span>
</div>
</div>
<div class="section-row">
<div class="col-xs-6">
<div class="label label-section">Status</div>
<span><span class="text-default"><b>Payment in progress</b></span></span>
</div>
<div class="col-xs-6">
<div class="label label-section">Payment Method</div>
<span>
IBAN: NLXXXXXXXXXX
(Mandate: CIO_XXXXXXX)
</span>
</div>
</div>
</div>
<div class="section-row section-vertical-center">
<div class="col-xs-12">
<div class="section-cell" style="width:40%">
<a class="section-clickable" data-toggle="collapse" href="#installment-2" aria-expanded="false" aria-controls="installment-2">
#2 -
23 Aug 2017
</a>
</div>
<div class="section-cell">
<a class="section-clickable" data-toggle="collapse" href="#installment-2" aria-expanded="false" aria-controls="installment-2">
EUR 7,66
</a>
</div>
<div class="section-cell">
<a class="btn collapsed section-clickable" role="button" data-toggle="collapse" href="#installment-2" aria-expanded="false" aria-controls="installment-2">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
</div>
</div>
</div>
<div class="small bg-gray collapse installment" id="installment-2">
<div class="section-row">
<div class="col-xs-6">
<div class="label label-section">Net amount</div>
<span>EUR 6,66</span>
</div>
<div class="col-xs-6">
<div class="label label-section">Transaction costs</div>
<span>EUR 1,00</span>
</div>
</div>
<div class="section-row">
<div class="col-xs-6">
<div class="label label-section">Additional costs</div>
<span>
EUR 0,00
</span>
</div>
<div class="col-xs-6">
<div class="label label-section">Total</div>
<span>EUR 7,66</span>
</div>
</div>
<div class="section-row">
<div class="col-xs-6">
<div class="label label-section">Status</div>
<span><span class="text-default"><b>Payment in progress</b></span></span>
</div>
<div class="col-xs-6">
<div class="label label-section">Payment Method</div>
<span>
IBAN: NLXXXXXXXXXX
(Mandate: CIO_XXXXXXX)
</span>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="payments">
<table class="table table-condensed">
<thead>
<tr>
<th style="width:20%;">Date</th>
<th style="width:30%;">Amount</th>
<th style="width:25%;">Description</th>
<th style="width:25%;">Payment</th>
</tr>
</thead>
<tbody>
<tr>
<td>25 Sep 2017</td>
<td>
EUR
6,68
</td>
<td></td>
<td>Direct Debit</td>
</tr>
</tbody>
</table>
</div>
</div>
</section><section class="section">
<div class="section-heading">
<h2 class="section-title">Showing details</h2>
</div>
<div class="section-row section-row-sm bg-gray">
<div class="col-sm-6 col-md-4">
<div class="label label-section">Invoice number:</div>
<span>639191</span>
</div>
<div class="col-sm-6 col-md-4">
<div class="label label-section">Invoice date:</div>
<span>10 Jul 2017</span>
</div>
<div class="col-sm-6 col-md-4">
<div class="label label-section">Due date:</div>
<span>31 Jul 2017</span>
</div>
<div class="col-sm-6 col-md-4">
<div class="label label-section">Membership Number:</div>
<span>4</span>
</div>
</div>
</section>| Description | Amount |
|---|---|
| Invoice line: Membership 2017 - 2018 | EUR 200,00 |
| Installment fee | EUR 3,00 |
| Payment (Installment fee) | EUR -101,50 |
| Total outstanding: | EUR 101,50 |
<section class="section">
<div class="section-heading">
<h2 class="section-title">Invoice</h2>
</div>
<div class="section-row section-vertical-center">
<div class="col-xs-12">
<div class="section-cell">
<h4>Importname</h4>
</div>
<div class="section-cell text-right">
<b>Company</b>
</div>
</div>
</div>
<div class="section-row section-row-sm bg-gray">
<div class="col-sm-6 col-md-4">
<div class="label label-section">Invoice number:</div>
<span>123456</span>
</div>
<div class="col-sm-6 col-md-4">
<div class="label label-section">Invoice date:</div>
<span>1 Jan 2018</span>
</div>
<div class="col-sm-6 col-md-4">
<div class="label label-section">Due date:</div>
<span>31 Jan 2018</span>
</div>
<div class="col-sm-6 col-md-4">
<div class="label label-section">Membership Number:</div>
<span>1324</span>
</div>
</div>
<table class="table">
<thead>
<tr>
<th style="width:60%;">Description</th>
<th style="width:40%;" class="text-right">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Invoice line: Membership 2017 - 2018
</td>
<td class="text-right">
<span title="2017-07-10 12:47:03 UTC">
EUR 200,00
</span>
</td>
</tr>
<tr>
<td>
Installment fee
</td>
<td class="text-right">
<span title="2017-07-10 13:05:09 UTC">
EUR 3,00
</span>
</td>
</tr>
<tr>
<td>
Payment (Installment fee)
</td>
<td class="text-right">
<span title="2017-09-25 09:03:11 UTC">
EUR -101,50
</span>
</td>
</tr>
<tr>
<td>
<b>Total outstanding:</b>
</td>
<td class="text-right">
<b>EUR 101,50</b>
</td>
</tr>
</tbody>
</table>
</section>