Member Information
Contact Information
<div class="columns is-centered">
<div class="column is-two-fifths">
<div class="card">
<header class="card-header is-inverse">
<h4 class="card-header-title">
Member Information
</h4>
</header>
<div class="card-content">
<form>
<div class="field">
<label for="member-name" class="label">Member Name</label>
<div class="control">
<input
class="input is-static"
id="member-name"
type="text"
placeholder=""
value="Dr Homer Simpson"
readonly
>
</div>
</div>
<div class="field">
<label for="member-number" class="label">Member Number</label>
<div class="control">
<input
class="input is-static"
id="member-number"
type="text"
placeholder=""
value="123456"
readonly
>
</div>
</div>
<div class="field">
<label for="member-plan" class="label">Member Plan</label>
<div class="control">
<input
class="input is-static"
id="member-plan"
type="text"
placeholder=""
value="General Plan"
readonly
>
</div>
</div>
<div class="field">
<label for="member-join-date" class="label">Date You Joined</label>
<div class="control">
<input
class="input is-static"
id="member-join-date"
type="text"
placeholder=""
value="01/01/1999"
readonly
>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="column is-two-fifths">
<div class="card custom-card">
<header class="card-header is-inverse">
<h4 class="card-header-title">
Contact Information
</h4>
</header>
<div class="card-content">
<form>
<div class="field">
<label for="member-address-line-1" class="label">Address Line 1</label>
<div class="control">
<input
class="input is-static"
id="member-address-line-1"
type="text"
placeholder=""
value="123 Fake Street"
readonly
>
</div>
</div>
<div class="field">
<label for="member-address-line-2" class="label">Address Line 2</label>
<div class="control">
<input
class="input is-static"
id="member-address-line-2"
type="text"
placeholder="Address Line 2"
value=""
readonly
>
</div>
</div>
<div class="field">
<label for="member-address-city" class="label">City</label>
<div class="control">
<input
class="input is-static"
id="member-address-city"
type="text"
placeholder=""
value="Springfield"
readonly
>
</div>
</div>
<div class="field field-group is-grouped">
<div class="field is-expanded">
<label for="member-address-state" class="label">State</label>
<div class="control">
<input
class="input is-static"
id="member-address-state"
type="text"
placeholder=""
value="Oregon"
readonly
>
</div>
</div>
<div class="field">
<label for="member-address-zip" class="label">Zip Code</label>
<div class="control">
<input
class="input is-static"
id="member-address-zip"
type="text"
placeholder=""
value="11210"
readonly
>
</div>
</div>
</div>
<div class="field">
<label class="label">Email</label>
<div class="control">
<input
class="input is-static"
type="email"
placeholder="Email input"
value="homer@thesimpsons.com"
readonly
>
</div>
</form>
</div>
</div>
</div>
</div>
Cards
The Bulma card component is a flexible element that groups several sub-elements together. In this example, we'll use Bulma's column classes with cards to create a navigation section. We've made the entire card a link, which highlights on hover. Note the use of the custom .nav-card class, which is used specifically for blocks like this.
<div class="columns">
<div class="column">
<a href="#" class="card nav-card">
<span class="card-image">
<figure class="image">
<img src="https://placehold.jp/600x500.png" alt="Placeholder image">
</figure>
</span>
<span class="card-content">
<span class="button is-primary">Personal Information</a>
</span>
</a>
</div>
<div class="column">
<a href="#" class="card nav-card">
<span class="card-image">
<figure class="image">
<img src="https://placehold.jp/600x500.png" alt="Placeholder image">
</figure>
</span>
<span class="card-content">
<span class="button is-primary">Current Active Cases</a>
</span>
</a>
</div>
<div class="column">
<a href="#" class="card nav-card">
<span class="card-image">
<figure class="image">
<img src="https://placehold.jp/600x500.png" alt="Placeholder image">
</figure>
</span>
<span class="card-content">
<span class="button is-primary">Retirement Application</a>
</span>
</a>
</div>
</div>
Contact
Since this form is a bit wider, we'll use horizontal labels. Use the .is-horizontal modifier on the field container, in which you include:
.field-labelfor the side label.field-bodyfor the input/select/textarea container- You can use
.is-groupedor.has-addonsfor the child elements
Contact Information
<div class="card">
<header class="card-header is-inverse">
<h4 class="card-header-title">Contact Information</h4>
</header>
<div class="card-content">
<form>
<div class="field is-horizontal is-single-row">
<div class="field-label">
<label for="email-address" class="label">Email</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icons-left has-icons-right has-validation">
<input
class="input"
type="email"
id="email-address"
placeholder="Email address"
value=""
>
<span class="icon is-small is-left">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" style="transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M3.87 4h13.25C18.37 4 19 4.59 19 5.79v8.42c0 1.19-.63 1.79-1.88 1.79H3.87c-1.25 0-1.88-.6-1.88-1.79V5.79c0-1.2.63-1.79 1.88-1.79zm6.62 8.6l6.74-5.53c.24-.2.43-.66.13-1.07c-.29-.41-.82-.42-1.17-.17l-5.7 3.86L4.8 5.83c-.35-.25-.88-.24-1.17.17c-.3.41-.11.87.13 1.07z" fill="#CCCCCC"/></svg>
</span>
<span class="icon is-small is-right icon-validation">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentColor" aria-hidden="true" focusable="false" style="transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8s-8-3.58-8-8s3.58-8 8-8zm1.13 9.38l.35-6.46H8.52l.35 6.46h2.26zm-.09 3.36c.24-.23.37-.55.37-.96c0-.42-.12-.74-.36-.97s-.59-.35-1.06-.35s-.82.12-1.07.35s-.37.55-.37.97c0 .41.13.73.38.96c.26.23.61.34 1.06.34s.8-.11 1.05-.34z"/></svg>
</div>
</div>
</div>
</div>
<div class="field is-horizontal is-single-row">
<div class="field-label">
<label for="home-telephone" class="label">Home Telephone</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input
class="input"
id="home-telephone"
type="text"
placeholder="(XXX) XXX-XXXX"
value=""
>
</div>
</div>
</div>
</div>
<div class="field is-horizontal is-single-row">
<div class="field-label">
<label for="work-telephone" class="label">Work Telephone</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input
class="input"
id="work-telephone"
type="text"
placeholder="(XXX) XXX-XXXX"
value=""
>
</div>
</div>
</div>
</div>
<div class="field is-horizontal is-single-row">
<div class="field-label">
<label for="cellular-telephone" class="label">Cellular Telephone</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input
class="input"
id="cellular-telephone"
type="text"
placeholder="(XXX) XXX-XXXX"
value=""
>
</div>
</div>
</div>
</div>
<div class="field is-horizontal is-single-row">
<div class="field-label">
<label for="fax-number" class="label">Fax Number</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input
class="input"
id="fax-number"
type="text"
placeholder="(XXX) XXX-XXXX"
value=""
>
</div>
</div>
</div>
</div>
<div class="field is-grouped is-grouped-right">
<p class="control">
<a href="" class="button is-primary is-outlined">
Cancel
</a>
</p>
<p class="control">
<a href="" class="button is-primary">
Save
</a>
</p>
</div>
<div class="field is-grouped is-grouped-right">
<a href="" class="button is-text">
<span>Help</span>
<span class="icon is-small">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" style="transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M17 10c0-3.87-3.14-7-7-7c-3.87 0-7 3.13-7 7s3.13 7 7 7c3.86 0 7-3.13 7-7zm-6.3 1.48H9.14v-.43c0-.38.08-.7.24-.98s.46-.57.88-.89c.41-.29.68-.53.81-.71c.14-.18.2-.39.2-.62c0-.25-.09-.44-.28-.58c-.19-.13-.45-.19-.79-.19c-.58 0-1.25.19-2 .57l-.64-1.28c.87-.49 1.8-.74 2.77-.74c.81 0 1.45.2 1.92.58c.48.39.71.91.71 1.55c0 .43-.09.8-.29 1.11c-.19.32-.57.67-1.11 1.06c-.38.28-.61.49-.71.63c-.1.15-.15.34-.15.57v.35zm-1.47 2.74c-.18-.17-.27-.42-.27-.73c0-.33.08-.58.26-.75s.43-.25.77-.25c.32 0 .57.09.75.26s.27.42.27.74c0 .3-.09.55-.27.72c-.18.18-.43.27-.75.27c-.33 0-.58-.09-.76-.26z" fill="#626262"/></svg>
</span>
</a>
</div>
</form>
</div>
</div>
Plan Status
| Start Date | End Date | Status | Sub-Status |
|---|---|---|---|
| Start Date | End Date | Status | Sub-Status |
| 01/01/2005 | Terminated | Terminated | |
| 01/01/2001 | 01/01/2004 | Active | Terminated |
| 01/01/2000 | 12/31/2000 | Active | Terminated |
| 01/01/1999 | 12/31/1999 | Active | Terminated |
<div class="card">
<header class="card-header is-inverse">
<h4 class="card-header-title">Plan Status</h4>
</header>
<div class="card-content">
<table class="table">
<thead>
<tr>
<th>Start Date</th>
<th>End Date</th>
<th>Status</th>
<th>Sub-Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Start Date</th>
<th>End Date</th>
<th>Status</th>
<th>Sub-Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>01/01/2005</td>
<td></td>
<td>Terminated</td>
<td>Terminated</td>
</tr>
<tr>
<td>01/01/2001</td>
<td>01/01/2004</td>
<td>Active</td>
<td>Terminated</td>
</tr>
<tr>
<td>01/01/2000</td>
<td>12/31/2000</td>
<td>Active</td>
<td>Terminated</td>
</tr>
<tr>
<td>01/01/1999</td>
<td>12/31/1999</td>
<td>Active</td>
<td>Terminated</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tabs-container">
<nav class="is-boxed tabs">
<ul>
<li class="is-active"><a href="#details">Details</a></li>
<li><a href="#additional">Additional</a></li>
</ul>
</nav>
<section class="tab-content">
<div id="details" class="tab-item">
<form>
<div class="field is-horizontal is-single-row">
<div class="field-label">
<label for="email-address" class="label">Email</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icons-left has-icons-right has-validation">
<input
class="input"
type="email"
id="email-address"
placeholder="Email address"
value=""
>
<span class="icon is-small is-left">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" style="transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M3.87 4h13.25C18.37 4 19 4.59 19 5.79v8.42c0 1.19-.63 1.79-1.88 1.79H3.87c-1.25 0-1.88-.6-1.88-1.79V5.79c0-1.2.63-1.79 1.88-1.79zm6.62 8.6l6.74-5.53c.24-.2.43-.66.13-1.07c-.29-.41-.82-.42-1.17-.17l-5.7 3.86L4.8 5.83c-.35-.25-.88-.24-1.17.17c-.3.41-.11.87.13 1.07z" fill="#CCCCCC"/></svg>
</span>
<span class="icon is-small is-right icon-validation">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentColor" aria-hidden="true" focusable="false" style="transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8s-8-3.58-8-8s3.58-8 8-8zm1.13 9.38l.35-6.46H8.52l.35 6.46h2.26zm-.09 3.36c.24-.23.37-.55.37-.96c0-.42-.12-.74-.36-.97s-.59-.35-1.06-.35s-.82.12-1.07.35s-.37.55-.37.97c0 .41.13.73.38.96c.26.23.61.34 1.06.34s.8-.11 1.05-.34z"/></svg>
</div>
</div>
</div>
</div>
<div class="field is-horizontal is-single-row">
<div class="field-label">
<label for="home-telephone" class="label">Home Telephone</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input
class="input"
id="home-telephone"
type="text"
placeholder="(XXX) XXX-XXXX"
value=""
>
</div>
</div>
</div>
</div>
<div class="field is-horizontal is-single-row">
<div class="field-label">
<label for="work-telephone" class="label">Work Telephone</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input
class="input"
id="work-telephone"
type="text"
placeholder="(XXX) XXX-XXXX"
value=""
>
</div>
</div>
</div>
</div>
<div class="field is-horizontal is-single-row">
<div class="field-label">
<label for="cellular-telephone" class="label">Cellular Telephone</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input
class="input"
id="cellular-telephone"
type="text"
placeholder="(XXX) XXX-XXXX"
value=""
>
</div>
</div>
</div>
</div>
<div class="field is-horizontal is-single-row">
<div class="field-label">
<label for="fax-number" class="label">Fax Number</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input
class="input"
id="fax-number"
type="text"
placeholder="(XXX) XXX-XXXX"
value=""
>
</div>
</div>
</div>
</div>
<div class="field buttons is-grouped is-grouped-right">
<a href="" class="button is-rounded is-outlined">
Cancel
</a>
<a href="" class="button is-rounded">
Save
</a>
</div>
<div class="field is-grouped is-grouped-right">
<a href="" class="button is-text">
<span>Help</span>
<span class="icon is-small">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" style="transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M17 10c0-3.87-3.14-7-7-7c-3.87 0-7 3.13-7 7s3.13 7 7 7c3.86 0 7-3.13 7-7zm-6.3 1.48H9.14v-.43c0-.38.08-.7.24-.98s.46-.57.88-.89c.41-.29.68-.53.81-.71c.14-.18.2-.39.2-.62c0-.25-.09-.44-.28-.58c-.19-.13-.45-.19-.79-.19c-.58 0-1.25.19-2 .57l-.64-1.28c.87-.49 1.8-.74 2.77-.74c.81 0 1.45.2 1.92.58c.48.39.71.91.71 1.55c0 .43-.09.8-.29 1.11c-.19.32-.57.67-1.11 1.06c-.38.28-.61.49-.71.63c-.1.15-.15.34-.15.57v.35zm-1.47 2.74c-.18-.17-.27-.42-.27-.73c0-.33.08-.58.26-.75s.43-.25.77-.25c.32 0 .57.09.75.26s.27.42.27.74c0 .3-.09.55-.27.72c-.18.18-.43.27-.75.27c-.33 0-.58-.09-.76-.26z" fill="#626262"/></svg>
</span>
</a>
</div>
</form>
</div>
<div id="additional" hidden="hidden" class="tab-item">
</div>
</section>
</div>