Text Layout
| Left Align | Center Align | Right Align |
|---|---|---|
|
Basic Text
|
Basic Text
|
Basic Text
|
|
Basic Text
Aside Text
|
Basic Text
Aside Text
|
Basic Text
Aside Text
|
|
Kitchen Printer
Online
00:11:22:33:aa:bb
|
Kitchen Printer
Online
00:11:22:33:aa:bb
|
Kitchen Printer
Online
00:11:22:33:aa:bb
|
|
Very long long long long long long text
Confirmed
00:11:22:33:aa:bb
|
Very long long long long long long text
Confirmed
00:11:22:33:aa:bb
|
Very long long long long long long text
Confirmed
00:11:22:33:aa:bb
|
<style>
.ic-text-layout-demo {
width: 100%;
}
.ic-text-layout-demo thead th {
width: 33%;
background: #333;
color: white;
padding: 5px 0;
}
.ic-text-layout-demo tbody td {
vertical-align: top;
padding: 15px 0 0;
border-left: 1px solid #ddd;
}
.ic-text-layout-demo tbody td:first-child {
border-left: none;
}
.ic-text-layout-demo .truncated-text-layouts td {
padding-bottom: 32px;
position: relative;
}
.ic-text-layout-demo .truncated-text-layouts .ic-text-layout {
width: 100%;
position: absolute;
top: 15px;
}
</style>
<table class="ic-text-layout-demo">
<thead>
<tr>
<th>Left Align</th>
<th>Center Align</th>
<th>Right Align</th>
</tr>
</thead>
<tbody>
<tr class="basic-text-layouts">
<td>
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
Basic Text
</div>
</div>
</div>
</td>
<td>
<div class="ic-text-layout ic-text-layout--center">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
Basic Text
</div>
</div>
</div>
</td>
<td>
<div class="ic-text-layout ic-text-layout--right">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
Basic Text
</div>
</div>
</div>
</td>
</tr>
<tr class="duo-row-text-layouts">
<td>
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
Basic Text
</div>
<div class="ic-text-layout__aside">
Aside Text
</div>
</div>
</div>
</td>
<td>
<div class="ic-text-layout ic-text-layout--center">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
Basic Text
</div>
<div class="ic-text-layout__aside">
Aside Text
</div>
</div>
</div>
</td>
<td>
<div class="ic-text-layout ic-text-layout--right">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
Basic Text
</div>
<div class="ic-text-layout__aside">
Aside Text
</div>
</div>
</div>
</td>
</tr>
<tr class="compound-text-layouts">
<td>
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Kitchen Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--spin ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</td>
<td>
<div class="ic-text-layout ic-text-layout--center">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--center">
<div class="ic-flex-cell ic-flex-cell--shrink">
Kitchen Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--spin ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</td>
<td>
<div class="ic-text-layout ic-text-layout--right">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell ic-flex-cell--shrink">
Kitchen Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--spin ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</td>
</tr>
<tr class="truncated-text-layouts">
<td>
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-ellipsis">
Very long long long long long long text
</div>
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Confirmed</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--spin ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</td>
<td>
<div class="ic-text-layout ic-text-layout--center">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--center">
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-ellipsis">
Very long long long long long long text
</div>
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Confirmed</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--spin ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</td>
<td>
<div class="ic-text-layout ic-text-layout--right">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-ellipsis">
Very long long long long long long text
</div>
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Confirmed</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--spin ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
Flex Layout (when using as Component Layout)
| Left Align | Center Align | Right Align |
|---|---|---|
|
Printer
Online
00:11:22:33:aa:bb
|
Printer
Online
00:11:22:33:aa:bb
|
Printer
Online
00:11:22:33:aa:bb
|
|
Printer
Online
00:11:22:33:aa:bb
|
Printer
Online
00:11:22:33:aa:bb
|
Printer
Online
00:11:22:33:aa:bb
|
|
Printer
Online
|
Printer
Online
|
Printer
Online
|
|
Printer
Online
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
Printer
Online
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
Printer
Online
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
<style>
.ic-flex-layout-demo {
width: 100%;
}
.ic-flex-layout-demo thead th {
width: 33%;
background: #333;
color: white;
padding: 5px 0;
}
.ic-flex-layout-demo tbody td {
vertical-align: top;
padding: 15px 0 0;
border-left: 1px solid #ddd;
}
.ic-flex-layout-demo tbody td:first-child {
border-left: none;
}
</style>
<!--
[Left-align]
.ic-flex-layout
└─ Text Cell +grow +shrink
└─.ic-text-layout
└─.ic-flex-layout
[Center-align - Text Only]
.ic-flex-layout +center
└─ Text Cell +shrink
└─.ic-text-layout +center
└─.ic-flex-layout +center
[Center-align - With Icon]
.ic-flex-layout +center
├─ Text Cell +shrink
│ └─.ic-text-layout
│ └─.ic-flex-layout
│
└─ Icon Cell
[Right-align]
.ic-flex-layout +right
└─ Text Cell +grow +shrink
└─.ic-text-layout +right
└─.ic-flex-layout +reverse
-->
<table class="ic-flex-layout-demo">
<thead>
<tr>
<th>Left Align</th>
<th>Center Align</th>
<th>Right Align</th>
</tr>
</thead>
<tbody>
<tr class="text-only-layouts">
<!-- Text Only | Left-align -->
<td>
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</div>
</div>
</td>
<td>
<!-- Text Only | Center-align -->
<div class="ic-flex-layout ic-flex-layout--center">
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-layout ic-text-layout--center">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--center">
<div class="ic-flex-cell ic-flex-cell--shrink">
Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</div>
</div>
</td>
<td>
<!-- Text Only | Right-align -->
<div class="ic-flex-layout ic-flex-layout--right">
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-layout ic-text-layout--right">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell ic-flex-cell--shrink">
Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="icon-text-layouts">
<td>
<!-- Icon + Text | Left-align -->
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-printer"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--grow ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</div>
</div>
</td>
<td>
<!-- Icon + Text | Center-align -->
<div class="ic-flex-layout ic-flex-layout--center">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-printer"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</div>
</div>
</td>
<td>
<!-- Icon + Text | Center-align -->
<div class="ic-flex-layout ic-flex-layout--right">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-printer"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--grow ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell ic-flex-cell--shrink">
Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="single-line-layouts">
<td>
<!-- Single line | Left-align -->
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-radio-selected"></i>
<i class="ic-icon ic-icon-printer"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--grow ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--gray"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-edit"></i>
<i class="ic-icon ic-icon-drag"></i>
</div>
</div>
</td>
<td>
<!-- Single line | Center-align -->
<div class="ic-flex-layout ic-flex-layout--center">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-radio-selected"></i>
<i class="ic-icon ic-icon-printer"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--gray"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-edit"></i>
<i class="ic-icon ic-icon-drag"></i>
</div>
</div>
</td>
<td>
<!-- Single line | Right-align -->
<div class="ic-flex-layout ic-flex-layout--right">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-radio-selected"></i>
<i class="ic-icon ic-icon-printer"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--grow ic-flex-cell--shrink">
<div class="ic-text-layout ic-text-layout--right">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell ic-flex-cell--shrink">
Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--gray"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-edit"></i>
<i class="ic-icon ic-icon-drag"></i>
</div>
</div>
</td>
</tr>
<tr class="muti-line-layouts">
<td>
<!-- Multiple line | Left-align -->
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-radio-selected"></i>
<i class="ic-icon ic-icon-printer"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--grow ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-edit"></i>
<i class="ic-icon ic-icon-drag"></i>
</div>
</div>
</td>
<td>
<!-- Multiple line | Center-align -->
<div class="ic-flex-layout ic-flex-layout--center">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-radio-selected"></i>
<i class="ic-icon ic-icon-printer"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-edit"></i>
<i class="ic-icon ic-icon-drag"></i>
</div>
</div>
</td>
<td>
<!-- Multiple line | Right-align -->
<div class="ic-flex-layout ic-flex-layout--right">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-radio-selected"></i>
<i class="ic-icon ic-icon-printer"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--grow ic-flex-cell--shrink">
<div class="ic-text-layout ic-text-layout--right">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell ic-flex-cell--shrink">
Printer
</div>
<div class="ic-flex-cell">
<div class="ic-tag">Online</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-inline-loading ic-icon--gray"></i>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-edit"></i>
<i class="ic-icon ic-icon-drag"></i>
</div>
</div>
</td>
</tr>
</tbody>
</table>
List Row
<ul class="ic-list">
<li class="ic-list-row">
<div class="ic-list-row__container">
<div class="ic-text-label">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
Kitchen Printer
</div>
</div>
</div>
</div>
</div>
</li>
<li class="ic-list-row">
<div class="ic-list-row__container">
<div class="ic-text-label">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-printer"></i>
</div>
<div class="ic-flex-cell">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
Kitchen Printer
</div>
<div class="ic-flex-cell">
<span class="ic-tag">Online</span>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
00:11:22:33:aa:bb
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ic-text-label">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
Text Label #2
</div>
<div class="ic-flex-cell">
<span class="ic-tag">True</span>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
The 2nd component in row
</div>
</div>
</div>
</div>
<div class="ic-text-label">
<div class="ic-flex-layout ic-flex-layout--right">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-printer"></i>
</div>
<div class="ic-flex-cell">
<div class="ic-text-layout ic-text-layout--right">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout ic-flex-layout--reverse">
<div class="ic-flex-cell">
Text Label #3
</div>
<div class="ic-flex-cell">
<span class="ic-tag">My Tag</span>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
Aligned to the right
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="ic-list-row ic-state-active">
<div class="ic-list-row__container">
<div class="ic-text-label">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
Active Row
</div>
</div>
</div>
</div>
</div>
</li>
<li class="ic-list-row ic-state-highlight">
<div class="ic-list-row__container">
<div class="ic-text-label">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
Highlight Row
</div>
</div>
</div>
</div>
</div>
</li>
<li class="ic-list-row ic-state-disabled">
<div class="ic-list-row__container">
<div class="ic-text-label">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
Disabled Row
</div>
</div>
</div>
</div>
</div>
</li>
<li class="ic-list-row">
<div class="ic-list-row__container">
Normal Row
</div>
</li>
</ul>
Top Header
<!-- Short Header | text btns -->
<div class="ic-header-row" style="width: 320px;">
<div class="ic-header-row__container">
<div class="ic-header-row__body">
<div class="ic-text-label">
<div class="ic-text-layout ic-text-layout--center">
<div class="ic-text-layout__body">
Header Title
</div>
</div>
</div>
</div>
<div class="ic-header-row__left">
<button class="ic-button ic-header-row__text-btn">
Action Label
</button>
</div>
<div class="ic-header-row__right">
<button class="ic-button ic-header-row__text-btn">
Save
</button>
</div>
</div>
</div>
<!-- Short Header | compound btn + icon btn -->
<div class="ic-header-row" style="width: 320px; margin-top: 30px;">
<div class="ic-header-row__container">
<div class="ic-header-row__body">
<div class="ic-text-label">
<div class="ic-text-layout ic-text-layout--center">
<div class="ic-text-layout__body">
Header Title
</div>
</div>
</div>
</div>
<div class="ic-header-row__left">
<button class="ic-button">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-prev"></i>
</div>
<div class="ic-flex-cell">
Back
</div>
</div>
</button>
</div>
<div class="ic-header-row__right">
<button class="ic-button">
<i class="ic-icon ic-icon-edit"></i>
</button>
</div>
</div>
</div>
<!-- Short Header | long title + single btn -->
<div class="ic-header-row" style="width: 320px; margin-top: 30px;">
<div class="ic-header-row__container">
<div class="ic-header-row__body">
<div class="ic-text-label">
<div class="ic-text-layout ic-text-layout--center">
<div class="ic-text-layout__body">
<div class="ic-text-ellipsis">
Long Long Long Long Header Title
</div>
</div>
</div>
</div>
</div>
<div class="ic-header-row__left">
<button class="ic-button">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-prev"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-ellipsis">
Back
</div>
</div>
</div>
</button>
</div>
<div class="ic-header-row__right"></div>
</div>
</div>
<!-- Normal Header | compound btn + icon btn -->
<div class="ic-header-row" style="margin-top: 30px;">
<div class="ic-header-row__container">
<div class="ic-header-row__body">
<div class="ic-text-label">
<div class="ic-text-layout ic-text-layout--center">
<div class="ic-text-layout__body">
Header Title
</div>
</div>
</div>
</div>
<div class="ic-header-row__left">
<button class="ic-button">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-prev"></i>
</div>
<div class="ic-flex-cell">
Back
</div>
</div>
</button>
</div>
<div class="ic-header-row__right">
<button class="ic-button">
<i class="ic-icon ic-icon-edit"></i>
</button>
</div>
</div>
</div>
<!-- Normal Header | active icon btn -->
<div class="ic-header-row" style="margin-top: 30px;">
<div class="ic-header-row__container">
<div class="ic-header-row__body">
<div class="ic-text-label">
<div class="ic-text-layout ic-text-layout--center">
<div class="ic-text-layout__body">
Header Title
</div>
</div>
</div>
</div>
<div class="ic-header-row__left"></div>
<div class="ic-header-row__right">
<button class="ic-button ic-state-active">
<i class="ic-icon ic-icon-edit"></i>
</button>
</div>
</div>
</div>
<!-- Normal Header -->
<div class="ic-header-row ic-state-active" style="margin-top: 30px;">
<div class="ic-header-row__container">
<div class="ic-header-row__body">
<div class="ic-text-label">
<div class="ic-text-layout ic-text-layout--center">
<div class="ic-text-layout__body">
Header Title
</div>
</div>
</div>
</div>
<div class="ic-header-row__left">
<button class="ic-button">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-prev"></i>
</div>
<div class="ic-flex-cell">
Back
</div>
</div>
</button>
</div>
<div class="ic-header-row__right">
<button class="ic-button">
<i class="ic-icon ic-icon-edit"></i>
</button>
</div>
</div>
</div>
<!-- Editing Header -->
<div class="ic-header-row ic-state-highlight" style="margin-top: 30px;">
<div class="ic-header-row__container">
<div class="ic-header-row__body">
<input type="text" class="ic-input ic-input--center" value="Header Title A" placeholder="Enter header title here..." />
</div>
</div>
</div>
<!-- Normal Header | with complex text label -->
<div class="ic-header-row" style="margin-top: 30px;">
<div class="ic-header-row__container">
<div class="ic-header-row__body">
<div class="ic-text-label">
<div class="ic-flex-layout ic-flex-layout--center">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-printer"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Kitchen Printer
</div>
<div class="ic-flex-cell">
<span class="ic-tag">Online</span>
</div>
<div class="ic-flex-cell">
<span class="ic-status">
<i class="ic-icon ic-icon-inline-loading ic-icon--spin ic-icon--gray"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ic-header-row__left">
<button class="ic-button">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-prev"></i>
</div>
<div class="ic-flex-cell">
Back
</div>
</div>
</button>
</div>
<div class="ic-header-row__right">
<button class="ic-button">
<i class="ic-icon ic-icon-edit"></i>
</button>
</div>
</div>
</div>
<div class="ic-header-row" style="margin-top: 30px;">
<div class="ic-header-row__container">
<div class="ic-header-row__body">
<div class="ic-text-label">
<div class="ic-flex-layout ic-flex-layout--center">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-printer"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Kitchen Printer
</div>
<div class="ic-flex-cell">
<span class="ic-tag">Online</span>
</div>
<div class="ic-flex-cell">
<span class="ic-status">
<i class="ic-icon ic-icon-inline-success ic-icon--blue"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ic-header-row__left">
<button class="ic-button">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-prev"></i>
</div>
<div class="ic-flex-cell">
Back
</div>
</div>
</button>
</div>
<div class="ic-header-row__right">
<button class="ic-button">
<i class="ic-icon ic-icon-edit"></i>
</button>
</div>
</div>
</div>
<div class="ic-header-row ic-state-error" style="margin-top: 30px;">
<div class="ic-header-row__container">
<div class="ic-header-row__body">
<div class="ic-text-label">
<div class="ic-flex-layout ic-flex-layout--center">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-printer"></i>
</div>
<div class="ic-flex-cell ic-flex-cell--shrink">
<div class="ic-text-layout">
<div class="ic-text-layout__body">
<div class="ic-text-layout__basic">
<div class="ic-flex-layout">
<div class="ic-flex-cell ic-flex-cell--shrink">
Kitchen Printer
</div>
<div class="ic-flex-cell">
<span class="ic-tag">Online</span>
</div>
</div>
</div>
<div class="ic-text-layout__aside">
Validation error: please check all fields.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ic-header-row__left">
<button class="ic-button">
<div class="ic-flex-layout">
<div class="ic-flex-cell">
<i class="ic-icon ic-icon-prev"></i>
</div>
<div class="ic-flex-cell">
Back
</div>
</div>
</button>
</div>
<div class="ic-header-row__right">
<button class="ic-button">
<i class="ic-icon ic-icon-edit"></i>
</button>
</div>
</div>
</div>
View with a fixed-on-top header and scrollable content below.
<style>
.ic-columnview-demo__viewport {
width: 320px;
height: 480px;
background-color: white;
border: 1px solid rgba(0, 0, 0, .3);
display: inline-block;
margin-right: 30px;
}
.ic-columnview-demo__cell {
width: 100%;
color: white;
font-size: 72px;
line-height: 320px;
text-align: center;
font-weight: 200;
}
.ic-columnview-demo__cell:nth-child(1) {
background-color: #c84646;
}
.ic-columnview-demo__cell:nth-child(2) {
background-color: #3c8cc8;
}
.ic-columnview-demo__cell:nth-child(3) {
background-color: #78c878;
}
</style>
<div>
<div class="ic-columnview-demo__viewport">
<div class="ic-columnview">
<div class="ic-columnview__header">
<div class="ic-header">
<h1 class="ic-header__title">Header Title</h1>
</div>
</div>
<div class="ic-columnview__body">
<div class="ic-columnview-demo__cell">A</div>
<div class="ic-columnview-demo__cell">B</div>
<div class="ic-columnview-demo__cell">C</div>
</div>
</div>
</div>
<div class="ic-columnview-demo__viewport">
<div class="ic-columnview">
<div class="ic-columnview__header">
<div class="ic-header">
<h1 class="ic-header__title">Header Title</h1>
</div>
</div>
<div class="ic-columnview__body">
<div class="ic-columnview-demo__cell">A</div>
<div class="ic-columnview-demo__cell">B</div>
<div class="ic-columnview-demo__cell">C</div>
</div>
<div class="ic-columnview__footer ic-text-left">
<i class="ic-icon-picture" style="vertical-align: -4px;"></i> Test footer
</div>
</div>
</div>
</div>
Layout class to create navigation animation like the NavigationController in iOS.
<style>
.ic-slideview-demo__viewport {
width: 320px;
height: 480px;
border: 1px solid rgba(0, 0, 0, .3);
}
.ic-slideview-demo__cell {
color: white;
font-size: 200%;
line-height: 480px;
font-weight: lighter;
text-align: center;
}
#ic-slideview-demo__cell1 {
background-color: lightseagreen;
}
#ic-slideview-demo__cell2 {
background-color: steelblue;
}
</style>
<div class="ic-slideview-demo__viewport">
<div class="ic-slideview">
<div id="ic-slideview-demo__cell1" class="ic-slideview-demo__cell ic-slideview__cell ic-slideview__cell--active">
Cell 1
</div>
<div id="ic-slideview-demo__cell2" class="ic-slideview-demo__cell ic-slideview__cell ic-slideview__cell--next">
Cell 2
</div>
</div>
</div>
<script>
(function() {
var emulatePush = true;
window.setInterval(function() {
$('.ic-slideview-demo__cell').removeClass('ic-slideview__cell--prev ic-slideview__cell--active ic-slideview__cell--next');
if (emulatePush) {
$('#ic-slideview-demo__cell1').addClass('ic-slideview__cell--prev');
$('#ic-slideview-demo__cell2').addClass('ic-slideview__cell--active');
} else {
$('#ic-slideview-demo__cell1').addClass('ic-slideview__cell--active');
$('#ic-slideview-demo__cell2').addClass('ic-slideview__cell--next');
}
emulatePush = !emulatePush;
}, 1500);
})();
</script>
Layout class to create multi-column views like the SplitView in iPad's Settings app.
<style>
.ic-splitview-demo__viewport {
width: 100%;
height: 480px;
background-color: white;
border: 1px solid rgba(0, 0, 0, .3);
}
</style>
<div class="ic-splitview-demo__viewport">
<div class="ic-splitview">
<section class="ic-splitview__column ic-splitview__column--list">
<div class="ic-columnview">
<div class="ic-columnview__header">
<div class="ic-header">
<h1 class="ic-header__title">Header Title</h1>
</div>
</div>
<div class="ic-columnview__body">
<div class="ic-columnview-demo__cell">A</div>
<div class="ic-columnview-demo__cell">B</div>
<div class="ic-columnview-demo__cell">C</div>
</div>
</div>
</section>
<section class="ic-splitview__column ic-splitview__column--list">
<div class="ic-splitview__placeholder">
<i class="ic-icon-loading ic-icon--large ic-icon--spin"></i>
</div>
</section>
<section class="ic-splitview__column ic-splitview__column--setting">
<div class="ic-header">
<h1 class="ic-header__title">Header Title</h1>
</div>
</section>
</div>
</div>
Simple Grid system.
<style>
.demo-grid-box {
margin-top: 15px;
padding: 10px;
border: 1px solid lightgrey;
text-align: center;
}
</style>
<!-- col divided into 3 equal segments -->
<div class="ic-row">
<div class="ic-col">
<div class="demo-grid-box">4/12</div>
</div>
<div class="ic-col">
<div class="demo-grid-box">4/12</div>
</div>
<div class="ic-col">
<div class="demo-grid-box">4/12</div>
</div>
</div>
<!-- row with flex-wrap -->
<div class="ic-row ic-row--wrap">
<div class="ic-col ic-col--2">
<div class="demo-grid-box">2/12</div>
</div>
<div class="ic-col ic-col--6">
<div class="demo-grid-box">6/12</div>
</div>
<div class="ic-col ic-col--4">
<div class="demo-grid-box">4/12</div>
</div>
</div>
<!-- col with padding -->
<div class="ic-row">
<div class="ic-col ic-col--4 ic-col--padding">
<div class="demo-grid-box">4/12 with padding</div>
</div>
<div class="ic-col ic-col--8 ic-col--padding">
<div class="demo-grid-box">8/12 with padding</div>
</div>
</div>