Please select "Member" in the top right corner

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.

Basic Example

The section class is based on the bootstrap .panel class.

This should be fine 
<section class="section">
  <div class="section-body">
     This should be fine
  </div>
</section>

Section with Heading

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 without title
This should be fine

Section title

This should be fine 
<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>

Section with rows

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.

Client Name
client@example.com
example@client.com 
<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>

Dealing with content

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.

Name:
Client Name
Emailaddress:
user@example.com 
<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="pull-right btn btn-lg" href="#">
          <span class="glyphicon glyphicon-edit"></span>
        </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" href="#">
          <span class="glyphicon glyphicon-edit"></span>
        </a>
      </div>
    </div>
  </div>
</section>

Input fields

Cancel 
<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>

Section with Tables

Add any non-bordered .table within a section for a seamless design.

Section title

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 @twitter 
<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>

Alternative using a section-row

Section title
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<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>

Section with tabbed content

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">
    <ul class="nav nav-sub" role="tablist">
      <li role="presentation" class="active">
        <a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab" aria-expanded="true">Tab 1</a>
      </li>
      <li role="presentation">
        <a 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" id="tab2">
      <div class="section-row">
        <div class="col-md-12">
          <p>This is content for tab 2</p>
        </div>
      </div>
    </div>
  </div>
</section>

Example from the member pages

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.

Net amount
EUR 6,66
Transaction costs
EUR 1,00
Additional costs
EUR 0,00
Total
EUR 7,66
Status
Payment in progress
Payment Method
IBAN: NLXXXXXXXXXX (Mandate: CIO_XXXXXXX)
Net amount
EUR 6,66
Transaction costs
EUR 1,00
Additional costs
EUR 0,00
Total
EUR 7,66
Status
Payment in progress
Payment Method
IBAN: NLXXXXXXXXXX (Mandate: CIO_XXXXXXX)
Date Amount Description Payment
25 Sep 2017 EUR 6,68 Direct Debit 
<section class="section">
  <div class="section-heading">
    <ul class="nav nav-sub" role="tablist">
      <li role="presentation" class="active">
        <a href="#installments" aria-controls="installments" role="tab" data-toggle="tab" aria-expanded="true">Installments</a>
      </li>
      <li role="presentation">
        <a 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>

Showing details

Showing details

Invoice number:
639191
Invoice date:
10 Jul 2017
Due date:
31 Jul 2017
Membership Number:
4 
<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-xs-6 col-sm-4">
      <div class="label label-section">Invoice number:</div>
      <span>639191</span>
    </div>
    <div class="col-xs-6 col-sm-4">
      <div class="label label-section">Invoice date:</div>
      <span>10 Jul 2017</span>
    </div>
    <div class="col-xs-6 col-sm-4">
      <div class="label label-section">Due date:</div>
      <span>31 Jul 2017</span>
    </div>
    <div class="col-xs-6 col-sm-4">
      <div class="label label-section">Membership Number:</div>
      <span>4</span>
    </div>
  </div>
</section>

Invoice example from the member pages

Invoice

Importname

Company
Invoice number:
123456
Invoice date:
1 Jan 2018
Due date:
31 Jan 2018
Membership Number:
1324
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-xs-6 col-sm-4">
      <div class="label label-section">Invoice number:</div>
      <span>123456</span>
    </div>
    <div class="col-xs-6 col-sm-4">
      <div class="label label-section">Invoice date:</div>
      <span>1 Jan 2018</span>
    </div>
    <div class="col-xs-6 col-sm-4">
      <div class="label label-section">Due date:</div>
      <span>31 Jan 2018</span>
    </div>
    <div class="col-xs-6 col-sm-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>