Portal
Buttons
<button class="chi-button -primary -lg -uppercase -px--4">Primary</button>
<button class="chi-button -primary -outline -lg -bg--white -uppercase -px--4">Secondary</button>
<button class="chi-button -primary -outline -sm -bg--white -px--2">Tertiary</button>
Alerts
Success
Needs attention
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Error
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip Open a ticket.
Info
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
Testing in progress
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
<!-- Success -->
<div class="chi-alert -success -lg -b--success-light -bg--success-lighter" role="alert">
<i class="chi-alert__icon chi-icon icon-circle-check"></i>
<div class="chi-alert__content">
<p class="chi-alert__title -text--lg">Success</p>
</div>
</div>
<!-- Warning -->
<div class="chi-alert -warning -lg -b--warning-light -bg--warning-lighter" role="alert">
<i class="chi-alert__icon chi-icon icon-warning"></i>
<div class="chi-alert__content">
<p class="chi-alert__title -text--lg">Needs attention</p>
<p class="chi-alert__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<!-- Danger -->
<div class="chi-alert -danger -lg -b--danger-light -bg--danger-lighter" role="alert">
<i class="chi-alert__icon chi-icon icon-circle-x"></i>
<div class="chi-alert__content">
<p class="chi-alert__title -text--lg">Error</p>
<p class="chi-alert__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip <a href="#">Open a ticket</a>.</p>
</div>
</div>
<!-- Info -->
<div class="chi-alert -info -lg -b--info-light -bg--info-lighter" role="alert">
<i class="chi-alert__icon chi-icon icon-circle-info"></i>
<div class="chi-alert__content">
<p class="chi-alert__title -text--lg">Info</p>
<p class="chi-alert__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
</div>
<button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
<div class="chi-alert -info -lg -b--info-light -bg--info-lighter" role="alert">
<div class="chi-alert__icon">
<svg class="chi-spinner -info -sm--2" viewBox="0 0 66 66">
<title>Loading</title>
<circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
</svg>
</div>
<div class="chi-alert__content">
<p class="chi-alert__title -text--lg">Testing in progress</p>
<p class="chi-alert__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
</div>
</div>
Pagination
Table pagination
Default
First and last page buttons
<!-- Base -->
<nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start"></div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -sm" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-pagination__label">
<strong>2</strong>
<span>of</span>
<strong>3</strong>
</div>
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -sm" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
<!-- With first and last page buttons -->
<nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
<div class="chi-pagination__content">
<div class="chi-pagination__start"></div>
<div class="chi-pagination__center">
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -sm" aria-label="First page">
<div class="chi-button__content">
<i class="chi-icon icon-page-first" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -sm" aria-label="Previous page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-pagination__label">
<strong>2</strong>
<span>of</span>
<strong>3</strong>
</div>
<div class="chi-pagination__button-group chi-button-group">
<button class="chi-button -icon -flat -sm" aria-label="Next page">
<div class="chi-button__content">
<i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -flat -sm" aria-label="Last page">
<div class="chi-button__content">
<i class="chi-icon icon-page-last" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-pagination__end"></div>
</div>
</nav>
Cards
Base
<div class="chi-card -portal">
<div class="chi-card__header -sm">
<div class="chi-card__title">Title</div>
</div>
<div class="chi-card__content">
<div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
</div>
</div>
Highlight
<div class="chi-card -portal -highlight">
<div class="chi-card__header -sm">
<div class="chi-card__title">Title</div>
</div>
<div class="chi-card__content">
<div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
</div>
</div>
Card with tabs
Use cards with tabs for organizing enterprise portal card content into separate but related views.
<div class="chi-card -portal">
<div class="chi-card__tabs">
<ul class="chi-tabs -sm">
<li class="-active">
<a href="#">Active Tab</a>
</li>
<li>
<a href="#">Tab Link</a>
</li>
<li>
<a href="#">Tab Link</a>
</li>
</ul>
</div>
<div class="chi-card__content">
<div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
</div>
</div>
Table
<div class="chi-card -portal">
<div class="chi-card__header -sm">
<div class="chi-card__title">Title</div>
</div>
<div class="chi-card__content -p--0">
<table class="chi-table -portal -sm">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Last Login</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Name 1</a></td>
<td>name-1</td>
<td>Dec 18, 2020 3:26 PM</td>
</tr>
<tr>
<td><a href="#">Name 2</a></td>
<td>name-2</td>
<td>Dec 18, 2020 2:38 AM</td>
</tr>
<tr>
<td><a href="#">Name 3</a></td>
<td>name-3</td>
<td>Nov 5, 2020 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</div>
Table + tabs
<div class="chi-card -portal">
<div class="chi-card__tabs">
<div class="chi-card__title">Title</div>
<ul class="chi-tabs -sm">
<li class="-active">
<a href="#">Active Tab</a>
</li>
<li>
<a href="#">Tab Link</a>
</li>
<li>
<a href="#">Tab Link</a>
</li>
</ul>
</div>
<div class="chi-card__content -p--0">
<table class="chi-table -portal -sm">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Last Login</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Name 1</a></td>
<td>name-1</td>
<td>Dec 18, 2020 3:26 PM</td>
</tr>
<tr>
<td><a href="#">Name 2</a></td>
<td>name-2</td>
<td>Dec 18, 2020 2:38 AM</td>
</tr>
<tr>
<td><a href="#">Name 3</a></td>
<td>name-3</td>
<td>Nov 5, 2020 10:15 AM</td>
</tr>
</tbody>
</table>
</div>
</div>