CenturyLink
Lumen

Portal

Enterprise portal patterns and templates.

Header

Base header

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<header class="chi-header -lg">
  <nav class="chi-header__content">
    <div class="chi-header__brand">
      <a class="chi-brand" href="#" aria-label="Lumen">
        <svg viewBox="0 0 145 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M0 1.4332C0 .61497895.65465263.00138947 1.55466316.00138947c.94108421 0 1.55466316.61358948 1.55466316 1.43181053v14.1059263c0 .4910737.2046421.7364421.7364421.7364421H17.0602316c1.0639368 0 1.6775158.4910737 1.6775158 1.4318105 0 .9821369-.613579 1.4321474-1.6775158 1.4321474H1.67751579C.57286316 19.1395263 0 18.6895263 0 17.7073789V1.4332zm26.4292842 10.5716737c0 5.2775789 2.8639579 4.639021 8.0597474 4.639021 5.1957895 0 8.0597473.7203579 8.0597473-4.6390105V1.43330526c0-.81822105.6135895-1.4321579 1.5546632-1.4321579.9407368 0 1.5546632.61392632 1.5546632 1.4321579V12.2913053c0 6.5868736-4.0914737 7.3390526-11.1690737 7.3390526-7.0779474 0-11.1690737-.752179-11.1690737-7.3390526V1.43329474c0-.81822106.6135895-1.43214737 1.5546632-1.43214737.9410736 0 1.5546631.61391579 1.5546631 1.43214737V12.0048737zm49.5442421-7.21691581h-.1228631l-7.5276106 7.13509471c-.7579894.6447263-1.1114947 1.1864421-1.8003684 1.1864421-.5482316 0-1.0783053-.5194736-1.7589684-1.1864421l-7.5690105-7.17615786h-.163579V17.9531579c0 .8589474-.6135895 1.4318105-1.5546631 1.4318105-.9000106 0-1.5546632-.5728631-1.5546632-1.4318105V2.12864211C53.9218.9422 55.0165368.00111579 55.9264737.00111579c.9102842 0 1.6823158.54822105 2.7003895 1.59572632l7.9368947 7.78974736h.0407263l7.9372316-7.83081052C75.5772526.60853685 76.0488105.00111579 77.1189053.00111579c1.1296421 0 1.9639473.94108421 1.9639473 2.12752632V17.9531474c0 .8589473-.6135789 1.431821-1.5546631 1.431821-.9000106 0-1.5546632-.5728737-1.5546632-1.431821V4.78795789zm11.4553369 3.53818948l13.3373048.0376421c1.104653 0 1.677516.5318 1.677516 1.43181053 0 .9410737-.572863 1.4321474-1.677516 1.4321474H90.5381789v4.3115158c0 .4907368.2046422.7364421.7364422.7364421h13.5419679c1.06359 0 1.636453.4907263 1.636453 1.4318105 0 .9818-.572863 1.4318105-1.636453 1.4318105H89.1063789c-1.1046526 0-1.6775157-.4500105-1.6775157-1.4318105V8.32614737zm48.6445048 9.21771583c0 1.0636-.816863 1.8411052-1.88181 1.8411052-1.055716 0-1.762726-.8117263-2.782179-1.6775158L116.190242 4.62438947V17.9531579c0 .8182316-.613926 1.4318105-1.554663 1.4318105-.900347 0-1.554663-.6135895-1.554663-1.4318105V2.12864211c0-1.39108421.731305-2.12752632 1.840747-2.12752632 1.011242 0 1.600526.66628421 2.659316 1.55466316l15.383053 12.91983155V1.43327368c0-.81822105.613589-1.4321579 1.554663-1.4321579.900021 0 1.554673.61392632 1.554673 1.4321579V17.5438632zm2.167569-14.93333688v-.01413685c0-1.34223158 1.088147-2.47245263 2.458484-2.47245263 1.384842 0 2.458484 1.11607369 2.458484 2.45830527v.01414736c0 1.34223158-1.087789 2.47262106-2.458484 2.47262106-1.384495 0-2.458484-1.11625264-2.458484-2.45848421zm4.6344-.01413685v-.01414736c0-1.20094737-.932537-2.18989474-2.175916-2.18989474-1.229232 0-2.175916 1.00309474-2.175916 2.2040421v.01413685c0 1.20094736.932537 2.19006315 2.175916 2.19006315 1.229242 0 2.175916-1.00325263 2.175916-2.2042zm-3.136748-1.2998h1.130569c.550968 0 .960821.26841053.960821.79126316 0 .40968421-.240463.6639579-.57959.7628l.664127.94668421h-.579253l-.59341-.86181052h-.522674v.86181052h-.48059V1.29658947zm1.088137 1.24338948c.325 0 .508537-.16956842.508537-.40986316 0-.26841053-.183537-.40968421-.508537-.40968421h-.607537v.81954737h.607537z" fill="#000"></path>
          <path d="M106.330232 1.71966316c0-.94108421-.572874-1.47287369-1.677516-1.47287369H89.1060842c-1.1043263 0-1.6771789.53178948-1.6771789 1.47287369v1.42565263l17.2648737-.0345579c1.063579-.00001052 1.636453-.49107368 1.636453-1.39109473" fill="#0C9ED9"></path>
        </svg>
      </a>
    </div>
    <div class="chi-header__start">
      <div class="-d--flex -d-lg--none">
        <button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-pib1" data-target="#drawer-1" aria-label="Toggle navigation">
          <div class="chi-button__content"><i class="chi-icon -sm--2 icon-menu"></i></div>
        </button>
      </div>
      <div class="chi-dropdown -portal -d--none -d-lg--flex">
        <button class="chi-button -flat chi-dropdown__trigger -text--xl -px--1 -animate" id="button-site-menu">App name</button>
        <div class="chi-dropdown__menu -list -w--lg"><a class="chi-dropdown__menu-item -h--auto -active" href="#"><span class="chi-dropdown__menu-item_title">App name</span><span class="chi-dropdown__menu-item_text">App description</span></a><a class="chi-dropdown__menu-item -h--auto" href="#"><span class="chi-dropdown__menu-item_title">App name 2</span><span class="chi-dropdown__menu-item_text">App description</span></a><a class="chi-dropdown__menu-item -h--auto" href="#"><span class="chi-dropdown__menu-item_title">App name 3</span><span class="chi-dropdown__menu-item_text">App description</span></a></div>
      </div>
    </div>
    <div class="chi-header__end">
      <div class="-d--none -d-lg--flex">
        <button class="chi-button -flat -icon" id="button-notification" aria-label="Notifications" data-tooltip="Notifications" data-position="bottom">
          <div class="chi-button__content"><i class="chi-icon icon-bell-outline -icon--primary" aria-hidden="true"></i>
            <div class="chi-badge -dark -xs">2</div>
          </div>
        </button>
        <div class="chi-divider -vertical"></div>
        <div class="chi-dropdown -portal -d--none -d-lg--flex">
          <button class="chi-button -flat chi-dropdown__trigger -px--1 -animate" id="button-user-menu" data-position="bottom-end">Menu</button>
          <div class="chi-dropdown__menu -w--sm"><a class="chi-dropdown__menu-item" href="#"><i class="chi-icon icon-user"></i><span>Item 1</span></a><a class="chi-dropdown__menu-item" href="#"><i class="chi-icon icon-logout"></i><span>Item 2</span></a></div>
        </div>
        <div class="chi-dropdown -portal -d--none -d-lg--flex">
          <button class="chi-button -flat chi-dropdown__trigger -px--1 -animate" id="button-eid-menu" data-position="bottom-end">Menu</button>
          <div class="chi-dropdown__menu -w--sm"><a class="chi-dropdown__menu-item" href="#"><i class="chi-icon icon-user"></i><span>Item 1</span></a><a class="chi-dropdown__menu-item" href="#"><i class="chi-icon icon-logout"></i><span>Item 2</span></a></div>
        </div>
      </div>
    </div>
  </nav>
</header>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div class="chi-drawer -left -menu -position--absolute" id="drawer-1">
      <div class="chi-drawer__header">
        <button class="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-drawer__content">
        <div class="-px--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>
  chi.drawer(document.getElementById('drawer-trigger-pib1'));
  chi.dropdown(document.getElementById('button-site-menu'));
  chi.dropdown(document.getElementById('button-user-menu'));
  chi.dropdown(document.getElementById('button-eid-menu'));
  chi.tooltip(document.getElementById('button-notification'));
</script>

Impersonation header

Signed in as:User
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<header class="chi-header -portal -lg -impersonation">
  <div class="chi-impersonation-bar">
    <div class="chi-impersonation-bar__content"><span class="chi-impersonation-bar__label">Signed in as:</span><strong class="chi-impersonation-bar__username">User</strong>
      <div class="chi-impersonation-bar__divider chi-divider -vertical -h--75"></div>
      <button class="chi-button -flat -sm -icon" id="button-logout" aria-label="Sign out" data-tooltip="Sign out" data-position="bottom">
        <div class="chi-button__content"><i class="chi-icon icon-logout -icon--primary" aria-hidden="true"></i></div>
      </button>
    </div>
  </div>
  <nav class="chi-header__content">
    <div class="chi-header__brand">
      <a class="chi-brand" href="#" aria-label="Lumen">
        <svg viewBox="0 0 145 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M0 1.4332C0 .61497895.65465263.00138947 1.55466316.00138947c.94108421 0 1.55466316.61358948 1.55466316 1.43181053v14.1059263c0 .4910737.2046421.7364421.7364421.7364421H17.0602316c1.0639368 0 1.6775158.4910737 1.6775158 1.4318105 0 .9821369-.613579 1.4321474-1.6775158 1.4321474H1.67751579C.57286316 19.1395263 0 18.6895263 0 17.7073789V1.4332zm26.4292842 10.5716737c0 5.2775789 2.8639579 4.639021 8.0597474 4.639021 5.1957895 0 8.0597473.7203579 8.0597473-4.6390105V1.43330526c0-.81822105.6135895-1.4321579 1.5546632-1.4321579.9407368 0 1.5546632.61392632 1.5546632 1.4321579V12.2913053c0 6.5868736-4.0914737 7.3390526-11.1690737 7.3390526-7.0779474 0-11.1690737-.752179-11.1690737-7.3390526V1.43329474c0-.81822106.6135895-1.43214737 1.5546632-1.43214737.9410736 0 1.5546631.61391579 1.5546631 1.43214737V12.0048737zm49.5442421-7.21691581h-.1228631l-7.5276106 7.13509471c-.7579894.6447263-1.1114947 1.1864421-1.8003684 1.1864421-.5482316 0-1.0783053-.5194736-1.7589684-1.1864421l-7.5690105-7.17615786h-.163579V17.9531579c0 .8589474-.6135895 1.4318105-1.5546631 1.4318105-.9000106 0-1.5546632-.5728631-1.5546632-1.4318105V2.12864211C53.9218.9422 55.0165368.00111579 55.9264737.00111579c.9102842 0 1.6823158.54822105 2.7003895 1.59572632l7.9368947 7.78974736h.0407263l7.9372316-7.83081052C75.5772526.60853685 76.0488105.00111579 77.1189053.00111579c1.1296421 0 1.9639473.94108421 1.9639473 2.12752632V17.9531474c0 .8589473-.6135789 1.431821-1.5546631 1.431821-.9000106 0-1.5546632-.5728737-1.5546632-1.431821V4.78795789zm11.4553369 3.53818948l13.3373048.0376421c1.104653 0 1.677516.5318 1.677516 1.43181053 0 .9410737-.572863 1.4321474-1.677516 1.4321474H90.5381789v4.3115158c0 .4907368.2046422.7364421.7364422.7364421h13.5419679c1.06359 0 1.636453.4907263 1.636453 1.4318105 0 .9818-.572863 1.4318105-1.636453 1.4318105H89.1063789c-1.1046526 0-1.6775157-.4500105-1.6775157-1.4318105V8.32614737zm48.6445048 9.21771583c0 1.0636-.816863 1.8411052-1.88181 1.8411052-1.055716 0-1.762726-.8117263-2.782179-1.6775158L116.190242 4.62438947V17.9531579c0 .8182316-.613926 1.4318105-1.554663 1.4318105-.900347 0-1.554663-.6135895-1.554663-1.4318105V2.12864211c0-1.39108421.731305-2.12752632 1.840747-2.12752632 1.011242 0 1.600526.66628421 2.659316 1.55466316l15.383053 12.91983155V1.43327368c0-.81822105.613589-1.4321579 1.554663-1.4321579.900021 0 1.554673.61392632 1.554673 1.4321579V17.5438632zm2.167569-14.93333688v-.01413685c0-1.34223158 1.088147-2.47245263 2.458484-2.47245263 1.384842 0 2.458484 1.11607369 2.458484 2.45830527v.01414736c0 1.34223158-1.087789 2.47262106-2.458484 2.47262106-1.384495 0-2.458484-1.11625264-2.458484-2.45848421zm4.6344-.01413685v-.01414736c0-1.20094737-.932537-2.18989474-2.175916-2.18989474-1.229232 0-2.175916 1.00309474-2.175916 2.2040421v.01413685c0 1.20094736.932537 2.19006315 2.175916 2.19006315 1.229242 0 2.175916-1.00325263 2.175916-2.2042zm-3.136748-1.2998h1.130569c.550968 0 .960821.26841053.960821.79126316 0 .40968421-.240463.6639579-.57959.7628l.664127.94668421h-.579253l-.59341-.86181052h-.522674v.86181052h-.48059V1.29658947zm1.088137 1.24338948c.325 0 .508537-.16956842.508537-.40986316 0-.26841053-.183537-.40968421-.508537-.40968421h-.607537v.81954737h.607537z" fill="#000"></path>
          <path d="M106.330232 1.71966316c0-.94108421-.572874-1.47287369-1.677516-1.47287369H89.1060842c-1.1043263 0-1.6771789.53178948-1.6771789 1.47287369v1.42565263l17.2648737-.0345579c1.063579-.00001052 1.636453-.49107368 1.636453-1.39109473" fill="#0C9ED9"></path>
        </svg>
      </a>
    </div>
    <div class="chi-header__start">
      <div class="-d--flex -d-lg--none">
        <button class="chi-button -icon -flat chi-drawer__trigger" id="drawer-trigger-pib2" data-target="#drawer-1" aria-label="Toggle navigation">
          <div class="chi-button__content"><i class="chi-icon -sm--2 icon-menu"></i></div>
        </button>
      </div>
      <div class="chi-dropdown -portal -d--none -d-lg--flex">
        <button class="chi-button -flat chi-dropdown__trigger -text--xl -px--1 -animate" id="button-site-menu2">App name</button>
        <div class="chi-dropdown__menu -list -w--lg"><a class="chi-dropdown__menu-item -h--auto -active" href="#"><span class="chi-dropdown__menu-item_title">App name</span><span class="chi-dropdown__menu-item_text">App description</span></a><a class="chi-dropdown__menu-item -h--auto" href="#"><span class="chi-dropdown__menu-item_title">App name 2</span><span class="chi-dropdown__menu-item_text">App description</span></a><a class="chi-dropdown__menu-item -h--auto" href="#"><span class="chi-dropdown__menu-item_title">App name 3</span><span class="chi-dropdown__menu-item_text">App description</span></a></div>
      </div>
    </div>
    <div class="chi-header__end">
      <div class="-d--none -d-lg--flex">
        <button class="chi-button -flat -icon" id="button-notification2" aria-label="Notifications" data-tooltip="Notifications" data-position="bottom">
          <div class="chi-button__content"><i class="chi-icon icon-bell-outline -icon--primary" aria-hidden="true"></i>
            <div class="chi-badge -dark -xs">2</div>
          </div>
        </button>
        <div class="chi-divider -vertical"></div>
        <div class="chi-dropdown -portal -d--none -d-lg--flex">
          <button class="chi-button -flat chi-dropdown__trigger -px--1 -animate" id="button-user-menu2" data-position="bottom-end">Menu</button>
          <div class="chi-dropdown__menu -w--sm"><a class="chi-dropdown__menu-item" href="#"><i class="chi-icon icon-user"></i><span>Item 1</span></a><a class="chi-dropdown__menu-item" href="#"><i class="chi-icon icon-logout"></i><span>Item 2</span></a></div>
        </div>
        <div class="chi-dropdown -portal -d--none -d-lg--flex">
          <button class="chi-button -flat chi-dropdown__trigger -px--1 -animate" id="button-eid-menu2" data-position="bottom-end">Menu</button>
          <div class="chi-dropdown__menu -w--sm"><a class="chi-dropdown__menu-item" href="#"><i class="chi-icon icon-user"></i><span>Item 1</span></a><a class="chi-dropdown__menu-item" href="#"><i class="chi-icon icon-logout"></i><span>Item 2</span></a></div>
        </div>
      </div>
    </div>
  </nav>
  <nav class="chi-header__navbar">
    <div class="chi-header__start"></div>
    <div class="chi-header__end">
      <ul class="chi-header__navbar-menu">
        <li><a href="#" target="_blank">Explore Lumen</a></li>
        <li><a href="#" target="_blank">Help</a></li>
        <li><a href="#" target="_blank">Contact Us</a></li>
      </ul>
    </div>
  </nav>
</header>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div class="chi-drawer -left -menu -position--absolute" id="drawer-1">
      <div class="chi-drawer__header">
        <button class="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-drawer__content">
        <div class="-px--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>
  chi.drawer(document.getElementById('drawer-trigger-pib2'));
  chi.dropdown(document.getElementById('button-site-menu2'));
  chi.dropdown(document.getElementById('button-user-menu2'));
  chi.dropdown(document.getElementById('button-eid-menu2'));
  chi.tooltip(document.getElementById('button-logout'));
  chi.tooltip(document.getElementById('button-notification2'));
</script>
Drawer content here

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 -portal -icon -primary -flat" aria-label="Button action">
  <div class="chi-button__content">
    <i class="chi-icon icon-refresh"></i>
  </div>
</button>

Text Input

Label
Label
Label
Label
Label
Label
Error message text 
<!-- Base -->
<div class="chi-form__item">
  <chi-label for="example__base">Label</chi-label>
  <chi-text-input id="example__base" size="lg" value="Base input"></chi-text-input>
</div>

<!-- Placeholder -->
<div class="chi-form__item">
  <chi-label for="example__placeholder">Label</chi-label>
  <chi-text-input id="example__placeholder" size="lg" placeholder="Placeholder input"></chi-text-input>
</div>

<!-- Optional -->
<div class="chi-form__item">
  <chi-label for="example__optional" optional>Label</chi-label>
  <chi-text-input id="example__optional" size="lg" value="Optional input"></chi-text-input>
</div>

<!-- Required -->
<div class="chi-form__item">
  <chi-label for="example__required" required>Label</chi-label>
  <chi-text-input id="example__required" size="lg" value="Required input" required></chi-text-input>
</div>

<!-- Disabled -->
<div class="chi-form__item">
  <chi-label for="example__disabled">Label</chi-label>
  <chi-text-input id="example__disabled" size="lg" value="Disabled input" disabled></chi-text-input>
</div>

<!-- Error -->
<div class="chi-form__item">
  <chi-label for="example__error" required>Label</chi-label>
  <chi-text-input id="example__error" size="lg" state="danger" value="Error input" required></chi-text-input>
  <div class="chi-label -status -danger">
    <chi-icon icon="circle-warning"></chi-icon>
    Error message text
  </div>
</div>
<!-- Base -->
<div class="chi-form__item">
  <label class="chi-label" for="example__base">Label</label>
  <input type="text" class="chi-input -lg" id="example__base" value="Base input">
</div>

<!-- Placeholder -->
<div class="chi-form__item">
  <label class="chi-label" for="example__placeholder">Label</label>
  <input type="text" class="chi-input -lg" id="example__placeholder" placeholder="Placeholder input">
</div>

<!-- Optional -->
<div class="chi-form__item">
  <label class="chi-label" for="example__optional">
    Label
    <abbr class="chi-label__optional" title="Optional field">(optional)</abbr>
  </label>
  <input type="text" class="chi-inpu -lg" id="example__optional" value="Optional input">
</div>

<!-- Required -->
<div class="chi-form__item">
  <label class="chi-label" for="example__required">
    Label
    <abbr class="chi-label__required" title="Required field">*</abbr>
  </label>
  <input type="text" class="chi-input -lg" id="example__required" value="Required input" required>
</div>

<!-- Disabled -->
<div class="chi-form__item">
  <label class="chi-label" for="example__disabled">Label</label>
  <input type="text" class="chi-input -lg" id="example__disabled" value="Disabled input">
</div>

<!-- Error -->
<div class="chi-form__item">
  <label class="chi-label" for="example__error">
    Label
    <abbr class="chi-label__required" title="Required field">*</abbr>
  </label>
  <input type="text" class="chi-input -lg -danger" id="example__error" value="Error input" required>
  <div class="chi-label -status -danger">
    <i class="chi-icon icon-circle-warning -icon--danger"></i>
    Error message text
  </div>
</div>

Select

<div class="chi-form__item">
  <label class="chi-label" for="example-select-base">Label</label>
  <select class="chi-select -lg -portal" id="example-select-base">
    <option value="">Select</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

Page Title

Base

Ticketing
<div class="-d--flex -flex--column">
  <div class="-d--flex -align-items--center -mb--4">
    <div class="-text--h3 -text--boldest -text--navy -m--0 -pr--2">Ticketing</div>
  </div>
</div>

With help

Ticketing
<div class="-d--flex -flex--column">
  <div class="-d--flex -align-items--center -mb--4">
    <div class="-text--h3 -text--boldest -text--navy -m--0">Ticketing</div>
    <a class="chi-button -icon -flat -lg -bg--none -b--transparent -opacity-hover--80" href="#" aria-label="Button action">
      <div class="chi-button__content"><i class="chi-icon icon-circle-question-outline"></i></div>
    </a>
  </div>
</div>

With back link

Ticketing
Create Repair Ticket
<div class="-d--flex -flex--column">
  <a class="chi-link" href="#">
    <div class="chi-link__content">
      <i class="chi-icon icon-chevron-left -xs"></i>
      <span class="-text--md">Ticketing</span>
    </div>
  </a>
  <div class="-d--flex -align-items--center -mb--4">
    <div class="-text--h3 -text--boldest -text--navy -m--0 -pr--2">Create Repair Ticket</div>
  </div>
</div>

With back link and subtitle

Ticketing
Create Repair Ticket
1-HB23OP (Arizona State University)
<div class="-d--flex -flex--column">
  <a class="chi-link" href="#">
    <div class="chi-link__content">
      <i class="chi-icon icon-chevron-left -xs"></i>
      <span class="-text--md">Ticketing</span>
    </div>
  </a>
  <div class="-d--flex -align-items--center -mb--4">
    <div class="-text--h3 -text--boldest -text--navy -m--0 -br--1 -pr--2">Create Repair Ticket</div>
    <div class="-text--md -pl--2">1-HB23OP (Arizona State University)</div>
  </div>
</div>

Tabs

Content for tab 1

Content for tab 2

Content for tab 3

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<ul class="chi-tabs -portal -border -xs" id="example-pt1" role="tablist" aria-label="example-pt1">
  <li class="-active">
    <a
      href="#a2"
      role="tab"
      aria-selected="true"
      aria-controls="a2">Autopay</a>
  </li>
  <li>
    <a
      href="#b2"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="ab2">Paperless Billing</a>
  </li>
  <li>
    <a
      href="#c2"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="c2">Accounts & Groups</a>
  </li>
</ul>

<div class="chi-tabs-panel -active" id="a2" role="tabpanel">
  <p class="-text">Content for tab 1</p>
</div>
<div class="chi-tabs-panel" id="b2" role="tabpanel">
  <p class="-text">Content for tab 2</p>
</div>
<div class="chi-tabs-panel" id="c2" role="tabpanel">
  <p class="-text">Content for tab 3</p>
</div>

<script>chi.tab(document.getElementById('example-pt1'));</script>

Alerts

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

Title
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<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

Title
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<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.
<div class="chi-card -portal">
  <div class="chi-card__tabs">
    <ul class="chi-tabs -xs">
      <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

Base

Title
NameIDLast Login
Name 1name-1Dec 18, 2020 3:26 PM
Name 2name-2Dec 18, 2020 2:38 AM
Name 3name-3Nov 5, 2020 10:15 AM
<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">
      <thead>
        <tr class="-sm">
          <th>Name</th>
            <th>ID</th>
            <th>Last Login</th>
        </tr>
      </thead>
      <tbody>
        <tr class="-lg">
          <td><a href="#">Name 1</a></td>
          <td>name-1</td>
          <td>Dec 18, 2020 3:26 PM</td>
        </tr>
        <tr class="-lg">
          <td><a href="#">Name 2</a></td>
          <td>name-2</td>
          <td>Dec 18, 2020 2:38 AM</td>
        </tr>
        <tr class="-lg">
          <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 with header cells in the top row and first column

Title
ABQ1ABY1AKN4ANT1ANT2ATL12ATL14AUS1AUS3BCH1BER1
ABQ15252525252525252525252
ABY14242424242424242424242
AKN4127127127127127127127127127127127
ANT12121215221212121212121
ANT2136136136136136136136136136180136
ATL12164164164164164164164164164164164
ATL145252525252525252525252
AUS15252525252525252525252
AUS33232323232323232323232
BCH12121212121212121212121
BER13131313131313131313131
<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">
    <div class="-p--2">
      <div class="chi-picker-group -portal">
        <div class="chi-picker-group__content">
          <input class="chi-picker__input" type="radio" name="unique-name-ba" id="unique-id-ba1" checked="checked" />
          <label for="unique-id-ba1">Option 1</label>
          <input class="chi-picker__input" type="radio" name="unique-name-ba" id="unique-id-ba2" />
          <label for="unique-id-ba2">Option 2</label>
          <input class="chi-picker__input" type="radio" name="unique-name-ba" id="unique-id-ba3" />
          <label for="unique-id-ba3">Option 3</label>
        </div>
      </div>
    </div>
    <div class="-overflow--auto">
      <table class="chi-table -bordered -striped -xs -text--center">
        <tr>
          <td class="-th"></td>
          <th scope="col">ABQ1</th>
          <th scope="col">ABY1</th>
          <th scope="col">AKN4</th>
          <th scope="col">ANT1</th>
          <th scope="col">ANT2</th>
          <th scope="col">ATL12</th>
          <th scope="col">ATL14</th>
          <th scope="col">AUS1</th>
          <th scope="col">AUS3</th>
          <th scope="col">BCH1</th>
          <th scope="col">BER1</th>
        </tr>
        <tr>
          <th scope="row">ABQ1</th>
          <td class="-bg--info-light">52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
        </tr>
        <tr>
          <th scope="row">ABY1</th>
          <td>42</td>
          <td>42</td>
          <td>42</td>
          <td>42</td>
          <td>42</td>
          <td>42</td>
          <td>42</td>
          <td>42</td>
          <td>42</td>
          <td>42</td>
          <td>42</td>
        </tr>
        <tr>
          <th scope="row">AKN4</th>
          <td>127</td>
          <td>127</td>
          <td>127</td>
          <td>127</td>
          <td>127</td>
          <td>127</td>
          <td>127</td>
          <td>127</td>
          <td>127</td>
          <td>127</td>
          <td>127</td>
        </tr>
        <tr>
          <th scope="row">ANT1</th>
          <td>21</td>
          <td>21</td>
          <td>21</td>
          <td class="-bg--danger-lighter -b--1 -b--danger">52</td>
          <td>21</td>
          <td>21</td>
          <td>21</td>
          <td>21</td>
          <td>21</td>
          <td>21</td>
          <td>21</td>
        </tr>
        <tr>
          <th scope="row">ANT2</th>
          <td>136</td>
          <td>136</td>
          <td>136</td>
          <td>136</td>
          <td>136</td>
          <td>136</td>
          <td>136</td>
          <td>136</td>
          <td>136</td>
          <td class="-bg--warning-lighter -b--1 -b--warning">180</td>
          <td>136</td>
        </tr>
        <tr>
          <th scope="row">ATL12</th>
          <td>164</td>
          <td>164</td>
          <td>164</td>
          <td>164</td>
          <td>164</td>
          <td>164</td>
          <td>164</td>
          <td>164</td>
          <td>164</td>
          <td>164</td>
          <td>164</td>
        </tr>
        <tr>
          <th scope="row">ATL14</th>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
        </tr>
        <tr>
          <th scope="row">AUS1</th>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
          <td>52</td>
        </tr>
        <tr>
          <th scope="row">AUS3</th>
          <td>32</td>
          <td>32</td>
          <td>32</td>
          <td>32</td>
          <td>32</td>
          <td>32</td>
          <td>32</td>
          <td>32</td>
          <td>32</td>
          <td>32</td>
          <td>32</td>
        </tr>
        <tr>
          <th scope="row">BCH1</th>
          <td>21</td>
          <td>21</td>
          <td>21</td>
          <td>21</td>
          <td>21</td>
          <td>21</td>
          <td>21</td>
          <td>21</td>
          <td>21</td>
          <td>21</td>
          <td>21</td>
        </tr>
        <tr>
          <th scope="row">BER1</th>
          <td>31</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
        </tr>
      </table>
    </div>
  </div>
</div>

Data table

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
<div class="chi-card -portal -bg--white -bg-md--grey-15">
  <div class="chi-card__header -sm">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content -p--0">
    <div class="chi-data-table -portal -compact">
      <div class="chi-data-table__head">
        <div class="chi-data-table__row">
          <div class="chi-data-table__cell">
            <div>Name</div>
          </div>
          <div class="chi-data-table__cell">
            <div>ID</div>
          </div>
          <div class="chi-data-table__cell">
            <div>Last Login</div>
          </div>
        </div>
      </div>
      <div class="chi-data-table__body">
        <div class="chi-data-table__row -xl">
          <div class="chi-data-table__cell -key -bold">
            <div>Name 1</div>
          </div>
          <div class="chi-data-table__cell -key">
            <div>name-1</div>
          </div>
          <div class="chi-data-table__cell">
            <div>Dec 18, 2020 3:26 PM</div>
          </div>
        </div>
        <div class="chi-data-table__row -striped -xl">
          <div class="chi-data-table__cell -key -bold">
            <div>Name 2</div>
          </div>
          <div class="chi-data-table__cell -key">
            <div>name-2</div>
          </div>
          <div class="chi-data-table__cell">
            <div>Dec 18, 2020 2:38 AM</div>
          </div>
        </div>
        <div class="chi-data-table__row -xl">
          <div class="chi-data-table__cell -key -bold">
            <div>Name 3</div>
          </div>
          <div class="chi-data-table__cell -key">
            <div>name-3</div>
          </div>
          <div class="chi-data-table__cell">
            <div>Nov 5, 2020 10:15 AM</div>
          </div>
        </div>
      </div>
      <div class="chi-data-table__footer">
        <nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
          <div class="chi-pagination__content">
            <div class="chi-pagination__start">
              <div class="chi-pagination__results">
                <span class="chi-pagination__label">240 Results</span>
              </div>
            </div>
            <div class="chi-pagination__center">
              <div class="chi-pagination__button-group chi-button-group">
                <a class="chi-button -icon -flat -sm -primary" href="#" aria-label="Previous page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
                  </div>
                </a>
              </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">
                <a class="chi-button -icon -flat -sm -primary" href="#" aria-label="Next page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
                  </div>
                </a>
              </div>
            </div>
            <div class="chi-pagination__end"></div>
          </div>
        </nav>
      </div>
    </div>
  </div>
</div>

Stat

Compact

Apply -portal and -compact to easily theme a Stat for portal dashboards where vertical space is limited.

Utilization
4
High
16
Elevated
Performance
0
Critical
1
Impacted
Status
12
Down
333
Up
Threshold Alerts
0
Warnings
0
Watches
Repair Tickets
2
Active
1
Closed
Sch Maintenance
2
In Progress
2
Upcoming
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-grid">
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Utilization</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button" aria-label="Help" data-target="#example__help-popover" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
            <section class="chi-popover chi-popover--bottom" id="example__help-popover" aria-modal="true" role="dialog">
              <div class="chi-popover__content">
                <p class="chi-popover__text">Helpful information goes here.</p>
              </div>
            </section>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">4</div>
          <div class="chi-stat-submetric__title">High</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--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Performance</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button2" aria-label="Help" data-target="#example__help-popover2" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
            <section class="chi-popover chi-popover--bottom" id="example__help-popover2" aria-modal="true" role="dialog">
              <div class="chi-popover__content">
                <p class="chi-popover__text">Helpful information goes here.</p>
              </div>
            </section>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">0</div>
          <div class="chi-stat-submetric__title">Critical</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">1</div>
          <div class="chi-stat-submetric__title">Impacted</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact -active">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Status</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button3" aria-label="Help" data-target="#example__help-popover3" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
            <section class="chi-popover chi-popover--bottom" id="example__help-popover3" aria-modal="true" role="dialog">
              <div class="chi-popover__content">
                <p class="chi-popover__text">Helpful information goes here.</p>
              </div>
            </section>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">12</div>
          <div class="chi-stat-submetric__title">Down</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">333</div>
          <div class="chi-stat-submetric__title">Up</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Threshold Alerts</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button4" aria-label="Help" data-target="#example__help-popover4" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
            <section class="chi-popover chi-popover--bottom" id="example__help-popover4" aria-modal="true" role="dialog">
              <div class="chi-popover__content">
                <p class="chi-popover__text">Helpful information goes here.</p>
              </div>
            </section>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">0</div>
          <div class="chi-stat-submetric__title">Warnings</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">0</div>
          <div class="chi-stat-submetric__title">Watches</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Repair Tickets</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button5" aria-label="Help" data-target="#example__help-popover5" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
            <section class="chi-popover chi-popover--bottom" id="example__help-popover5" aria-modal="true" role="dialog">
              <div class="chi-popover__content">
                <p class="chi-popover__text">Helpful information goes here.</p>
              </div>
            </section>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">2</div>
          <div class="chi-stat-submetric__title">Active</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">1</div>
          <div class="chi-stat-submetric__title">Closed</div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-col -w--2">
    <div class="chi-stat -portal -compact">
      <div class="chi-stat__content">
        <div class="chi-stat-metric">
          <div class="chi-stat-metric__title">Sch Maintenance</div>
          <div class="chi-label__help">
            <button class="chi-button -icon -sm -flat -light" id="example__help-button6" aria-label="Help" data-target="#example__help-popover6" data-position="bottom"><i class="chi-icon icon-circle-info-outline"></i></button>
            <section class="chi-popover chi-popover--bottom" id="example__help-popover6" aria-modal="true" role="dialog">
              <div class="chi-popover__content">
                <p class="chi-popover__text">Helpful information goes here.</p>
              </div>
            </section>
          </div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">2</div>
          <div class="chi-stat-submetric__title">In Progress</div>
        </div>
        <div class="chi-stat-submetric">
          <div class="chi-stat-submetric__value">2</div>
          <div class="chi-stat-submetric__title">Upcoming</div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>chi.popover(document.getElementById('example__help-button'));</script>
<script>chi.popover(document.getElementById('example__help-button2'));</script>
<script>chi.popover(document.getElementById('example__help-button3'));</script>
<script>chi.popover(document.getElementById('example__help-button4'));</script>
<script>chi.popover(document.getElementById('example__help-button5'));</script>
<script>chi.popover(document.getElementById('example__help-button6'));</script>

Base

1
High Utilization
16
Elevated
1
Critical Performing
21
Impacted
2
Services Down
47
Up
3
Scheduled Maintenance
1
Planned
<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
8
Active Tickets
115
Active Orders
5
New Alerts
<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>

Modal

Base

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-base" class="chi-button chi-modal__trigger" data-target="#modal-base">
  Launch portal modal
</button>

<!-- Modal -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <section id="modal-base" 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 -outline -lg -px--4 -text--uppercase">Cancel</button>
        <button class="chi-button -primary -lg -px--4 -text--uppercase">Save</button>
      </footer>
    </section>
  </div>
</div>

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

Alert

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-alert" class="chi-button chi-modal__trigger" data-target="#modal-alert">
  Launch portal alert modal
</button>

<!-- Modal -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <section id="modal-alert" 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-alert'));</script>

Drawer

Drawer title here
Drawer content here
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<!-- Trigger -->
<button id="drawer-trigger" class="chi-button -primary chi-drawer__trigger" data-target="#drawer">Launch demo drawer</button>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div id="drawer" class="chi-drawer -bottom -portal">
      <div class="chi-drawer__header">
        <span class="chi-drawer__title">
          Drawer title here
        </span>
        <button class="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-drawer__content">
        <div class="-p--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

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

Accordion

Base

Content goes here

Content goes here

Content goes here

Content goes here

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-accordion -portal" id="example-portal">
  <div class="chi-accordion__item">
    <button class="chi-accordion__trigger">
      <div class="chi-accordion__title">Accordion 1</div>
      <i class="chi-icon icon-chevron-down"></i>
    </button>
    <div class="chi-accordion__content">
      <p class="chi-accordion__text">Content goes here</p>
    </div>
  </div>
  <div class="chi-accordion__item -expanded">
    <button class="chi-accordion__trigger">
      <div class="chi-accordion__title">Accordion 2</div>
      <i class="chi-icon icon-chevron-down"></i>
    </button>
    <div class="chi-accordion__content">
      <p class="chi-accordion__text">Content goes here</p>
    </div>
  </div>
  <div class="chi-accordion__item">
    <button class="chi-accordion__trigger">
      <div class="chi-accordion__title">Accordion 3</div>
      <i class="chi-icon icon-chevron-down"></i>
    </button>
    <div class="chi-accordion__content">
      <p class="chi-accordion__text">Content goes here</p>
    </div>
  </div>
  <div class="chi-accordion__item">
    <button class="chi-accordion__trigger">
      <div class="chi-accordion__title">Accordion 4</div>
      <i class="chi-icon icon-chevron-down"></i>
    </button>
    <div class="chi-accordion__content">
      <p class="chi-accordion__text">Content goes here</p>
    </div>
  </div>
</div>

<script>
  const accordionPortal = document.getElementById('example-portal');

  chi.accordion(accordionPortal);
</script>

Nested Accordions

Content goes here

Content goes here

Content goes here

Content goes here

Content goes here

Content goes here

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-accordion -portal" id="nested-accordions">
  <div class="chi-accordion__item">
    <button class="chi-accordion__trigger">
      <div class="chi-accordion__title">Click me to expand Accordion</div>
      <i class="chi-icon icon-chevron-down"></i>
    </button>
    <div class="chi-accordion__content">
      <div class="chi-accordion -portal">
        <div class="chi-accordion__item">
          <button class="chi-accordion__trigger">
            <div class="chi-accordion__title">Accordion 1</div>
            <i class="chi-icon icon-chevron-down"></i>
          </button>
          <div class="chi-accordion__content">
            <p class="chi-accordion__text">Content goes here</p>
            <div class="chi-accordion -portal">
              <div class="chi-accordion__item">
                <button class="chi-accordion__trigger">
                  <div class="chi-accordion__title">Accordion 1.1</div>
                  <i class="chi-icon icon-chevron-down"></i>
                </button>
                <div class="chi-accordion__content">
                  <p class="chi-accordion__text">Content goes here</p>
                  <div class="chi-accordion -portal">
                    <div class="chi-accordion__item">
                      <button class="chi-accordion__trigger">
                        <div class="chi-accordion__title">Accordion 1.1.1</div>
                        <i class="chi-icon icon-chevron-down"></i>
                      </button>
                      <div class="chi-accordion__content">
                        <p class="chi-accordion__text">Content goes here</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="chi-accordion -portal">
              <div class="chi-accordion__item">
                <button class="chi-accordion__trigger">
                  <div class="chi-accordion__title">Accordion 1.2</div>
                  <i class="chi-icon icon-chevron-down"></i>
                </button>
                <div class="chi-accordion__content">
                  <p class="chi-accordion__text">Content goes here</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="chi-accordion__item">
          <button class="chi-accordion__trigger">
            <div class="chi-accordion__title">Accordion 2</div>
            <i class="chi-icon icon-chevron-down"></i>
          </button>
          <div class="chi-accordion__content">
            <p class="chi-accordion__text">Content goes here</p>
            <div class="chi-accordion -portal">
              <div class="chi-accordion__item">
                <button class="chi-accordion__trigger">
                  <div class="chi-accordion__title">Accordion 2.1</div>
                  <i class="chi-icon icon-chevron-down"></i>
                </button>
                <div class="chi-accordion__content">
                  <p class="chi-accordion__text">Content goes here</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const accordionNested = document.getElementById('nested-accordions');

  chi.accordion(accordionNested);
</script>

Card Accordions

Content goes here

Content goes here

Content goes here

Content goes here

Content goes here

Content goes here

Content goes here

Content goes here

Content goes here

Content goes here

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-accordion -portal -card" id="example-accordion-card">
  <div class="chi-accordion__item">
    <button class="chi-accordion__trigger">
      <i class="chi-icon icon-chevron-down"></i>
      <div class="chi-accordion__title">Accordion 1</div>
    </button>
    <div class="chi-accordion__content">
      <p class="chi-accordion__text">Content goes here</p>
    </div>
  </div>
  <div class="chi-accordion__item -expanded">
    <button class="chi-accordion__trigger">
      <i class="chi-icon icon-chevron-down"></i>
      <div class="chi-accordion__title">Accordion 2</div>
    </button>
    <div class="chi-accordion__content">
      <p class="chi-accordion__text">Content goes here</p>
    </div>
  </div>
  <div class="chi-accordion__item">
    <button class="chi-accordion__trigger">
      <i class="chi-icon icon-chevron-down"></i>
      <div class="chi-accordion__title">Accordion 3 nested</div>
    </button>
    <div class="chi-accordion__content">
      <div class="chi-accordion -portal">
        <div class="chi-accordion__item">
          <button class="chi-accordion__trigger">
            <i class="chi-icon icon-chevron-down"></i>
            <div class="chi-accordion__title">Accordion 3.1</div>
          </button>
          <div class="chi-accordion__content">
            <p class="chi-accordion__text">Content goes here</p>
          </div>
        </div>
        <div class="chi-accordion__item -expanded">
          <button class="chi-accordion__trigger">
            <i class="chi-icon icon-chevron-down"></i>
            <div class="chi-accordion__title">Accordion 3.2 nested</div>
          </button>
          <div class="chi-accordion__content">
            <div class="chi-accordion -portal">
              <div class="chi-accordion__item">
                <button class="chi-accordion__trigger">
                  <i class="chi-icon icon-chevron-down"></i>
                  <div class="chi-accordion__title">Accordion 3.2.1</div>
                </button>
                <div class="chi-accordion__content">
                  <p class="chi-accordion__text">Content goes here</p>
                </div>
              </div>
              <div class="chi-accordion__item">
                <button class="chi-accordion__trigger">
                  <i class="chi-icon icon-chevron-down"></i>
                  <div class="chi-accordion__title">Accordion 3.2.2</div>
                </button>
                <div class="chi-accordion__content">
                  <p class="chi-accordion__text">Content goes here</p>
                </div>
              </div>
              <div class="chi-accordion__item">
                <button class="chi-accordion__trigger">
                  <i class="chi-icon icon-chevron-down"></i>
                  <div class="chi-accordion__title">Accordion 3.2.3</div>
                </button>
                <div class="chi-accordion__content">
                  <p class="chi-accordion__text">Content goes here</p>
                </div>
              </div>
              <div class="chi-accordion__item">
                <button class="chi-accordion__trigger">
                  <i class="chi-icon icon-chevron-down"></i>
                  <div class="chi-accordion__title">Accordion 3.2.4</div>
                </button>
                <div class="chi-accordion__content">
                  <p class="chi-accordion__text">Content goes here</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="chi-accordion__item">
          <button class="chi-accordion__trigger">
            <i class="chi-icon icon-chevron-down"></i>
            <div class="chi-accordion__title">Accordion 3.3 nested</div>
          </button>
          <div class="chi-accordion__content">
            <p class="chi-accordion__text">Content goes here</p>
          </div>
        </div>
        <div class="chi-accordion__item">
          <button class="chi-accordion__trigger">
            <i class="chi-icon icon-chevron-down"></i>
            <div class="chi-accordion__title">Accordion 3.4</div>
          </button>
          <div class="chi-accordion__content">
            <p class="chi-accordion__text">Content goes here</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="chi-accordion__item">
    <button class="chi-accordion__trigger">
      <i class="chi-icon icon-chevron-down"></i>
      <div class="chi-accordion__title">Accordion 4</div>
    </button>
    <div class="chi-accordion__content">
      <p class="chi-accordion__text">Content goes here</p>
    </div>
  </div>
</div>

<script>
  const accordionCard = document.getElementById('example-accordion-card');

  chi.accordion(accordionCard);
</script>

Picker Group

Select an option
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker-group -portal">
    <div class="chi-picker-group__content">
      <input class="chi-picker__input" type="radio" name="unique-name-ch" id="unique-id-ch1" checked>
      <label for="unique-id-ch1">Option 1</label>
      <input class="chi-picker__input" type="radio" name="unique-name-ch" id="unique-id-ch2">
      <label for="unique-id-ch2">Option 2</label>
      <input class="chi-picker__input" type="radio" name="unique-name-ch" id="unique-id-ch3">
      <label for="unique-id-ch3">Option 3</label>
      <input class="chi-picker__input" type="radio" name="unique-name-ch" id="unique-id-ch4" disabled>
      <label for="unique-id-ch4">Option 4</label>
    </div>
  </div>
</fieldset>

Page-level actions

Use to display action buttons at the bottom of the page on full-page forms.

<div class="-d--flex -align-items--center -justify-content--end -py--3 -my--2 -bt--1">
  <button class="chi-button -primary -outline -lg -uppercase -px--4 -bg--white">Cancel</button>
  <button class="chi-button -primary -lg -uppercase -px--4 -ml--1">Submit</button>
</div>