Portal

Enterprise portal patterns and templates.

Buttons

Text

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

Icons

<button class="chi-button -icon -flat -bg--none -opacity-hover--80" aria-label="Button action">
  <div class="chi-button__content">
    <i class="chi-icon icon-refresh"></i>
  </div>
</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

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

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

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

Web Component
HTML Blueprint

<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

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

Web Component
HTML Blueprint

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

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

Web Component
HTML Blueprint

<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

Name	ID	Last Login
Name 1	name-1	Dec 18, 2020 3:26 PM
Name 2	name-2	Dec 18, 2020 2:38 AM
Name 3	name-3	Nov 5, 2020 10:15 AM

Web Component
HTML Blueprint

<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

Title

Name	ID	Last Login
Name 1	name-1	Dec 18, 2020 3:26 PM
Name 2	name-2	Dec 18, 2020 2:38 AM
Name 3	name-3	Nov 5, 2020 10:15 AM

Web Component
HTML Blueprint

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

Stat

Base

High Utilization

Elevated

Critical Performing

Impacted

Services Down

Scheduled Maintenance

Planned

Web Component
HTML Blueprint

<div class="chi-grid">
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">1</div>
          <div class="chi-stat-metric__title">High Utilization</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">16</div>
          <div class="chi-stat-submetric__title">Elevated</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">1</div>
          <div class="chi-stat-metric__title">Critical Performing</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">21</div>
          <div class="chi-stat-submetric__title">Impacted</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center -active">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">2</div>
          <div class="chi-stat-metric__title">Services Down</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">47</div>
          <div class="chi-stat-submetric__title">Up</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">3</div>
          <div class="chi-stat-metric__title">Scheduled Maintenance</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">1</div>
          <div class="chi-stat-submetric__title">Planned</div>
        </div>
      </div>
    </div>
  </div>
</div>

Stat with Background Icons

$21,000

Outstanding Invoices

Active Tickets

115

Active Orders

New Alerts

Web Component
HTML Blueprint

<div class="chi-grid">
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">1</div>
          <div class="chi-stat-metric__title">High Utilization</div>
        </div>
        <div class="chi-stat-background-icon">
          <i class="chi-icon icon-file"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">1</div>
          <div class="chi-stat-metric__title">Critical Performing</div>
        </div>
        <div class="chi-stat-background-icon">
          <i class="chi-icon icon-warning"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center -active">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">2</div>
          <div class="chi-stat-metric__title">Services Down</div>
        </div>
        <div class="chi-stat-background-icon">
          <i class="chi-icon icon-map-marker"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
    <div class="chi-stat -portal -center">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__value">3</div>
          <div class="chi-stat-metric__title">Scheduled Maintenance</div>
        </div>
        <div class="chi-stat-background-icon">
          <i class="chi-icon icon-mail"></i>
        </div>
      </div>
    </div>
  </div>
</div>

Portal

Base

Web Component
HTML Blueprint

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<!-- Trigger -->
<button id="modal-trigger-10" class="chi-button chi-modal__trigger" data-target="#modal-10">
  Launch portal modal
</button>

<!-- Modal -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <section id="modal-10" class="chi-modal -portal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="chi-modal__header">
        <h2 class="chi-modal__title">Modal Title</h2>
        <button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="chi-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="chi-modal__footer">
        <button class="chi-button -primary -lg -text--uppercase">Button</button>
      </footer>
    </section>
  </div>
</div>

<!-- JavaScript -->
<script>chi.modal(document.getElementById('modal-trigger-10'));</script>

Alert

Web Component
HTML Blueprint

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<!-- Trigger -->
<button id="modal-trigger-11" class="chi-button chi-modal__trigger" data-target="#modal-11">
  Launch portal alert modal
</button>

<!-- Modal -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <section id="modal-11" class="chi-modal -portal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="chi-modal__header">
        <h2 class="chi-modal__title">Alert Modal Title</h2>
        <button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="chi-modal__content">
        <div class="-d--flex">
          <i class="chi-icon icon-circle-x -sm--3 -icon--danger -mr--2"></i>
          <div class="-w--100">
            <p class="-text--bold -m--0">Replace this subhead text with specific text from project documentation</p>
            <p class="-mt--1 -mb--0">Supporting text to explain the subhead text. Check user story to customize based on requirements. This is placeholder text to show spacing and line height. Replace this text with text provided in requirements.</p>
          </div>
        </div>
      </div>
      <footer class="chi-modal__footer">
        <button class="chi-button -primary -lg -text--uppercase -px--4">Button</button>
      </footer>
    </section>
  </div>
</div>

<!-- JavaScript -->
<script>chi.modal(document.getElementById('modal-trigger-11'));</script>